JavaScriptの入門を解説しているサイトはどこが良いでしょうか？

私はC++やC#は長いのですが、WEB系の技術には疎いです。htmlやcssを触れないことは無いけど慣れていないのでむちゃくちゃ時間がかかるレベルです。
業務でJavsScriptのメンテが必要になったのですが、JavaScriptはデスクトップ系の言語とは基本的な考え方が異なるようで中々頭に入ってきません。main()関数からの実行開始になれているため、ドキュメントの中にプログラムを埋め込んだ関数が呼ばれるタイミングを把握できていないせいかもしれません。

JavaScriptの基本的な考え方（特にJavaScript関数が呼ばれる最初のきっかけに何があるのか）を解説しているサイトはないでしょうか？
また、JavaやC#等のデスクトップ系の言語と対比して解説しているようなサイトがあれば教えて頂けると助かります。

think49

2018/05/06 05:07 編集

その節はお世話になりました。「特にJavaScript関数が呼ばれる最初のきっかけに何があるのか」というところが理解できていないのですが、通常の入門サイトや書籍を紹介すればいいのでしょうか。私は逆にC言語の経験がなく、どの辺りで頭に入ってこないのか、が具体化されると的確な回答が得られそうな気がします。JavaScriptは大別すれば、ECMAScript/DOM/その他APIに大別できますが、どこで詰まっているのか、等。

Chironian

2018/05/06 05:15

こちらこそお世話になりました。C言語等はプログラムを起動すると通常はmain()関数から実行が始まります。dllの場合はdllをリンクしたプログラムが呼び出した関数が実行されます。これに対してJavaScriptの関数がいつ呼ばれるのか？の把握が甘そうなのです。ボタンをクリックした時といっても複数ありそうですし。ECMAScript/DOM/その他APIについては全く把握できていません。

think49

2018/05/06 05:29

なるほど。Webブラウザに実装されているJavaScriptという認識でよろしかったでしょうか(Node.js等のサーバサイドとクライアントサイドでは大分異なります)。Node.jsの場合は残念ながら、私は力になれそうにありません。

Chironian

2018/05/06 06:02

その通りです。クライアントサイド限定でOKです。よろしくお願いします。

行動規範の内容に同意します

回答7件

JavaScriptの実行タイミング

これに対してJavaScriptの関数がいつ呼ばれるのか？の把握が甘そうなのです。

綺麗にまとまっているサイトが思い浮かばなかったので、下記にまとめました。

[JavaScript] WebブラウザでJavaScriptコードを実行するタイミング.md

やや情報を詰め込みすぎたきらいがあります。
「入門向け」と「実行タイミング」で情報を分離すべきでしたが、今から修正すると時間をかかるので、公開します。
(※Typora等のmdファイルをアウトライン表示できるエディタで閲覧する事を推奨)

Typora — a markdown editor, markdown reader.

不明点や誤りがあれば対応しますので、気軽に聞いてください。

main() 関数の代替

JavaScriptの場合、関数を自由に定義できるので main 関数という概念はありませんが、ES3, ES5 時代にはグローバル汚染を回避する為に即時関数で括る慣習がありました。

JavaScript
1<script>
2/**
3 * (A) ES3/ES5
4 */
5'use strict';
6(function () {  // FunctionExpression
7  function handleClick (event) {
8    console.log(event.type);
9  }
10
11  function main () {
12    this.document.addEventListener('click', handleClick, false);
13  }
14
15  main.call(this);
16}.call(this));
17</script>

ES6 (ES2015) 時代もグローバル汚染は回避しますが、回避手段が増えています。

JavaScript
1<script>
2/**
3 * (B) ES6 (ES2015) type1
4 */
5'use strict';
6(() => {  // ArrowFunction
7  function handleClick (event) {
8    console.log(event.type);
9  }
10
11  const main = () => {
12    this.document.addEventListener('click', handleClick, false);
13  };
14
15  main();
16})();
17
18/**
19 * (C) ES6 (ES2015) type2
20 */
21{ // BlockStatement
22  const handleClick = function handleClick (event) {
23    console.log(event.type);
24  };
25
26  const main = () => {
27    this.document.addEventListener('click', handleClick, false);
28  };
29
30  main();
31}
32</script>

