Contents
javascriptの記載方法
htmlファイル内で、scriptタグ内に記載するか、
外部jsファイルを作成して、その中に記載をしてscriptタグを用いて読み込むか
外部jsの読み込み方法
今まで外部jsライブラリは、
scriptタグ内で読み込みはできなかったが、
node.jsと同じような読み込み型で、
import {ライブラリ名}
で読み込みができる湯尾になった。
windowとdocument
window > document
javascriptではwindowオブジェクトとdocumentオブジェクトという第1級オブジェクトが存在する。
windowオブジェクトとdocumentオブジェクトの大小関係としては、
window > documentで、documentはwindow.documentでもアクセスできるし、省略してdocumentだけでもアクセス可能。
windowにもプロパティがあり、
documentにもプロパティがある。
windowの特徴としては、値が
即時関数
scriptタグが読み込まれた瞬間に実行したい処理があるとする。
例えば、上でのスクロール計測など。
これらはスクロール状態計測を作っておくことでユーザーがすぐスクロールをしたとしても、計測が可能になる。
さらには、キーボードなどの操作などだと、すぐそういった制御をするべきなので、即時関数内に記載をしてキーボードのボタン操作制御を行う。
書き方は、
(function(){
})
jqueryを読み込んでいるのであれば、jqueryの書き方で、
$(function(){
});
javascriptの読み込み
javascriptは同期処理を行う。
そのため上から処理を順に行っていくが、同期処理を行うため、
途中でエラーになった場合は後続処理が行われない。
そしてWebAPIが絡んだ処理の場合は、非同期処理が発生する。
javascriptの処理の際は、
途中でサーバとの通信を行う場合は、その処理はサーバに任せるので、javascriptはそのまま処理を続ける。
そのため、javascriptで
window
上でも話した通り、windowオブジェクトは、
画面情報やブラウザ情報を取得するためのオブジェクト。
なので、画面をどのくらいスクロールをしたのかなどを計測したりする場合にwindowを使用する。
主なwindowオブジェクトは以下の通り。
・scrollTop (スクロール距離)
document
上でも話した通り、documentオブジェクトは、
documentはwindowの下なので、
windowは画面全体のことを指すのに対して、documentはDOMの操作に特化したオブジェクトになる。
document.hrefは参照元や、
document.getElementById (htmlのid属性によって、要素を取得。idは1つの要素に固有で設定するので、関数めいのelementは複数形にならない → 戻り値は変数)
document.getElementsByClass (htmlのclass属性によって、要素を取得。classは複数の要素で設定されているので、関数名のelementは複数形になる → 戻り値は配列)
document.cookie (ブラウザに保存されている 1st party cookieの取得)
のように、DOM構築系の操作に特化している。
document.history(2)とかで2つ前のページに戻る
もちろん、window.document.getElementById()でも可能。
jQuery
jqueryでは以下のように記載する。
配列などの処理
javascriptはpythonと同じように関数型言語と呼ばれる。
関数型言語とは、そのまま暗黙の型変換が行われ、自動的に
var str = "test"
と記載すると、strはstring型だが、自動的にstringクラスのオブジェクトとして認識する。
ということは、javascriptが定義しているStringクラスのプロパティやメソッドを使用することができるので、
オブジェクト.split()のように、
文字列オブジェクトに対してsplit()のようなメソッドが定義されている。
そのため、基本的なjavascriptの変数の使い方イメージとしては、
変数.そのクラスのメソッド()
というように使用することができる。
無名関数
javascriptは無名関数を作成することができる。
通常c言語であったり、phpで関数を作成する場合は、
以下のように引数の前に関数名を記載します。
int add(int val1, int val2){
return val1 + val2;
}
function add(val1, val2){
return val1 + val2;
}
javascriptでも、
関数がオブジェクトになるということは、関数に対して関数が実行でき、メソッドチェーンのような処理が可能になる。
第1級型オブジェクトと呼ばれる。
thisの種類
javascriptといえば、thisが豊富にあること。
thisは使い方として、4種類存在する。
- 1. jqueryでの現在参照しているthis
- 2. javascriptで作成したクラスのオブジェクト
- 3.
- 4.
1. jqueryでの現在参照しているthis
javascriptでは、
以下のような場合があったとする。
button id="test" type="button" style="background-color: blue"
上のボタンがクリックされた時、上記のボタンの色を変更したいとする。
そうなった場合、buttonをクリックした際の処理は以下のように記載でき、中身のblueをgreenに変えたいとすると、
$("#test").click(function(){
$("#test").css("background-color: green");
});
と記載する。
上を見ると2回idがtestの要素にアクセスしているが、以下のように書くことができる。
$("#test").click(function(){
$(this).css("background-color: green");
});
まず、#testをクリックした際に上記処理が検知され処理が走ります。この時点でプログラムは、
id="test"の要素を参照していることになります。
そうするとthisにはこのid="test"の要素を参照という情報(正確にはCSSセレクタ)が入ります。
これにより中身の処理で、$(this)と書くことが可能になります。
そして以下の場合を今度考えてみます。
button id="test" type="button" style="background-color: blue"
<
$("button").click(function(){
var _this = "this > li:nth-child(2)"
$(_this).append("p テスト /p")
});
this現在参照しているタグ/要素を基準点として
その子要素の後ろにappendしていく。
※ GTMの変数でjavascript変数を用いる場合、thisは使用できない。
そのためすでに用意されている変数であるCSSセレクタを使用する。
変数名がthisで、変数タイプをCSSセレクタとした場合、
javascript変数内では、$({{this}})で参照可能。
2. クラスの作成
javascriptはクラスの作成ができるが、厳密にはphpやpythonのようにclassで定義するのではなく、
無名関数によって定義する。(普通に関数を作成するのでもできる)
a = function(name, myoji){
name: name
myoji: myoji
function(){
return this.name + this.myoji
}
}
obj = a("aa", "bb")
か、
function a(name, myoji){
name: name
myoji: myoji
function(){
return this.name + this.myoji
}
}
obj = a("aa", "bb")
javascriptの型
toInt
parseInt() 整数に変換
PHPでは暗黙の型変換がないので
phpは
$a = 1としてもaはint型になったりはしない
クロージャーとプロトタイプ
全ての型はobjectクラスを継承している
prototype.