新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

Javascript

【JavaScript 】DOMノードへのイベント定義にて、JavaScript 実行時エラー: 未定義または NULLとなる場合の対処

■今回の内容 JavaScript 実行時エラーで落ちたのでその対応をメモ ■内容 事象 :DOMノードへのイベント追加時に、JavaScript 実行時エラー: 未定義または NULLとなる場合の対処 理由 :DOMノードが定義する前にイベントを追加しようとしているため、イベント…

【javascript】javascriptのDOMイベントの実行順序 各フェーズ(キャプチャフェーズ・ターゲットフェーズ・バブリングフェーズ)

■今回の紹介 addEventListenerについて調べていて、 addEventListenerの第三引数(以下の?部分)について、意味がよくわからなかったため、調べたものをメモしときます。☆addEventListener 用途 :同一ノードに同一イベントに複数のfunctionを登録すためのも…

【javascript】オブジェクト(オブジェクトリテラル)、連想配列

【今回の紹介】 「オブジェクト(オブジェクトリテラル)、連想配列」 現場でなんかそれぞれ微妙に解釈が異なり、若干ぎくしゃくしたので、 整理します。 ※開発ブランクがある人、最近始めた人で議論すると、なんか上手くいきません。 曖昧な理解でやってた…

【javascript】HTMLとjavascriptの分離についてのまとめ

【今回の紹介】掲題の通り【内容】HTMLとjavascriptの分離について調べていくうちに段階があったのでメモしときます。 ■第一段階;HTML内にonclickなどを入れる <input type='button' id='button'value='サンプル' onclick='add1()'></input> function add1(){ alert("add1"); } ■第二段階;HTMLとjavascriptの分離するため、スクリプト…

【HTML5・javascript】canvasにクリックすると動く四角を描く

【今回の内容】 掲題の通り、canvasにクリックすると動く四角を描きました 【処理の流れ】 ■キャンパス要素の生成の流れ ①マウス押下時の座標を取得 ②マウスを離したときの座標を取得 ③キャンパス要素の生成 ④キャンパスの色・クリックイベント・キャンパス…

【HTML5・javascript】canvasにcanvas要素を追加することで、自由に四角を描く

【今回の紹介】 掲題の通りです。 【内容】 以下の理由で、canvas要素を追加することで、自由に四角を描くサンプルを作成しました①bodyに大きなcanvasを生成して、四角を描くサンプルなどはたくさんありますが canvasを追加していくというサンプルがなかった…

【HTML5・javascript】canvasを使用して、自由に線を描くところから乱数を使用して絵を描くところまで

【今回の紹介】 HTML5を学習したのでそのメモを残しておきます。 【メモ】 下記のサンプルを通して、 ・カーソルの座標をとりながら、線を描く手順 ・乱数と関数の再帰的呼び出し、キャンパスへの描画を組み合わせ でできることについて学べました 参考ソー…

【HTML5・javascript】canvasにマウスで四角を描く

【今回の紹介】 掲題のものを作ったので、メモしときます。 【内容】 シンプルな作りです。 以下のイベントのときの座標をとって描画しています。 ・マウスを押下したとき ・マウスを離したとき 【参考ソース】 <html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body> <canvas id='canvas'></canvas> <script> startX=0; startY=0; window.onl</body></html>…

【HTML5・javascript】canvasにマウスで線を描く

【今回の紹介】 掲題の通りです。 【内容】 ソース的な以下の部分がわかりにくいのでメモしときます。 ①マウスが押されてから、マウスが動いている時のイベントを拾うために グローバル関数を使用していること ちなみに、 mousedown=false; ②描画の終わりを…

【javascript】生成したインスタンスの値をイベントハンドラから取得する

【今回の紹介】 生成したインスタンスの値をイベントハンドラから取得する 【内容】 以下にうまくいかなかった事例とうまくいった事例をまとめておきます。 ■主にうまくいかなかった理由 ①this がDOMノードを優勢してしまうこと ②thisが引数でわたせないこと…

【HTML5・javascript】テキストボックスの値を図に出力する

【今回の紹介】 テキストボックスの値を図に出力する処理を行います。 具体的には、出力ボタンを押すと、図の描画を行い、図の中に入力したテキストボックスの値を出力するという処理です※複数の値をもった複数の図を管理するようにしていきたいので、図obj…

【HTML5・javascript】Webストレージを使って、登録・保存・検索・出力する

【今回の紹介】 掲題の通り、Webストレージを使って、登録・保存・検索・出力する処理をメモとして残します。参考 Web Storageによるテキストデータの保存 【メモ】 ①Webストレージ内はキーとバリューで管理されている Webストレージ内はキーとバリューで管…

【HTML5・javascript】Webストレージを使ってローカルに値を保存・出力する

【今回の紹介】 Webにおいて簡易な情報をローカルに保存するには ①ブラウザに保存する(クッキー) ②外部ファイルへ保存する(XML・jsonとしてはきだす) ③DBしかなく、意外と面倒だと思ってました。 いまさらですが、この①の部分野認識は、HTML5に登場によ…

【HTML5・javascript】ライフゲームより簡単なサンプルを作る②

【今回の紹介】 前回の続き前回の記事:ライフゲームより簡単なサンプルを作る 以下の処理を追加してよりライフゲームっぽくなったので紹介。 ①繰り返し処理を行う関数 ②描画したキャンパスを初期化する処理 【内容】 ①繰り返し処理を行う関数 繰り返し、描画…

【HTML5・javascript】ライフゲームより簡単なサンプルを作る

【今回の紹介】 以下のサイトでHTML5とjavascriptでできるライフゲームに興味を持った。 参考:ライフゲーム 今回は、そのライフゲームで行っている処理のうち、以下のような部分を切り出して サンプルを作ったので紹介。 ①キャンパス内にセルを敷き詰める考…