いずれも私が気を付けていることは、main 関数がグローバルコードと同じ this 値を持っていることです。
が、これは私の個人的なポリシーであり、標準的な基準があるわけではありません。

関数宣言と関数式

function(){ ... } はラムダ式の定義、

式の定義という意味では正しいのですが、実は条件があります。

関数の種類	制限事項
関数宣言 (FunctionDeclaration)	function キーワードで始まらなければならず、名前をつけなければならない
関数式 (FunctionExpression)	function キーワードで始まってはならず、名前は付けても付けなくても良い

関数宣言はfunction キーワードで始まらなければならないと決まっている為、いわゆる即時関数と呼ばれる書き方では () や + 等を先頭に置くことで関数式化しています。

JavaScript
1(function main () { // "(" で始める事で関数式扱いとなる (関数式なので名前は付けても良い)
2  console.log(main.name);
3}());

グローバルコード上の this 値

thisはDOMツリーのルートということなのですね。

これは違います。
DOM 規定ではなく、ECMAScript 規定によって、「グローバルコード上では this 値がグローバルオブジェクトである」と定められています。
そして、window キーワードでグローバルオブジェクトを参照できるのは、DOM 規定によるものです。

JavaScript
1/**
2 * グローバルコード
3 */
4window.parseFloat('1.0'); // (A)
5this.parseFloat('1.0');   // (B)

上記コードは、Webブラウザ上ではどちらも期待通りに動作しますが、Node.js では (A) が動作せず、(B) のみ期待通りに動作するでしょう。
Node.js は window キーワードでグローバルオブジェクトを参照できませんが、ECMAScript 仕様は実装されています。
その為、ECMAScript 仕様の範囲内である this 値による参照は有効なのです。

ちなみに、DOM 上のルートノードは元々は document でした。
Document Object Model の名が示す通りですね。
ですので、document.parentNode は未定義です。

window は長らく、標準化されていませんでしたが、HTML Standard の既定と同時に window オブジェクトが定義され、DOM Standard でも定義されました。

DOM Standard では少し、複雑で3つのツリーが出てきます。

Node tree上に Document は存在しますが、Window は存在しません
Document tree 上の root は document です
Shadow tree 上の root は ShadowRoot であり、Window です

Re: Chironian さん

投稿2018/05/06 13:31

編集2018/05/06 16:31

think49

総合スコア18194

Chironian

2018/05/06 13:55

おおっ、ありがとうございます。お風呂でざっと目を通させて頂きました。パース→実行の流れを分かりやすく説明頂き、ありがとうございます。 DOMをC#のWebBrowser経由で触ったことがあるので、イメージがかなり明確になりました。熟読させて頂きます。もう一度、ありがとうございます！！

think49

2018/05/06 14:32

To: Chironian さんやはり、DOMは触れた経験があったのですね。 Javaとも対比されていたのでそうではないかと思っていましたが、イメージがつかめたようで何よりでした。 main() 関数の代替について、親記事に追記しました。 JavaScriptは定義する関数名に制限がないので、main() 関数と呼べるものはありませんが、自前で main 関数を定義しておけばイメージしやすいかもしれません。実際、私も親記事に載せたスタイルで書くことはよくあります。

Chironian

2018/05/06 15:27

なるほど。JavaScript見ていると名前無しfunction()がいきなり出てくるので、頭がいつもそこでフリーズしてました。 scriptタグ内は処理を実行する文脈で、function(){ ... } はラムダ式の定義、function(){ ... }.call(this)でラムダ式の実行。thisはDOMツリーのルートということなのですね。 CやC++の一番外側は型、関数、変数の宣言場所であって実行文を書けるところではないから、名前無し関数をそこで定義しているように見えてパニクっていたようです。（宣言しかできない場所では名前を付けるか、名前の付いた変数経由で参照しないと呼び出せない。）後はリファレンスを見ながら何とかできそうです。ありがとうございました。

think49

2018/05/06 16:34

少し誤解があるように思いましたので、親記事に追記しました。

