tech1000+

プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

もう迷いたくない。基本のjavascriptサマリー

  • 2017年7月28日
  • 2017年8月3日
  • JavaScript
  • 839view
  • 9件
JavaScript

JavaScriptを習得したいと思っていろいろ触っているときに、古い情報と新しい情報が混在して困った。既にJavaScriptについての理解ができていれば、それらの情報に困ることもないのだろうが、それ以前の問題の私。
なので、「JavaScriptの基礎の基礎を書きながら覚える」かつ「最近の書き方などをTipsとしてメモ」していきます。まずはファイルの準備や表記方法についてと、簡単な関数を使ってみるというところまで。
※間違った記法などについては優しく指摘して下さい。。

目次

準備

2つのファイルを作成

適当なディレクトリの中に２つのファイルを作成。
とりあえず「hoge.html」と「fuga.js」を作成する。
＊名前は任意で良い(以降のhoge,fugaも同様)。
htmlファイルに必要最低限のhtmlを入力。

hoge.html
[html] <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
[/html]

htmlファイル「hoge.html」から「fuga.js」を読み込む。

hoge.html
[html] <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<!– js load –>
<script src="fuga.js"></script>
</body>
</html>
[/html] ※後々コードが長くなってくることを踏まえて、最初から外部ファイルとして準備しておく。

scriptタグの読込場所について

前提としてscriptタグはどこに書いても問題ない。
多くはheadタグ内か/bodyタグ直前に記述されている。
最近では/dodyタグ直前がいいとされている。

★理由
JavaScriptファイルを読み込んでいる間は、HTMLファイルの読み込みが中断されるため。

head内に記述した場合
JavaScriptを読み込んでからhtmlの読込が行われる。
先読みしておきたい場合などはhead内に記述。

/body直前に記述した場合
html要素がすべて読み込まれた状態でJavaScriptの読込を始めるため、表示速度などの処理がスムーズになる。

async属性を使って非同期で読み込む
html5から使えるようになったasync属性を使うと、レンダリング速度の問題が解決されるため、head内記述のデメリットを解消できる。しかし非同期で読み込むことで実行される順番が担保されなくなってしまうので、状況に合わせた使い回しが必要。

type属性について

scriptタグを見ていると、下記のようにtype属性が付いている表記をみることがあると思います。
[html] // ひと昔前の書き方
<script type="text/JavaScript" src="fuga.js"></script>
// 現在
<script src="fuga.js"></script>
[/html] しかし、html5ではデフォルトの属性がJavaScriptのため、表記は省略できます。書いても問題はないが、せっかくなので省略して簡単に書くのが吉。

参考
jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか？
https://teratail.com/questions/14600
JavaScriptの記入場所
http://www.pori2.net/js/kihon/2.html
async属性で簡単！非同期でjsを読み込みレンダリングを速くしよう
http://www.aiship.jp/knowhow/archives/20559

JavaScriptをちょろっと書いてみる

コメントアウト

fuga.js
[javascript] // 一行のコメント

/*
複数行をコメントアウトしたいときは
こっちを使用
*/
[/javascript]

html,cssのコメントアウト

混在しないようhtml,cssでのコメントアウトを復習
[html] html
<!– htmlでのコメントアウト(複数行でも同様) –>
css
/* cssでのコメントアウト(複数行でも同様) */
[/html]

alert関数

fuga.js
[javascript] /* alertダイアログを表示させる */
alert(‘hoge’);
[/javascript]

文字列の扱いについて

JavaScriptで文字列を出力する場合は「ダブルクォーテーション」か「シングルクォーテーション」で囲む。
どちらを使用してもいい。

変数を使ってalertダイアログを表示させる

fuga.js
[javascript] /* 変数を宣言 */
let hoge = ‘アラート’;
/* alertダイアログを表示させる */
alert(hoge);
[/javascript]

変数について

現在使える変数の宣言にはvar,let,constがある。
古い書籍などでは、「とりあえず変数はvar」のように書いてある。
var,letの違いはスコープ(可視範囲、参照できる範囲)の違い。
letはブロックレベルでのスコープ。
varは関数スコープ。
constで宣言した変数は変更できない。
コーディング規約で一般的とされるのをまとめると、変数はわかりやすいようにletを使う、定数にはconstを使う、varは使わない。
記法として、変数はローワーキャメルケース、定数は大文字+アンダースコアが使われる。どちらも厳守する必要はないが、作法的な部分として。

varとletのスコープについての補足

[javascript] //consoleには2,2と表示される
function ptVar() {
var fuga = 1; {
var fuga = 2;
console.log(fuga);
}
console.log(fuga);
}
ptVar()

