Javascript
javascriptとは利用者側で処理される言語となっています。
HTMLやCSSは主にブラウザで文章やデザインを作る専用の言語ですが、
Javascriptは”script”とあるように、ユーザーが文字を入力した時、どうするのか
ユーザーがボタンを押したときにどう処理するのかなど、実際にユーザーのアクションに対し処理を行う事が出来る言語となっています。
htmlにscriptと書いて使える手軽さと、その幅広い応用力でほとんどのwebエンジニアで使われています。
<script>
//javascriptの処理
</script>Javascriptの高度版”TypeScript”
Javascirptは歴史がある言語です。その上、Javascript自体の書き方（少し、互換性は残すけど、）
ちょっと拡張性を持たせるという意味で大規模プログラミング言語として開発されました。
Javascriptに、Javaや#Cなどの、オブジェクト指向の書き方が採用されてるのが特徴です。
フレームワークとの違い
フレームワーク
フレームワークとは、アプリケーションを開発するときに、そのフレームを使ってより少ないプログラミングで処理を実行できるようにしたものです。
https://anime-create.comと毎回入力するのはメンドイ。
だから、AniCre＝htpps://anime-create.comとして、入力を簡単にしよう。
こんな感じがフレームワークです。
開発したのはかの、Microsoftです。
Javasripctのフレームワーク
そんなjavascript、多くのフレームワークがあります。
数多くの種類がありますが、有名な言語を挙げると主に４つです。
#jQuery #Angular #React #vue.js
jQuerey
主に、javascriptのAjaxが強み分野となっています。
Ajax
javascriptを使った非同期処理の事です。
ボタンを押すと追加の文字が入力されたり、ボタンを押して色が変わったり
同じwebページ内での動的な処理を実現させるのが、Ajaxです。
導入方法
主に２つの方法がある
- jQueryをダウンロードし、読み込む方法
- jQueryCDNをscriptに記述する方法
DCMは特にダウンロードし、ファイルに設置しないくてよく、非常に簡単に導入出来ますが
DCMサーバー（Googleなどが公開している無料）いつかそのサービスが終わる可能性も否定できません。jQueryを常に使う場合はインストールする事をお勧めします。
jQueryをダウンロードする方法
こちらからダウンロードして導入してください。
jQueryCDNを導入する方法
- jQuery
- Microsoft
HTMLにjavascriptを導入するような感じで記述します。
//jQuery
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
//Google
<script src="https://ajax.googleapis.com/ajax/lib/jquery/3.5.1/jquery.min.js"></script>
//Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.js"></script>Vue.js
Vue.jsとはHTMLの要素をブロックとして使えたり、単純なHTMLの繰り返しを簡単に一つのコードに呼び起こす事ができます。
また、javascriptではユーザーから値を入力しただけでは処理を実行させるコードを書くのは非常に
時間がかかります。したがって、最後にボタンなどを設置して処理をします。
ですがVue.jsを使う事で値を入力している時でも処理を行う事が出来ます。
Vue.jsの導入方法
基本的に、jQueryと同じです。
主に２つの方法がある
- Vue.jsをダウンロードし、読み込む方法
- Vue.jsCDNをscriptに記述する方法
Vue.jsをダウンロードする方法
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>Vue.jsを導入する
こちらはNode.jsという開発環境をダウンロードしてインストールする方法です。
Angular
Angularjsは2012年に,Googleによってリリースされました。
その後継にあたるのはAngularです。バージョンアップではなく、まったく別のフレームワークと呼ばれるほど互換性がありません。
機能としては、CPUやメモリーに負担がかかりにくような設計になっています。
導入はNode.jsからの導入です。
React
MVC
Model,ViewController
の頭文字を取ったものです。それぞれデータ、画面、コントローラーです。
データとは
データベースとやり取りする部分
画面
ブラウザに表示させる
コントローラー
リクエスト処理部分
Ajaxの複雑版を作るのが得意で”webアプリ”を作るのに適している。つまり、Viewが非常に得意なのです
Reatの導入方法
【基本】Node.jsからの導入
Reatの導入は基本的にはNode.jsと呼ばれるものからダウンロードし、開発環境を作ります。
【例外】ReatCDNからの導入
元をただせば、JavascriptなのでCDNから導入する事も出来ます。
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>Reatのフレームワーク
Next.js
- サーバー関連の機能が使える
- アプリケーションの保持
- URLのルーティーングを制作
- 簡易なAPI作成機能
Node.jsから導入可能
Javascriptの基本文
ページが読み込まれた時に処理させる
window.onload = function().{
}テキストを入力し画面に表示させる
<input type="text size="50" id="text1">
<button type="button" data-hover="Thank you" onclick="showTxt()"<div>ボタン</div></button>
<script>
function showTxt()
