JavaScript

JavaScript の役割

言語役割
HTML(マスター済み)コンテンツの指定
タイトル,文章,画像などの記述
CSS(マスター済み)コンテンツの装飾
色,大きさ,配置などの指定
JavaScriptユーザー操作,イベント発生による動きを実現
(わりとなんでもできる)

JavaScript とは

JavaScript ≠ JAVA

JavaScript と JAVA の違い

JavaScriptJAVA
フロントエンド言語サーバサイド言語
カモミールカモ
オーストラリアオーストリア
ハムスターハム
メロンパンメロン

Web アプリケーションに欠かせない JavaScript

Webアプリケーションのしくみ

言語別人気ランキング(2020 年)

言語使用している開発者(%)
JavaScript||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||69.7%
HTML/CSS||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||62.4%
SQL|||||||||||||||||||||||||||||||||||||||||||||||||||||||||56.9%
Python||||||||||||||||||||||||||||||||||||||||||41.6%
JAVA||||||||||||||||||||||||||||||||||||||38.4%
C#||||||||||||||||||||||||||||||||32.3%
TypeScript||||||||||||||||||||||||||||28.3%
PHP||||||||||||||||||||||||||25.8%

ソース: https://insights.stackoverflow.com/survey/2020/#technology-programming-scripting-and-markup-languages

JavaScript 周辺の技術

JS周辺技術

よく使われる技術

技術特徴
- JavaScript のライブラリ.
- ユーザ操作イベントやアニメーションを実現
- ✅ 生 JS と比較して短くかける.
- ✅ web アプリケーションで広く普及している.
- ✅ 導入が簡単.
- ✅ 学習コストが低い.
- 🔼 難しいことをやろうとすると複雑になる.
- まずはここから!


- JavaScript のライブラリ.
- ✅ モダンな web アプリケーション(SPA)を実現
- ✅ 高速!
- ✅ TypeScript での実装も可能
- ✅ スマホアプリも見据えた開発が可能.
- 🔼 学習コスト
- 🔼 環境構築がややハードル.
- (私は React が好き)
- サーバサイドで JavaScript を動かす技術.
- ✅ フロントもサーバも JavaScript で書ける..!
- ✅ サーバサイドの中では環境構築が容易
- 🔼 難しいことをやろうとすると複雑になる.

JavaScript を書く

書き方

<script></script>の間に処理を記述!

書く場所

  • html ファイルの</body>のすぐ上に書こう!
  • ほかにもいくつか書ける場所があります.
  • 別にファイルを作るやり方もあります.

まず動かす!!

  • alert()
  • console.log()

文字列は「'」か「"」で囲む.どちらでも OK!

<script>
  alert("Hello world");

  console.log("Hello world");
</script>