Chironian

2018/05/06 16:43

ということは、thisはドキュメント（=DOMツリーのルート）ではなくてWindow(ブラウザ自身のようなもの）ということなのですね？

think49

2018/05/06 22:35 編集

そうですね。グローバルコード上では this === window が成立します。 window はウインドウそのもので、今どきのブラウザでは「ブラウザのタブ一つ分」と認識すると、イメージしやすいかもしれません。 iframe要素が存在すると、そこには別の window が生成されています。タブが3つ開いていれば、それぞれ独立した3つの window が生成されています。一般にwindowは唯一のオブジェクトと考えられがちですが、実はフレームを跨げば別のwindowが存在していて、window を引数に取れる設計であれば、別のwindowに対して処理を実行する事が出来ます。私はそれを意図して、Function#call で window を渡しています。

Chironian

2018/05/06 18:48

なるほどです。遅くまでお付き合いありがとうございました。

行動規範の内容に同意します

ベストアンサー

JavaScript 入門 - Google 検索の結果出てきたサイトを取り上げています。広告とリンク集だけのサイトは除外しています。なお、リンク集になっているサイトに記載されている物も含めています。

基本的に無料である程度できることを前提とします。途中まで無料だが、続きは有料のサービスや、書籍の紹介のようなものは一部を除き除外しています。オススメ度は独断と偏見による物で、絶対的な物ではありません。

JavaScript入門

オススメ度: ☆☆☆☆☆
対象読者: プログラミング初心者(要HTML知識)
バージョン: ES5
環境: ブラウザのみ
エコシステム: 解説無し

HTMLにJavaScriptを埋め込むオーソドックスな方法しか説明していない。ブラウザでちょっとした動作をさせる程度は出来ても、モダンなサイトの構築は出来ない。Node.jsを用いたサーバー構築なんかも出来ない。実装例が豊富に用意されているが、ES3以前なのか"use strict";無しの即時関数で囲み無しで使う価値なし。何もわからないコピペプログラマーを量産するだけだろう。自分のサイトにちょっと使いだけなら良いが、本格的に学びたいのであれば、避けるべきだろう。

初心者のためのJavaScript入門－＠IT

オススメ度: ☆☆☆☆☆
対象読者: プログラミング初心者
バージョン: ES5
環境: ブラウザのみ
エコシステム: 解説無し

全く更新されていない。内容が古すぎるので、読む価値なし。

JavaScript入門 - 基本構文の解説とクラス/関数リファレンス

オススメ度: ☆☆☆☆☆
対象読者: プログラミング初心者
バージョン: ES5
環境: ブラウザのみ
エコシステム: 解説無し

最初のJavaScript入門と同レベルだが、まだ、体系立っているように見える。リファレンスがあるが、数も少ないし、こんなの見るぐらいならMDN見た方がいい。実装例もES3以前なのか"use strict";無しの即時関数で囲み無しで使う価値なし。使う価値なし。なにより広告がウザい。

2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza開発日誌

オススメ度: ★★★★☆
対象読者: プログラミング経験者
バージョン: ES2015
環境: ブラウザ + Node.js
エコシステム: 解説無し

プログラミング経験者が手っ取り早くJavaScriptの文法を知る程度なら十分。ただ、ボリューム的には紹介程度になっているため、リファレンスやエコシステムについて学ぶには他のサイトを参照する必要があるだろう。JavaScriptをきちんと学べるというわけではないが、短いし、読んで損は無いと思われる。

JavaScript初心者向けの入門ページ

オススメ度: ☆☆☆☆☆
対象読者: プログラミング初心者
バージョン: ES5
環境: ブラウザのみ
エコシステム: 解説無し

サンプルがvar無しのグローバル変数になっている。最初にこんあ入門を読んでしまっては、まともなJavaScriptは書けるようにならない。もはや、害悪でしかない。

JavaScript入門 (全24回) - プログラミングならドットインストール

オススメ度: ★★☆☆☆
対象読者: プログラミング初心者
バージョン: ES5
環境: ブラウザのみ(別途Node.js入門あり)
エコシステム: 解説無し(別途gulp入門等があり)

動画による解説。即時関数の説明があるので、それだけでも他より優秀。ES3までなのか、"use strict";やArray.prototype.map等の解説はない模様。時代遅れでも良いなら、十分かも知れない。

とほほのJavaScriptリファレンス

オススメ度: ★☆☆☆☆
対象読者: プログラミング初心者
バージョン: ES2015
環境: ブラウザのみ
エコシステム: 解説無し

昔Webサイトを作るときに誰もがお世話になった老舗であるとほほのサイト。20年以上も更新し続けているというのが凄い。入門と言うよりリファレンスに近い。ES2015対応で、"use strict";の解説もあるのに、なぜ、サンプルはグローバル変数なのだとツッコミ所が多少ある。ブラウザの互換性などの解説も丁寧なのだが、内容が新旧入り交じっており、いまさら「Netscape Navigator 2.0では～」といわれてもちょっと戸惑う。古い内容の手直し手直しでちょっと無理が出てきたのではないだろうか。それだけ、JavaScriptが昔に比べて変わったと言うことだが。

リファレンスとしてはMDNの方が豊富かつ正確なため、微妙に使い所がない。

Learn to code | Codecademy

オススメ度: ★★☆☆☆
対象読者: プログラミング初心者
バージョン: ???
環境: ???
エコシステム: ???

英語のみ。実際にコードを書いて学ぶという形式。さわりしか試していないが、いいのでは無いかなと思う。使っている人も多いらしい。

目次や概要が見当たらなかったので、なにをどこまで学べるかはよくわかっていない。ES2015やNode.js、BabelやWebpack等も教えてくれそうな雰囲気だけはある。

JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]

