マガジンのカバー画像

Javascript備忘録

10
運営しているクリエイター

記事一覧

JS勉強記⑩DOM操作の演習

演習『JS勉強記⑦ノードの追加』を改修して、テキストボックスに入力した文字列が最後尾に追加されていく処理。

『ノードの追加』で作成したコードは下記の通り。

function append() { var li = document.createElement('li'); var text = document.createTextNode('追加文字列'); li.appendChild(t

もっとみる

JS勉強記⑨ノードの削除

removeChildメソッドを使って指定した子ノードを削除する。(=親)

例題複数の項目が存在するリストと削除用ボタンを設置。ボタンをクリックする度に一番下の項目から順に削除される。
①HTMLでリスト、ボタンを設置。bodyは以下の通り。

<body> <ul id="lists"> <li>あか</li> <li>みどり</li> <li>きいろ</li>

もっとみる

JS勉強記⑧ノードの置き換え

HTML既に存在するノード(要素/タグ、テキスト)をJSを使って新しいノードに置き換える処理。

例題HTMLで「古い要素です」という項目のリスト・「置換」ボタンを配置。ボタンをクリックするとリストの項目の内容が新しいものに置き換えられる。
①HTMLで上記のリスト・ボタンを配置。bodyは以下の通り。

<body> <ul> <li id="oldList">古い要素です</li

もっとみる

JS勉強記⑦ノードを追加

HTMLにJSを使ってノード(新しい要素/タグ、テキスト)を組み込む処理。

例題HTMLで空のリスト・ボタンを配置。ボタンをクリックするとリストの項目が追加される。
①HTMLで空のリスト・ボタンを配置。bodyは以下の通り。

<body> <ul id="lists"> </ul> <input type="button" value="追加" onclick="append(

もっとみる

JS勉強記⑥getElementsByメソッド

タグ名をキーに要素を取得指定したHTMLタグ名をキーに要素を取得する。基本構文は以下の通り。

document.getElementsByTagName('タグ名');

※指定したタグ名が存在しない場合は空のHTMLCollection([])を返す。nullではない!
※HTMLCollectionとは配列に似たデータのこと。詳しくは後述。

例題複数の要素とボタンを配置。タグ名がdivの要

もっとみる

JS勉強記⑤DOMとは/idをキーに要素を取得

DOMとはDOM(Document Object Model)とは「JSで記述されたプログラムからHTML/XMLにアクセスしてWebページを動的に操作する」方法。DOMツリーとはHTML/XMLをツリー構造で表現したもの。<body>タグの下に<h>タグがある、という形を指す。この時の各オブジェクト(<body>、<h>等)のことをノードと言う。

「ブラウザオブジェクト」という階層構造の中の「

もっとみる

JS勉強記④関数

JavaScriptにおける関数とはタスクや値の計算を実行する一連の処理。入力値に基づいて決まった処理を実施し、その結果を返す。

標準関数はJSで予め用意されている関数。ユーザー定義関数は自分で定義した関数。関数の定義方法は以下の3種類。

function命令function getRectangle(height, width){ return height * width; } conso

もっとみる

JS勉強記②繰り返し処理

forfor (var i = 1; i <= 3; i++){ console.log(i) }

変数iの値を1から3まで出力。

iの初期条件(i=1からスタート)、iの条件(i <= 3)、iに1をインクリメント(i+1)。

その結果をコンソールに出力し続ける。i=4になった時点で処理中止。

whilevar j = 1; while (j <= 3) { console.log(j)

もっとみる

JS勉強記③配列

配列値に順序を付けて格納する。格納した値のことを「要素」、要素の順番(位置)を「index」と呼ぶ。

var colors = ['Red', 'Green', 'Blue'];console.log(colors[1]);

この場合、要素は「'Red'」「 'Green'」「 'Blue'」を指す。各要素のindexは前から「0」「1」「2」となる。要素が「3」ある場合は、indexの最大値

もっとみる

JS勉強記①条件分岐・インクリメントと演算子

if / else if

var x = 100; if (x >= 100) { console.log('100以上の値です'); } else { console.log('100未満の値です'); } var y = 80;  if (y >= 90) {  console.log('A'); } else if (y >= 80) {  console.log

もっとみる