js1 JavaScript の基礎

できない。 Webページ上のJavaScriptは、ハードディスク上の任意のファイルの読み書きや、それらのコピー、プログラムの実行をすることができません。OSのシステム機能に直接アクセスすることはできません。

基本はできない設計となっているが、 両方のページ にデータ交換を行うための特別なJavaScriptコードを含めれば可能。 また上記を実施しないでも、同一オリジンであれば、可能。 以下抜粋 異なるタブやウィンドウは一般的にお互いについて知りません。時々、例えばあるウィンドウがJavaScriptを利用して別のウィンドウを開くケースはあります。しかし、この場合においても、あるページからのJavaScriptは、別のサイト（異なるドメイン、プロトコル、ポート）からのものである場合は、アクセスすることはできません。 これは “Same Origin Policy” と呼ばれています。回避するためには、 両方のページ にデータ交換を行うための特別なJavaScriptコードを含める必要があります。 この制限もユーザの安全のためです。ユーザが開いた http://anysite.com というサイトのページは、URL http://gmail.com の別のブラウザのタブにアクセスし、そこから情報を盗むことはできません。

同一オリジンポリシーによってアクセスできない。 回避するためには、 両方のページ にデータ交換を行うための特別なJavaScriptコードを含める必要があります。

ブラウザがこのタグを見つけたときに自動的に実行される ボディ読み込んだあとでpタグのあと

src属性を指定する。 現在のページからの相対パスで指定する <script src="/path/to/script.js"></script> 完全なURLも同様に可能 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

最もシンプルなスクリプトだけをHTML内に置きます。より複雑なものは別のファイルに置きます。 例 <script src="file.js"></script> <script> alert(1); </script これはだめ <script src="file.js"> alert(1); // src が設定されているので、このコンテンツは無視されます。 </script>

ダウンロードしたjsファイルはキャッシュ化されるため、他のページで同じjsファイルを利用する際にダウンロードの節約となる。 以下抜粋 ファイル分割のメリットは、ブラウザがダウンロードしてそれをブラウザのキャッシュに保存するためです。 以降、同じスクリプトが必要な他のページは、ダウンロードする代わりにキャッシュから取得します。そのため、ファイルは実際には一度だけダウンロードされます。 これはネットワーク通信量を節約しページをより速くします。

書いてあるやつもあるけどいらない。 スクリプトの言語を type="text/javascript" のような MIMEタイプで指定します。HTML4.01では必須の属性として定義されていましたが、HTML5 では省略時は type="text/javascript" とみなされるようになりました。

一応うごく 勝手にセミコロンつけてくれる。 だけど非推奨

スラッシュ二つか、スラッシュアスタリスクで囲む // この行全体がコメントになります。 alert('Hello'); /* 2つのメッセージを含む例。 これは複数行のコメントです。 */ alert('Hello'); ちなみに ほとんどのエディタでは、コードの行は1行コメントとして Ctrl+/ ホットキーによりコメントアウトすることができます。そして Ctrl+Shift+/ で複数行コメントです(コードの一部を選択し、ホットキーを押します)。

これがスクリプトの先頭に位置する場合、すべてのスクリプトは “最新の” 方法で動作します。 "use strict"; // このコードはモダンな方法で動作します。 ... 常に "use strict" で始まるスクリプトは推奨されます

カンマでくぎれば、letは省略可能 let user = 'John', age = 25, message = 'Hello';

"use strict"; がなければ動くが非推奨である。

const const myBirthday = '18.04.1982';

値の再代入が禁止される。 ※値の変更はできる const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // エラー, 定数の再代入はできません!

大文字の定数は、実行する前から値が変わらないものをハードコートしたもの。 小文字の定数は、 実行中にランタイムで 計算 されますが、代入後は変更されないもの。 const BIRTHDAY = '18.04.1982'; // make uppercase? const age = someCode(BIRTHDAY); // make uppercase

基本はconst letは再代入が想定されるものに利用する。 varは現在の実行コンテキスト(モジュールorグローバル) もしくはレキシカル環境に直ぐロードさせたい場合 または、ブロックスコープの外でもみえるような変数を定義したい場合(非推奨) var で宣言された変数のスコープは、その現在の実行コンテキストとそのクロージャであり、その中で宣言された関数、あるいは関数の外で宣言された変数の場合はグローバルになります