オススメ度: ★☆☆☆☆
対象読者: プログラミング初心者
バージョン: ES5
環境: ブラウザ
エコシステム: 解説無し

無料は途中まで。途中から有料になることを覗けば、スライドの説明は絵があって、わかりやすい。だが、有料で開放されるコースを見てもちょっとボリューム不足を感じる。

CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス

オススメ度: ★★★★☆
対象読者: プログラミング初心者
バージョン: ES5, ES2015
環境: ブラウザ
エコシステム: 解説無し

実際にコードを書いて学ぶという形式。別分けだがES2015もあるし、"use strict";もあるし、かなり実践的な内容とも思われる。どこから有料になるのかがちょっとわからなかった。

マンガで分かる JavaScriptプログラミング講座

オススメ度: ★★☆☆☆
対象読者: プログラミング初心者
バージョン: ES5(ES2015のコラムあり)
環境: ブラウザ
エコシステム: 解説無し

まんが。漫画世代にはいいのかもしれない。ちょっと内容が臼杵がしないでもない。

JavaScript入門編(2レッスン) | プログラミング学習ならpaizaラーニング

オススメ度: ★★★☆☆
対象読者: プログラミング初心者
バージョン: ES5
環境: ブラウザ
エコシステム: 解説無し

こちらも実際にコードを書いて学ぶという形式。スライドを見るのでは無く、動画を見るという形式。ES2015などは全くないようなところが残念と言ったところか。

他にも色々あるようですが、疲れたので勘弁して下さい。全てを細かく見たわけではありませんので、ここが違うというのがあれば、コメントでご指摘下さい。

ES5とES2015の違いはC++03とC++11の違いみたいなもんと思っていただければ、大体イメージがつかめるかと思います。

投稿2018/05/06 06:56

raccy

総合スコア21741

Chironian

2018/05/06 07:03

丁寧な紹介ありがとうございます。 > 2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza開発日誌をまずは見てみようと思います。短く手っ取り早く掴めると本当にありがたいですから。上記でざっくりやった後、↓を進めると良さそうですね。 > CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス丁寧に解説頂き、おかげで方針まで決めることができましたので、BAさせて頂きます。有難うございました。しかし、アイコンが変わってて誰なのか一瞬分からなかった。内容的にraccyさん的だなって思ってたら御本人でした。（笑）

raccy

2018/05/06 07:14