【HTML5・javascript】HTMLに四角を描く

【今回の紹介】 気晴らしにHTML5の学習を行ったので、そのメモをのせます 【内容】 やったことは HTMLに四角を描く です。 ■手順 ①canvasをタグを配置する ②スクリプトでcanvasタグのobjを取得 ③canvasobjのgetContextで2Dで書くことを設定する ④塗りつぶす…

【javascript】動的にチェックボタンを生成する

【今回の紹介】 この前、はまっていた動的にHTML要素であるチェックボタンを生成するというのが、いったん解決したので 載せとく 【参考ソース】 ■変更前 コンソールで確認するとテキストは入っていることが確認できるが、 画面には表示されない for(var i=0…

【javascirpt】DOMに詳しい方いたら教えてくださーい

以下の 追加したラジオボタンにテキストノードセットする処理 にて、はまってしまいました。コンソールからは要素にテキストが入っていることは、確認できます。 しかし、なぜか画面に表示されません。 もしわかる方がいたら、回避策または解決策を教えてい…

【javascript】jsonの配列から動的にリストを生成する

【今回の紹介】 掲題の通り 【内容】 jsonの配列から動的にリストを生成する ■参考ソース <script> window.onload=function(){ addProblem(); addOption(); } function addOption(){ for(var i=0;i<4;i++){ var add_li=document.createElement('li'); add_li.id='res…

【javascript】Jsonの値を取得し、要素に追加する

【今回の紹介】 掲題の通りです 【内容】 簡単にできました。 添字のところを変数にして動的に要素の内容をかえることができるので これから使っていくのが楽しそうです【参考ソース】 <head> <script type="text/javascript" src="./product.js"></script> </head> <p id='target'>ここに表示</p> <script> window.onload=function(){ //console.log(problem[0].i…

【json入門】jsonの作成と取得・表示

【今回の紹介】 これからの開発でjsonを使いそうなので 最も簡単な入門部分の学習を行った 【内容】 ①jsonの作成②jsonの出力 参考:json参考サイト ■jsonに関するメモ ①XMLにくらべてあつかやすそう ・XMLのようにタグがない分、記述量が減る ・アクセスの仕…

【jQuery入門】既に要素があったら、要素を追加しない

【今回の紹介】 簡単なPGですが、対象の要素がすでにあるなら追加しない作ったので紹介します。 【内容】 ■対象の要素がすでになるなら追加しない 追加する要素が単一かつIDは固定の要素であったため、 javascriptで要素の判定処理を書きました ボタンを押し…

【jQuery入門】プルダウンメニューの土台を作る

【今回の紹介】 Jqueryでプルダウンメニューの土台を作ったので紹介します おそらくこのあとCSSでうまく形を作っていくと思います。 【内容】 プルダウンんメニューとかでよく使いそうなものがあったので実際に使ってみた 【参考情報】 リファレンス jQuery…

【Javascript】document.getElementById(id)を外だしに衝撃を受けた話

【今回の紹介】 以前、要素のイベントを追加したり、プロパティ変更をする場合には jueryを使用した方が ・Code量もへる ・可読性もあがるとかきましたが、シンプルな ・要素のイベントを追加 ・プロパティ変更 についてはjQueryも使っても使わなくてもあま…

【Javascript】HTMLとjavascriptの分離~イベントハンドラの設定方法3パターン~

【今回の内容】 掲題の通り、HTMLとjavascriptの分離について紹介する そもそもなぜHTMLとjavascriptの分離するのかーHTMLとjavascriptの分離が分離されていないと以下のようなことが起こりうる ・関数を変えたいとき、HTMLを変える時、間違いが生じる可能性…

【jQuery入門】Ajaxの技術を使用し、外部ファイルを読み込む

【今回の紹介】 jQueryの学習の中で、Ajaxの学習を行った。 内容的には ・外部ファイルの読み込み ・外部ファイル読み込み後に、処理を行う など 【内容】 ■jQuerytとAjax jQueryを使えばかなり簡単にAjax通信を行えるらしい 参考にしたのは以下のサイト Aja…

【jQuery入門】jQueryありとjQueryなしのソース比較~動的にリスト要素(li)の追加と動的に追加した要素へのイベントの設定・移動など~

【今回の内容】 「以前作成したWebtodoリスト(しょぼい)をjqueryで書き直してみる」 具体的には ①登録:動的にリストの生成 ②変更:生成したリストを移動する ③削除:もしあるステータスに移動したならば次の移動で要素を削除する 全体感想:やはりあきら…

 【jQuery入門】-ドットインストールを参考に−第11回ー第15回−

【今回の紹介】前回からの続きです。。 【jQuery入門】-ドットインストールを参考に−(第6回ー第9回) ■第11回 要素の作成 ■要素の作成方法 要素を作成して変数に入れてから追加する before() →指定要素の前にいれる after() →指定要素の後にいれる prep…

 【jQuery入門】-ドットインストールを参考に−(第6回ー第9回)

【今回の紹介】 前々から気になっていたJqueryの学習を始めました。・作ってすぐ動く ・DOM操作が簡単にできる getElementById getElementById とか書かなくてよいとても楽しいインプットにしたのは有名な以下のサイト まとまっていたのですごくわかやすかっ…

【javascript】オブジェクトの宣言・インスタンスの生成・カプセル化

【今回の内容】 掲題の通りでーす。勉強したことのメモです。 【内容】 ■JavaScriotのオブジェクトについて JavaScriotでもオブジェクトを作成できる ・オブジェクトに値(プロパティ)を持てる ・オブジェクトに振る舞い(メソッド)を持てる ・インスタン…

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }