プログラミング未経験者の学習日記

私が学習した内容のまとめサイトです。

JavaScript

【JavaScript入門】ページ内の要素にイベントを設定する!

何かボタンをクリックする度にページ内の要素を書き換えることができます。 まず、ボタンを配置します。 <button id="add">Click!</button> document.getElementById('add')で button を取得し、 addEventListenerでイベントを割り当てます。addEventListenerは第 1 引数にはイベントの…

【JavaScript入門】DOMを使ってページ内の要素を操作しよう!

DOMとは? ツリー構造について p要素を書き換える 新しく要素を作る ①要素の追加 ②テキストノードの作成 DOMとは? DOM(ドム)とは「Document Object Model」の略です。Document にアクセスするための色々な命令のことです。 ツリー構造について Chrome De…

【JavaScript入門】オブジェクトを使ってみよう!

オブジェクト プロパティ プロパティへのアクセス 値の書き換え オブジェクトのメソッド this 組み込みオブジェクト String オブジェクト 代表的なプロパティ、メソッド length replace substr 文字列リテラル Arrayオブジェクト 代表的なプロパティ、メソッ…

【JavaScript入門】配列を使ってみよう!

配列の宣言 添字 要素の書き換え 2次元配列 配列の宣言 配列とはグループ化されたデータとなります。大括弧でカンマ区切りでデータを書いてあげればOKです。また、数値だけではなく文字列を入れることができます。

【JavaScript入門】 タイマー処理を行ってみよう!

setInterval と setTimeoutとは? setInterval と setTimeoutの構文 setIntervalの使い方(例) setTimeoutの使い方(例) setInterval と setTimeoutの使い分け setTimeout で繰り返し処理をする方法 setInterval と setTimeoutとは? JavaScript では setI…

【JavaScript入門】 関数を使ってみよう!

関数とは? 基本的な構文 関数を呼び出す方法 引数を指定する 「return」とは? ローカル変数 無名関数、匿名関数 即時関数 関数とは? 複数の処理をまとめて名前をつけたもので、プログラミングでは同じような処理を繰り返し書くようになるが、このような場…

【JavaScript入門】promptで入力ダイアログを表示させよう!

promptについて 基本構文 使用例1 使用例2 promptについて JavaScriptには入力ダイアログを表示させるpromptというコードがあります。 基本構文 prompt("表示させたい文字列") 使用例1 var name = prompt("お名前は?"); console.log(name); ※prompt では…

【JavaScript入門】confirmを使って[OK]と[キャンセル]のダイアログを表示させよう!

confirmについて 基本構文 使用例 confirmについて JavaScriptには[OK]と[キャンセル]のダイアログを表示させるconfirmというコードがあります。 基本構文 confirm("表示させたい文字列") 使用例 var answer = confirm("●●してもよいですか?"); console…

【JavaScript入門】alertを使ってアラートメッセージを出してみよう!

alertについて 基本構文 使用例 alertについて JavaScriptには「警告」や「メッセージ」のアラートダイアログを出すalertというコードがあります。 基本構文 alert("表示させたい文字列") 使用例 alert("hello"); ※下記画像のようにHelloと記載されたアラー…

【JavaScript入門】ループ処理(for文)を使ってみよう!

ループ処理(for文) ジャンプ文 (breakとcontinue) ループ処理(for文) for文の構文は下記となります。 for (初期値; 条件式; 増減式) { 繰り返し処理} ・初期値 – はじめに処理をおこなう値・条件式 – 繰り返し処理をおこなうかどうかの判断・増減式 – 処…

【JavaScript入門】ループ処理(while文)

ループ処理(while文) ループ処理(do ... while文) while文とdo ... while文の違い ループ処理(while文) while文の構文は下記となります。条件が「真」である間は「繰り返し処理を続けなさい」という処理となります。 while (条件式) {繰り返し処理} 下…

【JavaScript入門】条件分岐(switch文)

条件分岐(switch文) switch文の補足説明 条件分岐(switch文) switch文の構文は下記となります。 switch (式) { case 値: 処理1 break; case 値: 処理2 break; default: 処理3 switch文の補足説明 ①最初に「式」をチェックし、次に「値」を見ていきま…

【JavaScript入門】条件分岐(if文)

条件分岐 比較演算子 論理演算子 真偽値 条件分岐 if文の構文は下記となります。 if (条件) {真} else {偽} 例えば、scoreが60以上ならOK、それ以外はNGとする場合は下記のような記述となります。 var score = 60;if(score >= 60){console.log("OK");}else{c…

【JavaScript入門】変数、データ型、数値、文字列って何?

変数 データ型 数値 演算子 ①演算子 ②代入を伴う演算子 var x; x = 10 * 2;x = x + 5; console.log(x); var x; x = 10 * 2;x += 5; console.log(x); ③単項演算子 var x; x = 10 * 2;x = x + 1; console.log(x); var x; x = 10 * 2;x ++; console.log(x); 文…

【JavaScript入門】JavaScriptってhtmlのどこに書けばいいの?

JavaScriptを書く場所 外部ファイル(*.js)を参照させる コメント・ルール 実行方法 JavaScriptを書く場所 JavaScriptは<script>タグに書きます。<script>タグは<body>タグの直前に書くのが一般的です。 ●index.html <!DOCTYPE html><html lang="ja"> <head> <meta </script>…

【JavaScript入門】JavaScriptって何?

JavaScriptとは? JavaScriptブラウザに実装されているスクリプト言語で、近年、様々な場所で活躍の場所を広げている言語です。 必要な知識 HTMLとCSSの知識が必要となります。 不明点がある場合は? Mozilla Developer Network(MDN)のリファレンスが一番…