何を言っているんですか、同じ犬同士じゃないですか！（前のアイコン？なにそれ？）歴史的なところも知りたい、ブラウザの話も知りたい、というのであれば「とほほ」もオススメです。ただ、本格的に学びたいとなると、文法方面はちょっと混乱するじゃ無いかと思って、オススメ度はさげました。つい最近までJavaScript界隈は全く落ちついておらず、新しいのが出ては消えを繰り返しているような状態でした。やっと落ちつき始めたような気もしないわけではないので、サイトや書籍も最新事項に合わせた良いものがこれから出てくるとは思っています。ただ、最新の情報とかはQiitaとかを見張ってないと、追いつくだけでやっとという感じです(それでも一週遅れを感じるこの頃)。

Chironian

2018/05/06 07:39

うんうん。犬かわいいっす。なるほど、WEB界隈は本当に進歩の速い分野ですよね。ロートルなんでゆっくり付いていきます。

行動規範の内容に同意します

JavaScriptの基本的な考え方

【JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript

↑ Firefoxの開発でおなじみのmozillaの出している物が基本的な部分（言語仕様としての基本的な部分）も触れてはいます。ただ、英語サイトの翻訳であったりするため、初学者向けとはあまり思いません。

【JavaScriptの基本をサルでもわかるようにまとめた【入門用】 - いつ俺〜いつから俺ができないと錯覚していた？〜】
http://www.ituore.com/entry/javascript-basic

Webの情報は「体系立てた情報」で無いことが多いので、本屋で何冊か本を買って読むと言う方法が良いと思います。JavaScript ならとりあえず下記3冊が（少し情報が古いところもありますが）お勧めです。

【O'Reilly Japan - JavaScript 第6版】
https://www.oreilly.co.jp/books/9784873115733/

【O'Reilly Japan - 初めてのJavaScript 第3版】
https://www.oreilly.co.jp/books/9784873117836/

【改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田祥寛 |本 | 通販 | Amazon】
https://www.amazon.co.jp/dp/477418411X

以前より teratail で回答をお見かけしているので、どのあたりで躓いておられるかが想定しにくいですね･･･。

投稿2018/05/06 05:20

kei344

総合スコア69621

Chironian

2018/05/06 06:04

おお、たくさんご紹介ありがとうございます。まずはざっと見てみます。

KSwordOfHaste

2018/05/06 06:42 編集

横から失礼します。 > どのあたりで躓いておられるかおそらくChironianさんは「体系的・網羅的・正確な仕様」を望んでおられ、Webの情報が体系立てた情報で無いことが多いというまさにその点に「ぐぬぬ」となっているのではないでしょうか？初心者用の「こう書けばこう表示される」はChironianさんには物足りないのではないかと想像します。ぶっちゃけユーザーエージェントがresponseを受け取った時DOMがノード単位で構築され、Script要素が生成された瞬間にそこにあるスクリプトが実行される・・・とかそうした低水準なメカニズムをがっちり書いてあるようなものが一番お望みではないかと思いました。自分はそういう解説を見たことがないのですが、kei344さんが挙げておられる書籍などを読めばそこに書いてあったりするのでしょうか・・・

KSwordOfHaste

2018/05/06 06:48

すみません・・・O'Reillyの目次などをみて「あーこういうの読んどけば早かったのか」と感じました。しょうもないコメントしてしまい失礼しました。

行動規範の内容に同意します

こういうのは相性があるかと思いますので難しいですが、下記二つはいい感じだと思います。

JavaScript初級者から中級者になろう — uhyohyo.net
この書籍について · JavaScriptの入門書 #jsprimer

なんとなく追記

特にJavaScript関数が呼ばれる最初のきっかけに何があるのか

投稿2018/05/06 06:16

編集2018/05/06 08:36

Lhankor_Mhy

総合スコア37303

Chironian

2018/05/06 08:20

情報ありがとうございます。ざっくり見てみますっ。

行動規範の内容に同意します

ドキュメントの中にプログラムを埋め込んだ関数が呼ばれるタイミングを把握できていないせいかもしれません。

JavaScriptの基本的な考え方（特にJavaScript関数が呼ばれる最初のきっかけに何があるのか）を解説しているサイトはないでしょうか？