// consoleには2,1と表示される
function ptLet() {
let fuga = 1; {
let fuga = 2;
console.log(fuga);
}
console.log(fuga);
}
ptLet()
[/javascript]

配列

連番がついた変数の集まりのこと。

配列の使い方

[javascript] let hoge = [];
hoge[0] = 100;
hoge[1] = 200;
hoge[2] = 300;
hoge[3] = 400;

//インデックスの要素全てをアラートで出力する
alert(hoge);
//インデックス番号が2の要素を表示出力する
alert(hoge[2]);
[/javascript]

連番は0から始まる

数える順番は1～ではなく、0～から始まる。
これはプログラミングの共通のルールのようなもの。

配列リテラル

「[]」を使用したものを「配列リテラル」と呼ぶ。

配列の使い方２

上記の配列の使い方と同様のことを、以下の書き方でも実行ができる。

[javascript] let hoge = [100,200,300,400];

//インデックスの要素全てをアラートで出力する
alert(hoge);
//インデックス番号が2の要素を表示出力する
alert(hoge[2]);
[/javascript]

配列数を取得する

[javascript] // 配列に５つの要素を入れる
let hoge = [‘田中’, ‘斉藤’, ‘佐藤’, ‘山田’, ‘加藤’];
// 配列数を取得する
alert(‘メンバーの数は’ + hoge.length + ‘人です。’);
// 2番目の要素を配列数から取得する
alert(‘最初のメンバーは’ + hoge[hoge.length – 5] + ‘です。’);
[/javascript]

「.length」プロパティの注意点

lengthプロパティで取得するのは配列に含まれる要素の数。
インデックス番号は0から数えるので、lengthプロパティを使って配列の要素を指定して取り出す場合は
「length – 1」とする必要がある。

HTMLの操作

HTMLの属性を操作する

hoge.html
[html] <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>JavaScript Lesson</h1>
<p id="js">ジャバスクリプトによる操作</p>
<!– js load –>
<script src="fuga.js"></script>
</body>
</html>
[/html]

fuga.js
[javascript] // 変数「docElem」に「jsid」という要素を取得するメソッドを書く
let docElem = document.getElementById(‘jsid’);
// 文字色を白に指定
docElem.style.color = "#fff";
// 背景を黒に指定
docElem.style.backgroundColor = "#000";
[/javascript]

プロパティに「-」は使えない

CSSだと
[css] font-size:;
text-align:;
background-color:;
[/css] といった表記ですが、javascriptで「-」は演算子の扱いになってしまう。
よって「-」はなくして接続部の文字を大文字にする。

HTMLの中身を操作する

hoge.html
[html] <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>JavaScript Lesson</h1>
<p id="js">ジャバスクリプトによる操作</p>
<!– js load –>
<script src="fuga.js"></script>
</body>
</html>
[/html]

fuga.js
[javascript] // 変数「docElem」に「jsid」という要素を取得するメソッドを書く
let docElem = document.getElementById(‘jsid’);
// 変数のinnerHTMLに文章を代入する
docElem.innerHTML = ‘中身を変更’;
[/javascript]

関数

簡単にいうと、処理を書いて名前を付けておくこと。
いつでも呼び出せるようになる。

関数の定義

[javascript] // 関数を定義
function hoge() {
// 処理を記述
alert(‘fugafuga’);
}
// 関数の呼出
hoge();
[/javascript]

関数宣言文「｛｝」に「；」はいらない

つけてもエラーにはならないが、本来必要ないもの。

引数を使った関数の定義

[javascript] function hoge(ex) {
let a;
a = ex + 10;
alert(a);
}
hoge(100);
[/javascript]

日本円をドルに変換する処理を作ってみる（１ドルのレートは110円とする）
[javascript] // 関数hogeを定義
function hoge(yen) {
// 変数dollerにパラメータを110で割る処理を書く
let dollar = yen / 110;
// 値を表示する
alert(yen + ‘円は’ + dollar + ‘ドルです’);
}
// 引数の値を入力ダイアログから取得
let yen = prompt(‘金額を入力’);
// 関数の呼出
hoge(yen);
[/javascript]

関数と引数を使って画面を操作する

[javascript] function textChange(hoge, size) {
document.getElementById(hoge).style.fontSize = size;
}
textChange(‘hoge’, ’50px’);
[/javascript]
参考
JavaScript 入門編
http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r3
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～
http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1
2017年版、5分でわかるJavaScript入門(ES6対応版)
http://paiza.hatenablog.com/entry/JavaScript_intro