求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

JavaScript

タイマーを使って一定時間ごとに動かす

要素を動かす クリックイベントにより、X座標・Y座標の値を変更する <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を動かす</title> <style> .box { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: #8EDED4; text-align: center; line-height: 100px; } </style> </head> <body> </body></html>

ボタンイベント

ボタンのクリック処理 ボタンがクリックされたときの処理を、DOMイベントリスナーで記述する <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMイベントリスナー</title> </head> <body> <h1>ボタンクリックイベントの例</h1> <button id="mybtn">クリックしてね</button> <script> function btnclick() { alert('クリックされました'); } window.addEventListener('load',</body></html>…

イベントとイベントハンドラ

イベントとは developer.mozilla.org ブラウザー上でユーザーが行う様々な動作のこと マウスをクリック マウスをダブルクリック マウスのポインターの移動 マウスのボタンを押す マウスのボタンを放す など イベントハンドラ (event handler)とは イベントの…

繰り返し - for文

繰り返しの基本 テキスト P.064 ルール処理 繰り返しの回数が決まっている(for文) 繰り返しの回数が決まっていない(while文) for文 「i」は、カウンター変数のカウンター処理の回数(数値として扱う) <script> for (var i = 1; i <= 5; i++) { console.log( i +</script>…

配列

配列 テキスト P.029 配列の中の値に振られる番号は、「1」からではなく「0」からです 配列からデータを取得する テキスト P.031 配列の添字(インデクス) 以下の配列の中から「月」を、consoleに表示させなさい var action = ['日', '月', '火', '水', '木…

条件分岐 - if文とswitch文

条件分岐の概要 テキスト P.042 if文の基本的な構造 テキスト P.044 比較演算子 テキスト P.046 複数条件の組み合わせ テキスト P.048 論理演算子 テキスト P.054 switch文 テキスト P.057 《きょうの月数と季節を求めるプログラム》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>きょうの月数と季節</title></meta></head></html>…

DOM とは

DOM(Document Object Model) JavaScriptでWebページを扱う仕組み WebブラウザがHTMLを読み込むと、レンダリングエンジンという機能が解釈してWebページを表示します Webページの中の各部品を「要素(element)」といい、この要素をJavaScriptで操作します …

演算子とは

式(expression) JavaScriptの式の多くは、 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算…

変数を使った記述

変数を使った記述 変数を使って処理を実行(出力) Consoleで記述 連結演算子 文字列通しを「+」で連結します 連結のどちらかに数値が含まれ場合も、結果かは文字列になります 「+」のときのみで、それ以外は文字列の数字も数値として計算されます ;(セミコ…

変数とは

変数 変化するもの(値が変化する器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り返し使う言葉は「…

JavaScriptの記述とコンソールへ出力

書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲…

JavaScriptを学ぶ準備

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間 JavaScript 「ジャヴァ」ではなく、「ジャバスクリプト」です 「Java(ジャヴァ)」は、別の言語なので間違わないようにし…

スクロールエフェクト - ScrollRevealとScrollTrigger

ScrollReveal scrollrevealjs.org 参照 www.webprofessional.jp 実践 スクロールすると、「桜餅(道明寺)」が「下から」「左から」「右から」出てくるように記述しましょう 写真素材は、フリーで <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ScrollRevealのデモ</title> </meta></meta></head></html>

タイマーを使って一定時間ごとに動かす

要素を動かす クリックイベントにより、X座標・Y座標の値を変更する <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を動かす</title> <style> .box { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: #8EDED4; text-align: center; line-height: 100px; } </style> </head> <body> </body></html>

JavaScriptを外部参照化する

JavaScriptを外部参照化する 「script.js」ファイルにまとめる 「今日の日付」と「今日の運勢」は、タブをクリックするたびに更新されるはおかしいので、読み込まれたときに1回だけ変わることとします <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

タイマー処理

タイマーを使って一定時間ごとに動かす タイマーを使う setTimeout関数(一定時間後に、指定した処理を1回実行します) setInterval関数(一定時間ごとに、指定した処理を繰り返し実行します、やめるときには、clearInterval関数を実行します) <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を</title></meta></head></html>…

イベント

イベントの概要

DOMの操作で要素の追加と削除をおこなう

DOM操作でCSSの変更をおこなう

DOM操作でHTMLを書き換える

MathオブジェクトとDateオブジェクト

組み込みオブジェクト

オブジェクト

オブジェクトの概要

変数の有効範囲

関数

関数の概要

while文を使ってプログラムを作る

繰り返し - while文

while文 テキスト P.74 条件が合致するまで繰り返し処理を行う 「result」が合計「100」を超えた段階で、ループ処理を停止します <script> //足していく整数を設定 var i = 1; //足し算をした結果を設定 var result = 0; while (result < 100) { console.log(result)</script>…

for文の復習・Math.random()

for文の復習 曜日を表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>for文の練習 - 配列</title> </head> <body> <h2 id="ans">ここに表示</h2> <p></p> <script> var today = new Date(); var day = today.getDay(); var weekJa = ['日','月','火','水','木','金','土']; var weekImg = ['sunday','monday','tuesday','w…</body></html>

3種類のダイアログボックスとファイル管理

ダイアログボックスの種類と使い方 テキスト P.032 alert 「ようこそJavaScriptの世界へ」とダイアログボックスに表示させなさい confirm 「JavaScriptは楽しいですか?」とダイアログボックスに表示させなさい prompt 「JavaScriptは楽しいですか?」とダイ…