回答欄を斜め読みした感じ、ブラウザがHTMLを読み込み、Scriptタグを読み込み、
どうやって実行させているのかをさらっと書いているものは見つかりませんでした。

この辺はなんか本だとちょっと弱そうですね…
ざっくりした概念はこの回答にぶら下げていきます。
詳細は調べればいくらでも出てくると思いますので、あくまで森の紹介にとどめます。

業務でJavsScriptのメンテが必要になったのです

Chrome等のブラウザでWebサイトにアクセスしてHTMLファイルを読み込みます。
HTMLはSGML系の<tag></tag>のような書き方をする実装の一つですので、
ブラウザはタグを見つけ次第、ブラウザは自前で搭載しているDOMのAPIでツリー構造を作って放り込んでいきます。
この時に<script></script>を発見すると中身の文字列をJavaScript(以下JS)のコードとして実行しはじめます。

大雑把なルールはこちらです。
この辺の挙動はW3Cが出している仕様書を見れば書いて有りそうですが、
実装からみた感じなのでソースはありません。

HTMLファイルの先頭に近いscriptタグから順番に実行される
src属性が設定されている場合、内部の文字列は捨てて外部ファイルを読み込む
JSには言語仕様上外部スクリプトの読み込みという機能がない
JSの実行中、DOMツリーの構築は停止する

JS外部ファイルの読み込み方

HTMLファイルの先頭から順次実行されるという特性があるので、
jQuery等の外部ライブラリが必要になった時は全て本命のJSより上の行で宣言してください。
（既存のプロジェクトは全てそうなっているはずです）

HTML5ではこのルールに従わない挙動が可能ですが、
例外に関してはこの辺の記事を読んでみてください。

※ES2015という新しい仕様でimport構文が追加されましたが、
JSコード単体が勝手に外部のJSを読み込んでロードするほどの機能はありません。
使い方はこの質問のマイスマ君さんの回答を参考にしてみてください。
https://teratail.com/questions/124725

外部ライブラリの実装

基本的にはグローバル変数領域に直書きでvar jQuery = function...という風な事が記載されています。
じゃあライブラリをぽこぽこ呼び出すだけで勝手に衝突しちゃうじゃん！

まさに指摘通りなので気をつけてください。
JSではグローバル変数は出来るだけ宣言しないという運用ルールでカバーします。

グローバル変数領域に自分のライブラリ名だけ宣言しておき
中身はクラス的なものを配置、jQuery.hoge(123)という風にプロパティやメソッドにアクセス使うという設計になっているのが一般的です。

※IE11がimport/exportに対応していない為、
後5年程度はimport構文を使って読み込むライブラリは出ないでしょう。

main関数の代わり

JSはscriptタグの宣言と同時に発火するので
DOMツリー構造が整う前に全ての処理が実行され、終わってしまいます。

じゃあ値や関数の宣言しか出来ないじゃんどうすんの？
JSはイベント駆動型という話を聞いた事がありませんか？

JSは関数が第一級オブジェクトです。
変数に代入、関数の引数に設定、関数の戻り値として返す…という事がまるで文字列型や数値型と同じように出来ます。

JSではブラウザのイベント格納場所をAPIとして公開しています。
やりたい事を関数として宣言しておいて、決められたイベント格納場所に登録しておけば、
イベントの発火条件を満たした時点で自動的に登録済みの関数を発火してくれます。

各ブラウザはEventTarget.addEventListener()等のAPIを準備しています。
この辺はJSのリファレンス本などに書かれていますので、割愛します。

DOMのレンダリングを待つ方法

body.onload = fn: バッドプラクティス
window.addEventListener('DOMContentLoaded', fn): 基本はこれ
window.addEventListener('load', fn): 画像ファイル・CSSファイルの読み込みも待ってから発火したい場合はこちら
$(fn): jQueryのライブラリで用意されているDOMContentLoaded相当のエイリアス

fnは関数を指しています。
変数に代入して持ってきても良いですし、こんな風にその場で宣言して格納しても良いです。

