WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

JavaScriptとは

いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。
プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。

プログラム

コンピュータプログラム(英:computer programs)とは、コンピュータに対する命令(処理)を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。

要はコンピューターに命令し、動かす為に使う物(言語)です。


機械語


本来、コンピューターは機械語と呼ばれる、0と1のみで構成されている言葉で動くように設定されています。しかし、人間が機械語を使ってコンピューターに命令するのは人間側に負担が多いので、人にとって比較的使い易い「プログラム言語」を使ってコンピューターに命令していきます。



Javascript

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。
Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。

それどころか、今やJavaScriptは宇宙船のUIにも使用されています。
note.com


JavaScriptと似た名前のプログラミング言語に「Java」というものがありますが、まったく関係がありません。なので混同しないようにしましょう。

スクリプト言語

JavaScriptスクリプト言語です。ではスクリプト言語とはどういうものか?
簡単に言うとスクリプト言語とは簡易版のプログラミング言語で、特に実行環境を整える必要も無く、ソースコードをその場で順を追って解釈する「インタープリタ方式」の言語です。

プログラム初学者にとっては特に難しい設定をしなくて済み、手軽に使えるのがこのJavaScriptです。


なぜJavaScript?


www.rstone-jp.com


image.itmedia.co.jp



主なJavaScriptフレームワークやライブラリー

AngularJS

React

Vue.js

jQuery

また、サーバーサイドでJavascriptを動かす事が出来る「node.js」やSNSとの通信で使用する「JSON」などjavascriptはとにかく汎用性が高く、便利な言語です。

JavaScriptで出来る事

演算処理

プログラミングの基本である演算処理。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します

ドキュメント操作

Webページに文字を表示したり、非表示にする。文字や背景の色を指定する。 Webページを切り替える、など、html内のドキュメントを操作する事が出来ます。

マウス等のイベント処理

クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。
サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。

DOMを使用した処理

DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、サイト内に新しいコンテンツを挿入したり、書き換えたり、削除することが出来ます。

実際にJavaScriptを入力してみる

ブラウザに文字を表示させてみましょう。ブラウザに文字を表示させたい場合はbodyタグの中にscriptタグを使ってJavaScriptの記述をしましょう。
JavaScriptで文字列を表示するには、「window.document.write(' ')」を使います。
ただし、「window.document.write(' ')」は「document.write(' ')」に省略する事が可能です。



JavaScriptの場合、コーテーションはシングルでもダブルでも使用可能ですが、シングルコーテーションが推奨されているので、授業では必ずシングルコーテーションを使用しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<script>
  document.write( 'Hellow World!!' );
</script>
</body>
</html>


プログラムの勉強はweb学習にも向いていて、様々なサービスがありますが、その中でも「progate」は初学者にも向いているので、ぜひ進めておきましょう。

prog-8.com



note.com

Chat GPT

ChatGPTは、OpenAIが2022年11月に公開したチャットボット。OpenAIのGPT-3ファミリーの言語モデルを基に構築されており、教師あり学習強化学習の両方の手法で転移学習されている。
AIチャットボット「ChatGPT」の利用者がわずか2カ月で1億人を突破した。史上最速で広がるこのサービスに対して、米グーグルは「非常事態」を宣言して警戒モード。早速、新サービス「Bard」を発表して巻き返しを狙う。目まぐるしい技術開発に矢継ぎ早な新機能投入。

ダイアログボックス


ダイアローグ

二人以上の人の取りかわす問答。対話。会話。
対義語:モノローグ

<body>
<script>
  alert('初めてのJavascript!');
</script>
</body>