Infinity、 -Infinity、 NaN Infinity は数学的な無限大 ∞ を表します。どの値よりも大きい特別な値です 0除算で得ることができる。 alert( 1 / 0 ); ベタ書きもできる。 alert( Infinity ); NaN は計算上のエラーを表します。 alert( "not a number" / 2 );

BigInt型 末尾の "n" は BigInt を意味します const bigInt = 1234567890123456789012345678901234567890n;

バッククォートを利用した引用符のことで、変数を ${…} の中にラップすることで、変数を埋め込み文字列の中で表現することができる。 let name = "John"; // 変数が埋め込まれた場合 alert( `Hello, ${name}!` ); // Hello, John! // 式が埋め込まれた場合 alert( `the result is ${1 + 2}` ); // 結果は 3

null は “無し”、“空” または “不明な値” と言った意味を持つ特別な値です undefined は値が代入されていないことを示す。宣言されているが値がない変数とか 存在しないプロパティはそうなる。 一般的には、 “空” や “不明な値” と言った用途では null を使い、undefined は変数が割り当てられているか、もしくは似たような確認のために使います。 ちなみにnullはリテラルで、undefined は変数 undefined 変数が上書きされてる懸念ありなので、void 0を使う

typeofを利用する 。 二つのパターンがある。 演算子として: typeof x. 関数スタイル: typeof(x). 例 typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" typeof Math // "object" typeof null // "object" これは 公式に認められたエラーらしい。 typeof alert // "function"

alert("Hello");

promptを使う 戻り値は入力された値、 入力がキャンセルされた場合には null が返却されます。 例 let age = prompt('How old are you?', 100); 第一引数は出力メッセージで、第二引数は任意で、デフォルト値

confirm 関数をつかう。 戻り値はBoolean let isBoss = confirm("Are you the boss?");

ある関数、演算子などで、期待される型でないものが入力された場合、暗黙的に型変換が行われること。

文字列変換は、文字列形式の値が必要なときに発生します。 たとえば、alert(value) は値を表示するためにそれを行います。

String(value) 関数が実行されている。 let value = true; alert(typeof value); // boolean value = String(value); // 今、値は文字列の "true" alert(typeof value); // string

数値変換は数学的関数や表現の中で自動的に起こります。例えば除算などの演算子を使った時で "6" / "2" は数値の3が出力される。

Number(value) let str = "123"; alert(typeof str); // string let num = Number(str); // 数値の 123 になります alert(typeof num); // number

文字列が有効な数値でない場合、このような変換の結果は NaN です。

undefined は　NaN nullは 0 true と false は　1 and 0 string は トリムされて空なら0 数値の文字ならそのまま変換 変換できない文字ならNaN alert( Number(" 123 ") ); // 123 alert( Number("123z") ); // NaN ("z" の読み込みでエラー) alert( Number(true) ); // 1 alert( Number(false) ); // 0

論理演算を行なったときに変換される。

Boolean(value)を利用する。 alert( Boolean(1) ); // true alert( Boolean(0) ); // false alert( Boolean("hello") ); // true alert( Boolean("") ); // false

0, 空文字, null, undefined や NaN のように直感的に “空” の値は false それ以外はtrue

0の文字列はtrue ちなみに 数値ならfalseになる。 スペースはtrue 空文字はfalse

文字列の’12’が出力される。 +演算子は足し算か文字列結合が判別できないので、文字列がある場合は、文字列結合として判断が優先されるため、型変換が行われる。 ちなみに+以外は数値に変換されて計算される。 alert( 6 - '2' ); // 4, '2' を数値に変換します alert( '6' / '2' ); // 3, 両方のオペランドを数値に変換します

左側から計算されるため、2たす2はそのまま足し算で計算され、1は文字結合される。 41 122になる。

+は単項演算子で、かける1するのと全く同じ意味。 つまり、trueは数値変換が行われ1になる。 つまりNumber(...) と同じですが、より短い表現です 以下のような書き方ができる。 // 二項演算子プラスの処理の前に、両方の値が数値に変換されます alert( +apples + +oranges ); // 5 // 長い書き方 // alert( Number(apples) + Number(oranges) ); // 5

演算子として扱われている。 JavaScript のすべての演算子は値を返却します。これは + や - では明らかですが、= の場合にも当てはまります。 x = value の呼び出しでは、value を x に書き込み、その値を返却します。

代入演算子ということで、 計算の途中で代入することができる。 以下の例では、計算の途中でaに代入している。 let a = 1; let b = 2; let c = 3 - (a = b + 1); b(2)と1を計算した後、aに格納、その後3-a(3)を行う。ということ。 他に代入をチェーンすることができる。 let a, b, c; a = b = c = 2 + 2; 2+2を行なってcに入れてそれをbに入れて。。みたいな感じ、なのでみんな4が入る。 ただ可読性がわるいので非推奨とのこと

counterの結果は、前置式と後置式どちらも違いはないが、 前置式を利用してそれを出力する際は、先に計算(プラス1)してから出力 let counter = 0; alert( ++counter ); // 1 alert( counter ); // 1 後置式を利用してそれを出力する際は、出力後に計算する let counter = 0; alert( counter++ ); // 0 alert( counter ); // 1 以下のような例は可読性が悪くなるので禁止 let counter = 1; alert( 2 * ++counter ); // 4 let counter = 1; alert( 2 * counter++ ); // 2, counter++ は "古い" 値を返すからです

AND ( & ) OR ( | ) XOR ( ^ ) NOT ( ~ ) LEFT SHIFT ( << ) RIGHT SHIFT ( >> ) ZERO-FILL RIGHT SHIFT ( >>> )

カンマ演算子を使うと複数の式を評価できます。それらの式はカンマ ',' で区切られています。それぞれが評価されますが、最後の結果のみが返却されます。 つまり結果は3+4の結果である7となる 1 + 2 の結果はどこかへ捨てられる。

1行で複数のアクションを書くことができる。 // 1行に3つの演算子 for (a = 1, b = 3, c = a * b; a < 10; a++) { ... } 補足 z = (x = 4, y = 8, y += x); console.log(z); >> 12 一番右のオペランドをかえす！ カンマ演算子は for 文の初期化式や変化式で複数の式を記述する場合に主に使用します。 for (let i = 1, j = 4; i < 5; i++, j--){ console.log("i = " + i + ", j = " + j); } Iもjもインクリメント、デクリメントを実行させている。(複数アクション！

" -9 " + 5 = " -9 5" " -9 " - 5 = -14 null + 1 = 1 undefined + 1 = NaN " \t \n" - 2 = -2 ↑について 文字列の先頭/末尾のスペースは、文字列が数値に変換される際に削除されます。ここでは文字列全体が \t や \n、“通常” のスペース文字から構成されています。したがって、空文字列のときと同様、0 になります。

数値に変換されて評価される ちなみに、等価演算子の場合は数値優先で変換を行う 型が合わせれない場合はfalseとする

2は数値に変換され、true 01は数値に変換され、true ※数値は読めるなら変換可能

falseは数値だと0なのでtrue 空文字は数値だと0なのでtrue

===で厳密な判断 alert( 0 === false );// false

trueである。 nullやundifinedは等価の場合、数値に変換されず、この二つは等価としてシステムが判断している。 等価演算子の説明 両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り true を返します。 一方のオペランドが null で、もう一方が undefined であった場合は true を返します。 オペランドの型が異なる場合は、比較前に同じ型に変換を試みます。 数値と文字列を比較する場合、文字列を数値に変換しようとします。 一方のオペランドが論理値である場合、その論理値のオペランドが true である場合は 1 に、 false である場合は +0 に変換します。 オペランドのうちの一方がオブジェクトで、もう一方が数値または文字列である場合は、そのオブジェクトの valueOf() および toString() メソッドを使用してプリミティブに変換を試みます。 nullやundefined は変換しません。

比較の場合は、nullは数値に変換されるが、等価は変換されないので、 1はfalse 2もfalse 3はtrue nullと0は等価でない！！

undefined も比較の場合は数値に変換される→NaNなのでそれが絡むとFalseとされる。 等価は変換されない。 なので全部false

厳密な等価 === 以外の比較演算子については、例外的な注意を払って undefined/null の比較を行ってください。 → undefined/null がくることもテストパターンの想定とすること。 本当に正しい場合でない限り、null/undefined かもしれない変数に対して比較 >= > < <= は使ってはいけません。変数がこのような値を持つ可能性がある場合は、それらを別々にチェックしてください →比較パターンで、nullやundefinedが起こりうるなら、条件を増やして別々のチェックを行うこと！ 等価はnullやundefined がきたら変換しないのでもう一方のオペランドがちがうものならfalseになる 比較は数値に変換さるので、 nullの場合は0、undefinedの場合はNanになることを意識する if(3>null)なら0扱いなのでtrue if(3>undefined)ならNANになるので強制false←これは考慮すべき