JavaScript
1// ネイティブJS版
2window.addEventListener('load', function(){
3  var i = 0;
4});
5
6// jQuery版
7$(function(){
8  var i = 0;
9});

一番上のbody.onloadはバッドプラクティスです。
body.onloadは後勝ちで、複数の関数を設定しようとすると最初に設定した関数が剥がされてしまい発火しなくなる不具合の原因になります。

addEventListenerの同じターゲットの同名イベントに複数セットした場合、
基本的にはセットした順番に発火したと思いますが、もし気になる場合は調査してください。

画面への反映の仕方

JSは出力対象が既に出力されてしまっているので、
DOM APIを利用してDOMツリー構造を後から書き換えるという方法で画面を更新します。
基本的な流れは下記のようになるでしょう。

セレクタ的なメソッドを実行して、対象のHTML要素をつかむ
つかんだ要素のメソッドを実行して値を取得する
つかんだ要素のメソッドを実行して値を設定する

まぁ、普通にオブジェクト指向の考え方です。
DOM APIもW3Cが共通の仕様を公開しており、どのブラウザも同じメソッドで同じ挙動をしてくれます。
この辺も詳しくはリファレンス本等を参照してください。

ただ、このDOM APIの作りが非常にイケてないので、
2006年に登場したjQueryというライブラリでラッピングして使うシーンが多いです。

恐らく譲り受けたプロジェクトはjQueryが入ってるんじゃないかと思いますので、
もしそうであればjQuery系の書籍にも目を通しておいてください。

SPAやシャドウDOMに関して

Vue.js等を利用しているプロジェクトの場合、こちらに該当します。

これはDOM操作とか人間が手作業でするもんじゃねーよ、
テンプレート的なHTMLと値だけ渡してあげて、値を書き換えたらDOMの方が勝手にあるべき姿に書き換わってくれない？
…という発想で作られています。

従って自分でDOM APIやjQueryを利用してDOMを書き換えるという思想とは相反する為、
衝突すると意図しない挙動になるかと思いますので注意してください。

投稿2018/05/06 08:28

編集2018/05/06 09:22

miyabi-sun

総合スコア21291

Chironian

2018/05/06 08:46

おおっ、ざっくり解説ありがとうございます。 > JSはscriptタグの宣言と同時に発火するので宣言しただけで実行されるのですね！　超びっくり。目からウロコが落ちまくりです。確かにドキュメントの中にあるスクリプトですから、ドキュメントを解釈している最中に実行されることは自然ですね。 CやC++, C#等は関数を明示的に呼び出さない限り実行されません。関数の中で関数を宣言できるような言語でさえも宣言した関数は明示的に呼び出さないと実行されません。このギャップが私にとってたいへん大きかったようです。

kei344

2018/05/06 08:58

To: miyabi-sunさん > JSには言語仕様上外部スクリプトの読み込みという機能がない import が（対応ブラウザは置いておいて）あるのでは。（私が文脈を読めていない可能性もありますが）【import - JavaScript | MDN】 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import > window.addEventListener('load', fn) $(function(){});に近いのは DOMContentLoaded では。

miyabi-sun

2018/05/06 09:24 編集

> keiさん不備があってすみません、ありがとうございます。 > import ES2015で追加されたimportは確かに外部モジュールの読み込みです。使い方はマイスマ君さんが紹介している手法になるようで、結局scriptタグをせっせと配置する必要があります。 https://teratail.com/questions/124725 従って、JSコード内から外部スクリプトの読み込む機能はないとしましたが、追記して対応しました。 > loadではなくDOMContentLoadedでは？ https://api.jquery.com/ready/ https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded 確かにそうですね…loadと勘違いしていました。しかもloadは明確に必要な場面以外使うなと怒られてますね。これは直さないと明らかに駄目な奴ですね、回答文を編集して対応します。→しました。

行動規範の内容に同意します

こんにちは

私が知っているサイトはこちらになります。約3分の動画を見て学習するサイトです。
Javascript入門編は完全無料となっています。

paiza(ただし会員登録が必要です。)

投稿2018/05/06 05:35

編集2018/05/06 05:36