Javascriptの超入門編5

リテラルと定数

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【リテラル】
リテラルとは、プログラムに欠かせない存在で、「値定数」を意味する。
例
year（変数） = 2000（リテラル）；

・文字リテラル

・エスケープシーケンス
先頭「\」を付けた文字のことをエスケープシーケンスと呼び、直接埋め込めない特殊文字を文字列リテラルに含めるために使用されます。


・数値リテラル


・定数
const定数で変数宣言をすると、途中から値は替えられない！


・文字列を整数値に変換するには⇔値を文字に変換するにはstring(値)を使う


・文字列を浮動小数点に変換するには


・キーボードから値を入力するには
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜/head＞

＜body＞
＜script＞
var name = window.prompt("名前を入力してください");
document.write("＜h1＞こんにちは" + name + "さん＜/h1＞");
＜/script＞
＜/body＞

＜/html＞
入力

「OK」ボタンを押す

表示

Javascriptの超入門編4

Javascriptで計算をする

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【計算する】
1.コンソールで計算してみる


2.プログラム内で計算結果を表示する
「calc1.html」ファイルをプログラムを書き、ライブプレビューモードを押す


Chromeのコンソールに表示される


3.変数及びリテラル（値）を使う
・プログラム

Chromeのコンソールに表示される


4.代入演算子
これらの演算子は変数に代入する値に何らかの演算を行って、その結果を再度同じ変数に代入する場合に便利です


プログラム

プログラムを書き終えたら、保存する

Chromeのコンソール表示

Javascriptの超入門編3

JavascriptプログラムをHTMLファイルに書く

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【scriptエレメントについて】
・JavascriptスクリプトをHTMLファイルの＜script＞～＜/script＞に書く必要がある。
例
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞

　＜script＞
　　Javascriptスクリプト1　
　＜/script＞

＜/head＞

＜body＞

　＜script＞
　　Javascriptスクリプト2　
　＜/script＞

＜/body＞
＜/html＞
・scriptエレメントの記述する箇所は、上の例でしめす様に2箇所あるが、普通は＜body＞～＜/body＞に書く。
例文「pos1.html」


webブラウザ


■外部ファイルを使うには
htmlファイル一つの場合


・外部ファイルを使った場合

・「sample1.js」ファイル

・webブラウザ

Javascriptの超入門編2

Javascriptの超入門編2

Google　ChromeのコンソールでJavaScriptを実行してみる。

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【サンプルを用意】
任意のフォルダにtest.htmlを作る
test.html


【Google Chrome】
・Chromeを立ち上げ、test.htmlをドラッグ＆ドロップする

・表示される

・デベロッパーツールを起動する


■ELegantパネル


1.矢印の付いた「Select an element in the page to inspect」をオンする


2.その要素がハイライト表示に成る


3.好きな要素をクリックすると、ELegantパネル内の対応したHTMLスクリプトがハイライト表示される


■Consoleパネル
コンソール（Consoleパネル）を使用すると、JavaScriptのコマンドを実行したり、プログラムの値を確認することができる。

・コマンド「alert("こんにちわ")」を打ち、[Enter]キーを押す

・「OK」ボタンを押す

「undefined」は未定義という意味
・コマンドdocument.write("

JavaSript入門

")を打つと

・コンソールに文字列を表示する
＞console.log("javaScript","プログラム",9899)
javaScript プログラム 9899
＜undefined

Javascriptの超入門編1

Javascriptの超入門編1

これは、Javascriptとことん入門の本をベースに書いたもので、この方法が正しいというものでもありませんのであしからず。

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【Javascript開発に必要なもの】
1）Webブラウザ
一般的に、Javascriptプログラムを開発するにはGoogle　Chromeが便利なので、Google　Chromeをインストールする。Window10では自動的に入っている。

2）エディタ
テキストエディタは、Windowｓの「メモ帳」や、Macの「テキストエディタ」でも良いが、ここでは高機能を備えたBracketsを使う。
Brackets→Adobe社が開発するオープンソースのソースコードエディタで、C言語・C++・CSS・HTML・Java・JavaScript・Perl・Python・Ruby・VBScriptなど、38種類以上の言語をサポートし、主にHTML/CSS/Javascript用のパワフルなエディタとして一般的に使われている。また、様々な拡張機能をインストールすることができる。

【Bracketsのインストール】
・ダンロード先
→Bracketsを初心者がインストールする方法
あるいは、http://brackets.io/


・インストール
ダンロードが成功すると、「Brackets.Release.1.13.msi」現れる。それをダブルクリックすると展開される


【Braketsの操作】
・起動する
Braketsのアイコンをクリックする


・index.htmlが表示される


【Bracketsの拡張機能】

1.Beautifyのインストール

成功すると

続いて
Extensoins Rating、Emmet、Color Hint、W3CValidationなどの拡張機能をインストールし閉じる


【BracketsからChromeを呼び出す】
・Bracketsのライブプレビュー機能
「ライブプレビューモード」を押す


・ブラウザ表示