diadia

興味があることをやってみる。自分のメモを残しておきます。

Javascript

配列

ベース記事 Javascriptメモ 種類 配列 連想配列 疑問点 配列って何か?連想配列って何?なんのためにある概念?それができると何ができるようになるの? それができると何ができるようになるの? 配列と連想配列を使うと、複数のデータ集合を扱うことができ…

addEventListenerの使い方

関連記事イベントとイベントハンドラの設定 addEventListenerの使い方意義としてはonclick等は一つのイベントに一つのイベントハンドラしか設置できない。一つのイベントに複数のイベントハンドラを設置するときにに役に立つ。サンプル使用例 <html lang="utf-8"> <head> <meta charset="utf-8"> <title>ボタンクリ</title></meta></head></html>…

loadについて

ほか関連記事DOM操作について イベントとイベントハンドラ 本題loadはイベントの一つ。関連付けられた要素を読み終わったときに発生するイベント。 loadの有用性DOM操作をすると実行タイミングがずれることでエラーになることがある。この解消に2つの方法が…

イベントとイベントハンドラの設定

ベース記事Javascriptメモ loadについて イベントとイベントハンドラの設定方法の種類2種類ある。 開始タグ内に両者を設置する方法 スクリプト内に両者を設置する方法(プロパティとして扱う) 1.開始タグ内に両者を設置する方法 <html lang="utf-8"> <head> <meta charset="utf-8"> <title>イベントとイベントハ</title></meta></head></html>…

ユーザの入力値をブラウザ表示する[DOM操作]

ベース記事Javascriptメモ DOM操作について ユーザの入力値をブラウザ表示する[DOM操作] <html lang="utf-8"> <head> <meta charset="utf-8"> <title>フォーム内容をリストに反映</title> </head> <body> <label for="lists">リスト</label><br> <ul id="lists"> <li>リストがここに追加される</li> </ul> <input id="content" type="text" > </body></html>

Nodeを置換する

ベース記事Javascriptメモ DOM操作について Nodeを置換する方法replaceChild()を使うと置換することができる。 大まかに言えばappendChild()を使ってノードを追加する方法とほぼ同じ。 違うところは、replaceChild()をの引数は2つあり、newNode, oldNodeの…

ノードを追加する

ベース記事DOM操作について Javascriptメモ ノードを追加するやり方やりたいイメージ:例えばカラの <ul></ul>があるとする。ここにリストタグを追加するということをやりたい。リストタグはエレメントというノードの一つである。 だからノードを操作するコードが分か…

tagをキーに要素を取得する

ベースJavascriptメモ DOM操作について 基本的な使い方idをキーにする場合にはgetElementById()を使っていたけど、tagをキーにする場合は少し違う。ただほぼ同じ。getElementsByTagNameを使う。elementsでsが必要なこと、Nameを加えることに注意して記述した…

DOM操作について

idをキーに要素を取得する tagをキーに要素を取得する ノードを追加する Nodeを置換する loadについて サンプル:ユーザの入力値をブラウザ表示する

idをキーに要素を取得する

ベース記事DOM操作について Javascriptメモ 本題 例文 <p id="test">この要素を取得したい</p> <input type="button" onclick="print();"> <script> function print(){ var ele = document.getElementById("test"); console.log(ele); console.log(ele.innerText); } </script> まず最初にonclickってのがあるけど、これはhtmlのものなの…

セミコロンについて

ベース記事Javascriptメモ 一体どんなときに必要なのか?javascriptを勉強していると;を文末に書くことが度々ある。 これは必ず文末で必要となるわけでもないらしい。 頭がごちゃごちゃするルール(仮説)原則として文の終わりにセミコロンを付す。 例外は制…

条件分岐

ベース記事Javascriptメモ 種類 if/else if/else switch if/else if/else構文 if(条件式){ 条件式がTrueのときの処理 }else if(条件式){ 条件式がTrueのときの処理 }else{ 上記に当てはまらないのときの処理 }if文のみの場合、while文に似ている気がする。条…

繰り返し処理

種類 for文 while文 do while文 for文構文 for (初期化文; ループ継続条件; 増減式){ 繰り返し実行したい処理 }増減式には;を必要としない。書いたらunexpected token ; のエラーが出てしまうので注意。例変数iの値を1から3まで出力するプログラム for (var …

Javascriptメモ

参考url : https://developer.mozilla.org/ja/docs/Web/JavaScript関連記事 繰り返し処理 条件分岐 配列 DOM操作について イベントとイベントハンドラの設定 セミコロンについて toLocalStringメソッド 基本的な使い方使い方はhtml上に直接javascriptを書く…