求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

JavaScript

ローカルサーバーの構築

PHP実行環境の構築 Windows(XAMPP) Mac(MAMP) XAMPPのダウンロード(Windows) XAMPP最新バージョン 7.1.7 PC環境によっては、下位バージョンを使用します インストール インストーラーに従ってインストールする 最低限必要なものだけを選択する Cドライ…

ボタンイベント

ボタンのクリック処理 ボタンがクリックされたときの処理を、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>…

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

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

ノードを追加・削除する

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

DOMとは

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

ボタンイベント

ボタンのクリック処理 ボタンがクリックされたときの処理を、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>…

DOMイベントリスナー

HTML要素の属性として指定する問題点 1つのイベントに対して複数の関数を設定しようとすると煩雑になる 以下のように、funcA、funcBを順に実行することで対処するしかありません。 <button onclick="funcA(); funcB();">ボタン</button> DOMイベントリスナー 1つのイベントに複数の関数を指定できる 「DO…

JavaScriptの書き方 - 実践(1)

JavaScriptの書き方 変数 innerHTML for文 Dateオブジェクト 変数宣言 プログラムの中で一度だけ初期化を行う場合 <script> var ans = 0; </script> 複数の場所で、そのつど初期化が必要な場合 <script> var ans; ans = 0; </script> forで使うループ変数は、for文の中で宣言することも可能 <script> fo</script>…

★ オブジェクトと配列

オブジェクト JavaScriptは、オブジェクト指向の概念を取り入れた言語です JavaScriptのオブジェクトには、プロパティと呼ばれる属性と処理を行うメソッドがあります JavaScriptの値は、「プリミティブ型」と「オブジェクト型」の2種類に大別されます プロ…

★ 変数のスコープ

変数のスコープ 変数の使える範囲 関数内で定義された変数は、関数内の一番上で定義されたものとして処理されます グローバル変数 関数の外部で宣言した変数 プログラム全体で利用できます グローバル汚染の悪影響 グローバル空間を特に理由のない変数定義で…

★ 関数と制御文

関数(function) JavaScriptは、関数型プログラミング言語とも呼ばれます function 関数名() { 処理内容; } function 関数名(引数1, 引数2, ...) { 処理内容; return 戻り値; } この場合、変数 x と y は上書きされています 関数の実行 関数が呼び出されて…

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

イベントハンドラの設定

HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されています イベント…

DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びます ノードを取得…

配列

配列とは リストのこと いくつかの情報を番号と一緒に保管するためのもの 「配列」とは、添字(そえじ)と呼ばれる番号を用いて、1つの変数名で複数のデータをまとめて管理できるようにしたもの 配列 - マンガで分かる JavaScriptプログラミング講座 配列は…

random関数

乱数の発生 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド ランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…

Math関数を使った計算

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

Dateオブジェクト - 状況に応じた処理

Dateオブジェクト JavaScriptに用意されている組み込みオブジェクト Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される JavaScript の日時は、UTC の 1970 年 1 月 1 日 0 時からのミリ秒としてで計られ…

配列の基礎

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

for文 演習課題

演習課題 変数を入れてconsoleに表示 入力された値を取得して、ブラウザに表示 和暦(平成)と西暦の変換表 平成1年は、西暦1989年 <html lang="ja"> <head> <meta charset="utf-8"> <title>和暦・西暦の変換表</title> <style> table { width: 200px; margin: 50px auto; border: 1px solid #AAA; border-collapse: collapse;</meta></head></html>…

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

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

条件分岐 - switch文

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

if文 演習課題

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

条件分岐 - if文

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

変数のスコープ

スコープとは 変数には、スコープ(有効範囲)が設定されています スコープは、その変数がスクリプト中のどこからどこまでの範囲で利用できるかを表します 《JavaScriptのスコープ》種類 説明 対象 グローバル スコープ スクリプト全体で変数を参照できる ・…

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

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

DOM とは

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

演算子

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

ブラウザに文字を表示(出力)

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

変数とは

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

求職者支援訓練 フェリカテクニカルアカデミー