JavaScript 基礎_言語に関する知識
・特徴
javaScriptは200種類以上あるプログラミング言語の一種で、
Webページに様々な機能を付加することができる。
ユーザーの動きに応じたWebページ機能を作れるのは
JavaScriptならでは。
Webページに様々な機能を付加することができる。
ユーザーの動きに応じたWebページ機能を作れるのは
JavaScriptならでは。
デメリットとしては、セキュリティが甘いなどのデメリットも
ある。
HTMLやCSSのソースコードがブラウザの「ソースコード表示」
などから観覧できてしまうように、JavaScriptの
コードも同じく観覧することができてしまう。
ある。
HTMLやCSSのソースコードがブラウザの「ソースコード表示」
などから観覧できてしまうように、JavaScriptの
コードも同じく観覧することができてしまう。
ユーザ認証機能のような具体的な処理内容が見られたら
困るものはJavaScriptでは実装しない
困るものはJavaScriptでは実装しない
・この言語習得後、可能なこと。
フロントエンジニアとして、
自社サイトやアプリの利便性向上のために、
ボタンやメニューに機能を付けることが可能になる。
フロントエンジニアとして、
自社サイトやアプリの利便性向上のために、
ボタンやメニューに機能を付けることが可能になる。
デザイナーとして、
自社のWebサイトの目立たせたい所に「アニメーション」や
「複数枚の画像スライドして表示する」などの効果も追加すること
ができるので、ユーザーの利便性を上げることができる。
自社のWebサイトの目立たせたい所に「アニメーション」や
「複数枚の画像スライドして表示する」などの効果も追加すること
ができるので、ユーザーの利便性を上げることができる。
ライブラリとフレームワークについて
ライブラリとは、
汎用性の高い複数のプログラムを、再利用可能な形で
ひとまとまりにしたもので、クラスや関数といった
パーツのまとまりで提供されるソースコード。
※読み込むだけでは、何もされず、クラスや関数を自分に合った形で
呼び出す必要があります。プログラムの制御を
プログラマー自身が行わなければなりません。
汎用性の高い複数のプログラムを、再利用可能な形で
ひとまとまりにしたもので、クラスや関数といった
パーツのまとまりで提供されるソースコード。
※読み込むだけでは、何もされず、クラスや関数を自分に合った形で
呼び出す必要があります。プログラムの制御を
プログラマー自身が行わなければなりません。
フレームワークとは、
骨組みをミスるようにアプリケーションにおける
部品だけでなく、大まかな雛型を用意することで特定の機能
をもたせようとしたもの。
つまり、「アプリケーションはこのように開発する」といった
方向性に沿ったパッケージを選び、そのパッケージにない機能
を実装していきます。
※プログラマーはフレームワークの決まりに従って所定のクラスを
実装していくだけで、一定の品質をもったアプリケーションを
作り上げることが出来る。
骨組みをミスるようにアプリケーションにおける
部品だけでなく、大まかな雛型を用意することで特定の機能
をもたせようとしたもの。
つまり、「アプリケーションはこのように開発する」といった
方向性に沿ったパッケージを選び、そのパッケージにない機能
を実装していきます。
※プログラマーはフレームワークの決まりに従って所定のクラスを
実装していくだけで、一定の品質をもったアプリケーションを
作り上げることが出来る。
JavaScriptのライブラリ
・JQuery
ブラウザごとの差異を吸収してDOM操作を簡単に行うことが
できるようになりました。
JavaScriptの記述の煩雑さから解放されたｋどとで、
大きく広がる。
・React
Facebookが開発を行っているJavaScriptライブラリ。
Facebookのフィード画面やYahoo!、Airbnb、Atomなど、大手の
サービスでも採用されている。
ブラウザごとの差異を吸収してDOM操作を簡単に行うことが
できるようになりました。
JavaScriptの記述の煩雑さから解放されたｋどとで、
大きく広がる。
・React
Facebookが開発を行っているJavaScriptライブラリ。
Facebookのフィード画面やYahoo!、Airbnb、Atomなど、大手の
サービスでも採用されている。
Reactとは、「A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES」
略で、UIを組み立てるためのJavaScriptライブラリというコピーからわかるように、
見た目の部分を効率よくつくっていくフレームワーク
電卓やデートピッカーのようなパーツが世界中のデベロッパーによって
行われています。
略で、UIを組み立てるためのJavaScriptライブラリというコピーからわかるように、
見た目の部分を効率よくつくっていくフレームワーク
電卓やデートピッカーのようなパーツが世界中のデベロッパーによって
行われています。
・AngularJS
Googleが開発を行っているJavaScriptフレームワーク。
「JavaScriptのフレームワークを始めるなら、AngularJSから」
と言われるくらい。
Googleが開発を行っているJavaScriptフレームワーク。
「JavaScriptのフレームワークを始めるなら、AngularJSから」
と言われるくらい。
AngularJSでは、「MVC」(Model-View-Controller)と呼ばれる、
ロジックと表示、制御や実装をわける考え方を採用されている。
役割が違うプログラムを別々のファイルで管理するように
できているので、アプリケーションの設計を行う必要がない。
「双方向データバインティング」と呼ばれる、HTML要素の取得と
画面の繁栄を連動して行う仕組みがあるので、より少ないコードで
機能を実装することができることは人気の理由。
ロジックと表示、制御や実装をわける考え方を採用されている。
役割が違うプログラムを別々のファイルで管理するように
できているので、アプリケーションの設計を行う必要がない。
「双方向データバインティング」と呼ばれる、HTML要素の取得と
画面の繁栄を連動して行う仕組みがあるので、より少ないコードで
機能を実装することができることは人気の理由。
また、「双方向データバインディング」と呼ばれる、HTML要素の
取得と画面の繁栄を連動して行う仕組みがあるので、世リスクにあコードで
機能を実装することができるのも人気の理由。
取得と画面の繁栄を連動して行う仕組みがあるので、世リスクにあコードで
機能を実装することができるのも人気の理由。
・Backbone.js
JavaScriptのフレームワーク。
AngularJSでも採用されている「MVC」を採用している。
AngularJSと違うところは、
AngularJSはフルスタックで様々な機能が用意されているに対し、
BackBone.jsは下地を用意するためのシンプルなフレームワークに
なっている。
双方向データバインディングなどの機能はない分、学習コストは
AngularJSに比べると少ない。
JavaScriptのフレームワーク。
AngularJSでも採用されている「MVC」を採用している。
AngularJSと違うところは、
AngularJSはフルスタックで様々な機能が用意されているに対し、
BackBone.jsは下地を用意するためのシンプルなフレームワークに
なっている。
双方向データバインディングなどの機能はない分、学習コストは
AngularJSに比べると少ない。
・Vue.js
JavaScriptのフレームワーク。
「MVVM」(Model-View-ViewModel)と呼ばれる「MVC」の派生形
パターンを採用し、ファイルサイズが非常に軽量でレンダリングが
速いという特徴がある。
AngularJSがフルスタックであるのに対し、Vue.jsは
双方向データバインディングに特化しています。
非常にシンプル、学習コストが非常に低い。
JavaScriptのフレームワーク。
「MVVM」(Model-View-ViewModel)と呼ばれる「MVC」の派生形
パターンを採用し、ファイルサイズが非常に軽量でレンダリングが
速いという特徴がある。
AngularJSがフルスタックであるのに対し、Vue.jsは
双方向データバインディングに特化しています。
非常にシンプル、学習コストが非常に低い。
・Knockout.js
JavaScriptフレームワークで、Vue.jsと同じく「MVVM」を採用。
Vue,jsがシンプルさにこだわった反面ViewModel(JavaScript)の記述が独特。
JavaScriptフレームワークで、Vue.jsと同じく「MVVM」を採用。
Vue,jsがシンプルさにこだわった反面ViewModel(JavaScript)の記述が独特。
・Feahers
複雑なリアルタイムアプリを作るのに便利なオープンソースの
JavaScriptフレームワーク。
フロントエンドとバックエンドをつなぐREST APIを採用しているので、
チャットアプリのようなサーバーを介したアプリケーションも
簡単に開発することができます。
複雑なリアルタイムアプリを作るのに便利なオープンソースの
JavaScriptフレームワーク。
フロントエンドとバックエンドをつなぐREST APIを採用しているので、
チャットアプリのようなサーバーを介したアプリケーションも
簡単に開発することができます。
<例文>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>課題</title>
</head>
<body>
<script>
document.write('Hello World');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>課題</title>
</head>
<body>
<script>
document.write('Hello World');
</script>
</body>
</html>
こんな感じで使います。
Internet ExplorerでHello Worldと表示されます。
Internet ExplorerでHello Worldと表示されます。