どれも文字列同士の比較なので変換等はない。 文字列の比較は辞書順なので false true となる

できる。が可読性が悪いため非推奨 if (year == 2015) alert( 'You are right!' );

単純にtrueだった場合は右の結果を出力し、falseなら次の分岐へみたいな感じ。 if (age < 3) { message = 'Hi, baby!'; } else if (a < 18) { message = 'Hello!'; } else if (age < 100) { message = 'Greetings!'; } else { message = 'What an unusual age!'; } これの糖衣構文

短絡評価を行う。 つまり、最初のtrueを探す処理！ 左から右にオペランドを評価します。 それぞれのオペランドで、それを Boolean に変換します。もしも結果が true であれば、停止しオペランドの本来の値を返します。 もしもすべての他のオペランドが評価された場合(i.e. すべて 偽 のとき), 最後のオペランドを返します。

1 真の値がかえる 0 全て偽なら最後の値がかえる

SuperCoderがかえる

trueがかえり、短絡評価なのでアラートは実施されない 条件の左側が false のときにだけコマンドを実行するためにこの特徴を利用する人もいます。 でも非推奨！

短絡評価で、最初のfalseを見つける処理 falseの値を返しなければ最後の値をかえす 左から右にオペランドを評価します。 それぞれのオペランドで、それを Boolean に変換します。もしも結果が false の場合、ストップしそのオペランドの本来の値を返します。 もしもすべての他のオペランドが評価された場合(i.e. すべて 真 のとき), 最後のオペランドを返します。

let x = 1; (x > 0) && alert( 'Greater than zero!' ); みたいにifの代わりにつかわない ||はないなら次の処理 &&はあるなら次の処理　みたいなかんじ 以下と同様 let x = 1; if (x > 0) alert( 'Greater than zero!' );

Booleanに変換され、逆の値がかえる alert( !0 ); // true

値を単に真偽値型に変換するために使われることがあります: alert( !!null ); はfalse alert( !!"non-empty string" ); // true

組み込みのBoolean関数を利用する alert( Boolean("non-empty string") ); // true alert( Boolean(null) ); // false

アラートは何も返さない。つまりundefinedがかえる。 1が表示され、2がtrueなので2が表示されておわり。

1とundefined

if (!(age >= 14 && age <= 90)) 前にNOTつけるとドモルガンの法則利用しなくてもよい if (age < 14 || age > 90)

&&が優先されるので　-1 && 1は1 null || 1は1なのでtrue よって表示される

NULL合体演算子は２つの疑問符 ?? で記述されます これは null と undefined を同じように扱う 2つのオペランドのうちから、最初の “定義済み” の値を取得することができる。 a ?? b の結果は: a が (null あるいは undefined )でなければ a, それ以外の場合は b aが定義済みで有効な値(null undefined以外)であればa ちがったらb

|| は false, 0, 空文字 ""も含まれてしまう。 上記を省いてnullとundefined だけをチェックしたい場合は??がよい falseや0も判定されるのは確かに微妙

100 0

オペランドはi だけとしている。 0になるとfalseになるため。 ブロックがない。

つかえる let i = 0; do { alert( i ); i++; } while (i < 3);

begin ループに入ると1度実行されます。 condition すべてのループのイテレーションの前にチェックされます。条件が偽の場合、ループを停止します。 step 各イテレーションで、条件チェックの前に本体の後に実行されます。 つまり、begin を1度実行し、その後、各 condition の評価の後、body と step が実行されるという繰り返しになります

