-
JavaScriptでブラウザに結果を保存してみよう！（localStorage ）
完成イメージ 作成ファイル・保存場所 js-domフォルダに以下のファイルを作成してください。 ファイル名内容js-dom11.html基本動作練習用HTML/jsjs-dom__11.htmlステップアップ練習用HTML/js JavaScriptは <script> タグ内に直接記述して... -
JavaScriptでAPI：外部データを取得してみよう！（ API async await）
完成イメージ 郵便番号を入力し、住所検索ボタンをクリックしたら都道府県・市区・町域が自動で取得できるAPIを作成してみよう APIで犬の画像をランダムに取得し、ボタンをクリックしたら再度、新しい画像を読み込む 作成ファイル・保存場所 js-domフォル... -
JavaScriptでネストされたJSONを読み取ってみよう！（複雑な構造の読み解き）
完成イメージ（JSON → スライドショーの例） 下記のスライドでは、実際に JSONデータをAPIから取得し、それを使って画像スライドショーを表示する例を紹介しています。画像ファイルを自分で用意する必要はなく、すべてAPIから自動で取得して表示されます。... -
JavaScriptで秒単位での繰り返しsetTimeout / setInterval
完成イメージ ページを開くと、画面いっぱいの色付きの「ローディング画面」が表示されsetTimeout() を使って、1秒後にそれがフェードアウト。本体のコンテンツ（背景やテキスト）が現れるJavaScriptを作成してみましょう 今回のテーマ JavaScriptの setTi... -
JavaScriptでAPI：外部データを取得してみよう！（ API then）
完成イメージ APIを使って、ボタンをクリックするたびに異なる画像をランダムに表示してみましょう。 今回のテーマ JavaScript の fetch() を使って、外部からデータを読み込み、そのデータを画面に表示する方法 目的 fetch() で外部APIにアクセスしてデー... -
JavaScriptで属性を変更してみよう！（setAttribute）
完成イメージ 画像を切り替えるボタンをクリックして、画像を変更してみよう！ 今回のテーマ ボタンをクリックしたら、画像の src（表示する画像ファイル）や、リンクの href（リンク先URL）など、HTMLタグの属性をJavaScriptで書き換える方法を学びます。... -
JavaScriptで新しい要素を追加してみよう！（ToDoリスト風）
完成イメージ input欄に文字を入力し、追加ボタンをクリックしたら、その下に入力した内容が箇条書きで表示される 今回のテーマ createElement() と appendChild() を使って、JavaScriptで新しいリスト項目を作って画面に追加してみましょう。 目的 入力欄... -
JavaScriptの関数 classListで見た目を変えてみよう！
完成イメージ ボタンをクリックしたら指定の場所の文字色が「class」によって変わる 今回のテーマ classList.add() / remove() / toggle() を使って、CSSクラスを切り替える操作を体験してみましょう。 目的 .classList を使って見た目をコントロールでき... -
JavaScriptでフォームの値を取得して表示してみよう！
完成イメージ フォームに入力したら、その入力された値を取得し、指定の場所に出力するようなプログラムを作成してみましょう。 今回のテーマ フォーム（<input> や <select> など）から入力された値を JavaScript で取得し、... -
JavaScriptのイベントリスナー（addEventListener）を使ってみよう！
完成イメージ ボタンをクリックしたら、ボタンの上のメッセージが変化されるようなプログラムを作成してみましょう。 今回のテーマ ユーザーの操作（クリックやマウス操作など）に反応して、画面の表示を変える方法を学びます。その基本となるのが ad... -
JavaScriptでDOMの取得を体験してみよう！
完成イメージ 今回のテーマ JavaScriptの役割の1つは、ページ内のHTML要素を操作することです。そのためには最初に「要素をJavaScript側で取得」しなければなりません。 今回は、DOM要素の取得メソッド（getElementById / getElementsByClassNam... -
JavaScriptとDOM
このJavaScriptとDOM講座では、Webページ上の要素を自由に操作し、動きのあるインタラクティブな表現を作るための実践的な内容を学びます。 まずは、JavaScriptでDOM（Document Object Model）の仕組みを理解し、HTML要素を取得・変更する基本操作を体験し...
1