Webサイト制作科 忘筌

求職者支援訓練 Webサイト制作科 10月11日開講クラス補足メモ

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>…

画像置換

PhotoshopCC2018でJavaScriptでの書き出し 「PhotoshopCC2018」→「Presents」→「Scripts」→「Export Layers to Files.jsx」を開いて以下のように修正します レイヤー名をファイル名として書き出し JavaScriptで画像置換 CSSは必要なし! onmouse属性を使った…

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

イベントとは ブラウザー上でユーザーが行う様々な動作のこと マウスをクリック マウスをダブルクリック マウスのポインターの移動 マウスのボタンを押す マウスのボタンを放す など イベントハンドラとは イベントの発生をきっかけにして、何らかの処理を実…

ノードを追加・削除する

ノードを追加する 要素 / テキストノードを作成 createElement / createTextNode ノード動詞を組み立て、ドキュメントに追加 appendChild createElementメソッド 要素を作成する document.createElement( name ) name: 要素名 ノードを作成するためだけのメ…

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button(エレメントノード)をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

DOMの記述に書き換える

ボタンが押されたらブラウザに表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>オブジェクト</title> </head> <body> <h1>表示するプログラム</h1> <p><button onclick="result()"></button></p> <h2 id="ans">ここに表示</h2> <script> function result() { var element=document.getElementById('ans'); var str='結果を表示する文字列'; e…</body></html>

関数の応用

関数の代入と匿名関数 関数は、数値や文字列のように変数に入れて扱うことができます この方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます 変数名 = 定義済みの関数名; 《関…

処理をまとめて名前で呼び出す - 関数の定義

関数(function)とは 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます 関数は「function」キーワードで定義する 関数は処理の材料となる「引…

繰り返しの制御

繰り返しの中のbreak文 switch文でのbreak文は、ブロックの外へ抜けるための構文でした break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜けることができます 《for文とbreak文》 <html lang="ja"> <head> <meta charset="utf-8"> <title>for文とbreak</title></meta></head></html>…

繰り返し - while文

while文とは 反復処理(繰り返し)を行います 同じ事を繰り返すことを「ループ」と呼びます while文は繰り返し回数が決まっていない場合に使われる場合が多い 変数の初期値; while ( 繰り返し条件; ) { 実行される処理 変数の変更 ; } 継続条件式には、if…

条件分岐 - switch文

switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch(変数) { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…

Mathオブジェクトを使った計算

Mathオブジェクト Mathとは「数学(Mathematics)」の意味 数値演算に便利なメソッドやプロパティが利用できるオブジェクト まえもってインスタンスを生成する必要はありません スタティックメソッド(インスタンスを生成しないで関数のように使用できる) M…

配列の添字を活用する

曜日を日本語で表示する 曜日の文字列は、「days配列」に格納しておきます <script> var week = ['日', '月' ,'火', '水', '木', '金', '土']; </script> この場合、getDayメソッドの戻り値は、日曜日を「0」土曜日を「6」とする「0~6」の間の数値になります。 戻り値の数値…

組み込みオブジェクト - Date()

組み込みオブジェクトとは 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧》 オブジェクト名説明 Objectすべてのオブジェクトの元…

配列の書き方・追加と削除

配列とは 配列とは、同じ用途で用いる複数の変数を1つにまとめたもの 配列は要素の集合体 配列は変数の集まりによって構成されます 個々の変数のことを「要素」と呼びます 各要素を識別するために「インデックス」と呼ばれる番号(0から始まる整数値)が割…

for文 演習課題

演習課題 変数を入れてconsoleに表示 入力された値を取得して、ブラウザに表示 画像をfor文で表示 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>画像をfor文で表示</title> </head> <body> <script> document.write('<p>'); for (var i=1; i<=3; i++) { document.write('</p></body></html>

指定した回数だけ処理を繰り返す - for文

for文 指定した回数だけ処理を繰り返す 変数「i」の初期値(「i」は、indexの意) 処理を1回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理 } 変数の値を1ずつ増やす演算子 「+…

if文 演習課題

奇数・偶数の判別プログラム 奇数とは? 偶数とは? 剰余算を利用する(2で割った余りの値により判別可能) 消費税合算後の支払金額を求めるプログラム 消費税率 8%だった場合 購入単価・購入個数を閲覧者が入力する 全角と0は計算できないものとする ボタ…

条件分岐 - if文

**ifで枝分かれ ユーザーが入力したパスワードが正しかったらこの処理をさせ、間違っていたらこの処理をさせたいなど、ある判定の結果によって処理を枝分かれを作るときに「if」を使います if(判定したいこと) { 判定結果が正しいときにやりたい処理;判定結…

DOMの記述演習

DOMの記述演習 document.write()のようにページを全面書き換えをしないで、「id名」の部分だけ上書きをする <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMの記述演習</title> </head> <body> <h1>ページが読み込まれた時点で書き換える</h1> <h2 id="result">ここに結果を表示する。</h2> <script> document.getElementById('result').textContent = '内容が書</body></html>…

DOM とは

ダイナミックHTML JavaScript のようなクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」 といいます 「JavaScript」 から HTML の内容を制御する事ができるので、HTML が動的に変化するインタラクティブなコ…

変数を使った記述

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

演算子とは

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

変数とは

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

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

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

JavaScriptを入力する準備

事前準備 テキストエディター(Adobe Brackets、VS Code) ブラウザー(Google Chrome) Visual Studio Codeインストール 設定の変更 1. エディタとしての基本機能を改善 2. コードを書きやすくするプラグインの導入 3. 作成したHTML・JavaScriptのプレビュ…

JavaScriptを学ぶ準備

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