Javascript学習記録#1
初めに
Javascript(以下js)について学習したので、学習した内容を数回に分けて書いていきたいと思います。
今回はjsがどんなものなのかについて書いていきます！
参考にしたサイトは以下の通りです
Jsとは？
まず、jsとは何でしょうか？
MDNを参考にすると、jsとはウェブページにて複雑な機能をできるようにするプログラミング言語です。
例えば、ボタンをクリックしたときの動きを追加したり、twitterのように、入力した内容がそのままウェブページに追加されたりといった感じです！
イメージがわかない方もいると思いますので、具体的な動きについては以下のサイトを開き、PLAYER 1: NULL ボタンを押してみてください
jsで使えるAPI
続いて、jsですでに使えるように構築されている昨日についてです。(APIと呼びます)
jsのAPIは以下のようなものがあります。
DOM (Document Object Model) API：HTML と CSS の操作(主にこれが使われる)
Geolocation API：地理的な情報を取得
Canvas と WebGL の API ：2D や 3D グラフィックでのアニメーション
音声と動画の API
Twitter API：ウェブサイトに最新のツイートを表示させる
Google マップ API や OpenStreetMap API：ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできる
jsの実行順序
たいていは、先頭から最後に向かって順番に実行されます
そのため、コードを書く順序については気を付けておく必要があります
サーバーサイドコードとクライアントサイドコード
クライアントサイドコードとは：ユーザーのコンピューター上で実行されるコード
サーバーサイドコードとは：サーバー上で実行され、結果がブラウザにダウンロードされて表示されるコード
html, cssはクライアントサイドコードですが、jsにはサーバーサイドもクライアントサイドのコードもかけてしまいます！
html内にコードを追加する
html内にコードを追加する場合には、以下のようにコードを埋め込む必要があります
<script>
// Jsコード をここに書きます
</script>
ただし、これをhtml内に書くと、コードの可読性が落ちてしまうので、後述するhtmlファイルの外にコードを書くことが望ましいです
html外にコードを書く
続いて、htmlファイル内ではなく、外部にjsを書く方法について話します
外部でscript.jsというjsファイルを作ったら、html内で以下のように記述します
<script //属性// src="script.js"></script>
これで、script.js内で書いたコードが実行されます
ここで書かれているコード内に//属性//とありますが、この部分にはasyncか、deferが入ります。
それぞれ以下のような機能があります。
async:ページをブロックすることなくスクリプトをダウンロードする。ダウンロードが完了したらスクリプトが実行され、ページのレンダリングがブロックされる。
ページ内のほかのスクリプトに依存しない場合に用いる。また、できるだけ早く実行したいときにも用いるべきです。
defer:ページに表示されている順番に読み込む。
エラーの種類
コードに誤りがある場合には、一般的に以下の２つのいずれかになります
構文エラー：プログラムが全く動かなくなったりしたときになる記述エラーで、通常エラーメッセージが出力される
論理エラー：書き方は正しくても、コードが意図したとおりに動かないエラー。間違った結果を返し、エラーメッセージがないため、構文エラーよりも直すのが難しい
コードの詳細や、そのエラーについては以下で確認できます！
まとめ
Jsを使うと、webページを作成するときにより自由度が上がり、またフロントエンドだけではなくバックエンドの記述もできてしまうことが分かりました！この言語1つでも十分アプリ開発が行えてしまう力があるなという印象を受けました！
今回は、Jsがどんなものか・どのようなことができるかについて簡単に書いていきました！
次回はJsのコードの書き方について記事を書いていけたらなと思います。
Discussion