うすときね

書いて描きます。関西人。 今年からTrailblazerになり、たまにJSを勉強してい…

うすときね

書いて描きます。関西人。 今年からTrailblazerになり、たまにJSを勉強している会社員、既婚者です。

JS勉強記⑩DOM操作の演習

演習『JS勉強記⑦ノードの追加』を改修して、テキストボックスに入力した文字列が最後尾に追加されていく処理。 『ノードの追加』で作成したコードは下記の通り。 function append() { var li = document.createElement('li'); var text = document.createTextNode('追加文字列'); li.appendChild(text); lists.appendChild(li);} これを改修して下記

うすときね

    • JS勉強記⑨ノードの削除

      removeChildメソッドを使って指定した子ノードを削除する。（＝親） 例題複数の項目が存在するリストと削除用ボタンを設置。ボタンをクリックする度に一番下の項目から順に削除される。 ①HTMLでリスト、ボタンを設置。bodyは以下の通り。 <body> <ul id="lists"> <li>あか</li> <li>みどり</li> <li>きいろ</li> <li>あお</li> <li>だいだい</li> </ul>

      うすときね

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

        HTML既に存在するノード（要素／タグ、テキスト）をJSを使って新しいノードに置き換える処理。 例題HTMLで「古い要素です」という項目のリスト・「置換」ボタンを配置。ボタンをクリックするとリストの項目の内容が新しいものに置き換えられる。 ①HTMLで上記のリスト・ボタンを配置。bodyは以下の通り。 <body> <ul> <li id="oldList">古い要素です</li> </ul> <input type="button" value="

        うすときね

        • デヴィッド・ボウイの死によせて

          FBに非公開にしていた文章ですが、気に入っているのでこちらに掲載します。当時大学生でした。 ---------------------------------------------------------------------------------- 　ボウイへの入り口はたくさんあった。 　音楽的な経路で一番印象的だったのは、イエローモンキーを好きになって、ジギー時代のボウイとミック・ロンソンを知ったことだと思う。他にも、バクチク→デルジベットという経路や、ラルク→

          うすときね

        JS勉強記⑩DOM操作の演習

        うすときね

        マガジン

        • Javascript備忘録
          10本
        • エッセイ
          1本

        記事

          JS勉強記⑦ノードを追加

          HTMLにJSを使ってノード（新しい要素／タグ、テキスト）を組み込む処理。 例題HTMLで空のリスト・ボタンを配置。ボタンをクリックするとリストの項目が追加される。 ①HTMLで空のリスト・ボタンを配置。bodyは以下の通り。 <body> <ul id="lists"> </ul> <input type="button" value="追加" onclick="append()"> <script src="js/append_child.js"><

          うすときね

          JS勉強記⑦ノードを追加

          うすときね

          JS勉強記⑥getElementsByメソッド

          タグ名をキーに要素を取得指定したHTMLタグ名をキーに要素を取得する。基本構文は以下の通り。 document.getElementsByTagName('タグ名'); ※指定したタグ名が存在しない場合は空のHTMLCollection([])を返す。nullではない！ ※HTMLCollectionとは配列に似たデータのこと。詳しくは後述。 例題複数の要素とボタンを配置。タグ名がdivの要素を取得し、その内容をコンソールに出力する。HTMLのbodyは下記の通り。

          うすときね

          JS勉強記⑥getElementsByメソッド

          うすときね

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

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

          うすときね

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

          うすときね

          JS勉強記④関数

          JavaScriptにおける関数とはタスクや値の計算を実行する一連の処理。入力値に基づいて決まった処理を実施し、その結果を返す。 標準関数はJSで予め用意されている関数。ユーザー定義関数は自分で定義した関数。関数の定義方法は以下の3種類。 function命令function getRectangle(height, width){ return height * width; } console.log(getRectangle(3, 5)); 四角形の面積の求め方を

          うすときね

          JS勉強記④関数

          うすときね

          JS勉強記③配列

          配列値に順序を付けて格納する。格納した値のことを「要素」、要素の順番（位置）を「index」と呼ぶ。 var colors = ['Red', 'Green', 'Blue'];console.log(colors[1]); この場合、要素は「'Red'」「 'Green'」「 'Blue'」を指す。各要素のindexは前から「0」「1」「2」となる。要素が「3」ある場合は、indexの最大値は「2」となる。 コンソールに出力されるのは、↑の場合は2番目の要素「'Gre

          うすときね

          JS勉強記③配列

          うすときね

          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); j++;} 変数jの値を1から3まで出力。 j=1を宣言。「jの値が3以

          うすときね

          JS勉強記②繰り返し処理

          うすときね

          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('B'); } else if (y >= 60) { console.

          うすときね

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

          うすときね