let i = 0; for (i = 0; i < 3; i++) { // 既存の変数を使用 alert(i); // 0, 1, 2 } インライン変数宣言 for (let i = 0; i < 3; i++) { alert(i); // 0, 1, 2 } begin 省略する let i = 0; // すでに i を宣言し代入済み for (; i < 3; i++) { // "begin" 不要 stepの省略 let i = 0; for (; i < 3;) { alert( i++ ); }

ラベル は、ループの前のコロンがついた識別子です ループ前以外には使用しない！！ labelName: for (...) { ... } break labelname;で 一度に複数のネストしたループから抜け出すことが必要となる場合に利用される 例 outer: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { let input = prompt(`Value at coords (${i},${j})`, ''); // 文字から文字またはキャンセルされた場合、両方のループから抜ける if (!input) break outer; // (*) // 値に何かをする処理... } } alert('Done!');

continue ディレクティブもラベルと一緒に使うことができます。このケースでは、実行はラベル付けされたループの次のイテレーションにジャンプします。 つまり、内側ではなく外側のループの次の実行にいくということ！

厳密は等価判断が行われる if (x === 'value1')

caseはグルーピングできる let a = 2 + 2; switch (a) { case 4: alert('Right!'); break; case 3: // (*) 2つのケースをグループ化 case 5: alert('Wrong!'); alert("Why don't you take a math class?"); break; default: alert('The result is strange. Really.'); } ケースを “グループ化” する機能は、break がない場合の switch/case の動作の副作用です。ここで case 3 の実行は、break がないので (*) の行から始まり、case 5 を通り抜けます。

呼び出し可能 fromには値がコピーされてはいる。 textにはundefinedが入る

デフォルト値は以下のように定義する。 関数をデフォルト値として指定もできる！ function showMessage(from, text = anotherFunction()) { // anotherFunction() はテキストが与えられなかった場合にのみ実行されます // その結果がtextの値になります } つまり、 片方しか指定して呼ばれない可能性がある場合は、デフォルト値を定義した方が良い

パターン1 ifを利用する function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text); } showMessage(); // empty message パターン2 ||をつかう // パラメータが省略 or "" の場合, 'empty' を設定 function showMessage(text) { text = text || 'empty'; ... } これは空も判定する！ パターン3 ??を使う function showCount(count) { alert(count ?? "unknown"); } これはnullとundefinedを判定する。

関数は短く明確に1つのことを行うべきです。もし関数が大きい場合、恐らくそれを幾つかの小さい関数に分けることは価値があるでしょう。 再利用よりも可読性をよくするために関数化できる。 関数はコメントともいえる。 function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { // i が素数であるかをチェックする for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert( i ); // a prime } } これは以下のようにわかりやすくできる。 // 2からnまで繰り返し処理する function showPrimes(n) { for (let i = 2; i < n; i++) { if (!isPrime(i)) continue; alert(i); // a prime } } // nが素数かどうか判断する関数 function isPrime(n) { for (let i = 2; i < n; i++) { if ( n % i == 0) return false; } return true; }

関数式と関数宣言という違いがある 関数式はセミコロンがいる。 どちらもsayHiに関数オブジェクトが束縛されてる点はおなじ 関数式は、実行がそれに到達した時に作られ、それ以降で利用可能になります。 関数宣言はスクリプト/コードブロック全体で使用できます。 こっちは大丈夫だけど sayHi("John"); function sayHi(name) { alert( `Hello, ${name}` ); } 関数式だとエラー sayHi("John"); // エラー! let sayHi = function(name) { // (*) no magic any more alert( `Hello, ${name}` ); };

アロー関数※1行ならreturnキーワードは不要！ let sum = (a, b) => a + b; 引数が一つならカッコも省略できる let double = n => n * 2; 引数なしはこう let sayHi = () => alert("Hello!"); 複数行の処理内容をかくには波括弧をつける let sum = (a, b) => { let result = a + b; return result; // 波括弧を使う場合、明示的な return が必要です };

関数の文書化のための特別な構文 JSDoc があります。: 使用方法、パラメータ、返却値 例: /** * Returns x raised to the n-th power. * * @param {number} x The number to raise. * @param {number} n The power, must be a natural number. * @return {number} x raised to the n-th power. */ function pow(x, n) { ... }

トランスパイラ transpilerは、ソースコードを別のソースコードに変換する特別なソフトウェアです。最新のコードを解析し、古い構文を使って書き換えることで、古いエンジンでも動作するようにすることができます。 Polyfills 新しい言語の機能には、構文構造や演算子だけでなく組み込みの関数も含んでいる可能性があります。 例えば、Math.trunc(n) は数値の小数部分を “切り取る” 関数で、例えば Math.trunc(1.23) = 1 となります。 (非常に古い) JavaScript エンジンでは、Math.trunc は存在しないためこのようなコードは失敗します。 構文変更ではなく、新しい関数について話しているので、ここではトランスパイルは必要ありません。単に不足している関数を定義する必要があります。 新しい機能を更新/追加するスクリプトは “polyfill” と呼ばれます。ギャップを “埋め”、不足している実装を追加します

できる。 Function A(){ return ‘a’; } A(); // a A(this); // a

argumentsプロパティを利用すると渡された情報を確認できる function MyFunc (){ var num = arguments.length; var i; for(i=0;i < num;i++){ // 引数から渡されたデータを取得する var data = arguments[i]; console.log("id:" + i + " data:" + data); } }