未分類

javascriptとjqueryの文法

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.

配列

-未分類
-

© 2022 Yosshi Blog Powered by AFFINGER5