自分用の備忘録
##Javascriptどこに書く？
htmlに直で書く場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<script>
ここ！
</script>
</body>
</html>
##基礎的な宣言やら条件分岐やら反復やら
#####変数と定数
///////変数///////
var hen = 1;
///////定数///////
const hen = 1;
//////テンプレート文字列///////
let msg = `こんにちは${name}さん。` //${変数}で埋め込み
#####配列
//普通の配列
var array =['佐藤','鈴木','田中']
//オブジェクトリテラル
var array = [key1:value1,key2:value2,key3:value3]
////array////
var arr = new Array(3)
var arr = new Array('1','2','3')
////map////
var m = new Map()
m.set('1','a')
m.set('2','b')
m.set('3','c')
////set////
let s = new Set()
s.add('a')
s.add('b')
#####条件分岐
///////if///////
if(条件式){
処理;
}
else if(条件式){
処理;
}
else{
処理;
}
//超シンプルな条件分岐はexcelの関数みたいに書ける
var x = if(y>=70) ? 'ok':'not ok'
///////switch///////
switch(変数){
case value1:
処理;
break;
case value2:
処理;
break;
default:
処理;
break;
}
#####繰り返し
for(var i=0;i<10;i++){
処理;
}
//中断するときは
if(条件) break;
//途中抜けするときは
if(条件) continue;
///////while///////
while(条件){
処理;
}
do{
処理
}while(条件)
##関数
function method(引数){処理}
//返り値ある時は return
##クラス
#####ES2015より前
var Member = function(fName,lName){
//プロパティ
this.firstname = fName;
this.lastname = lName;
//メソッド
//インスタンスを作った後からでも追加できる。
this.getName = function(){
return this.firstname;
}
}
//プロトタイプオブジェクトのプロパティ
Member.prototype.sex = '男'
//プロトタイプオブジェクトのメソッド
Member.prototype.getName = function(){
return this.firstname
}
//プロトタイプオブジェクトのプロパティ・メソッド（別の書き方）
Member.prototype = {
sex : '男';
getName:function(){
return this.lastName + '' + this.firstName;
}
#####ES2015以降
Class Member {
constructor(firstname,lastname){
this.firstname=firstname;
this.lastname=lastname;
}
getName(){
return this.lastname + this.firstname;
}
//静的メソッド
static method(){
doing
}
//継承
class TeamMember extends Member{
}
##htmlの要素の取得の仕方
//HTML要素から取得
var element = document.getElementById("element_name"); //idで取得
var element = document.getElementByTagName("element_name"); //タグで取得var var element = document.getElementByName("element_name"); //name属性で取得
var element = document.getElementByClassName("element_name"); //class属性で取得
//CSS要素（セレクター)から取得
//速度はgetElementByxxより遅い。
var element = document.querySelector()
var element = document.querySelectorAll()
#####ノードウォーキング
getElementByxxxやquerySelectorはページ全体を操作するため遅い。
var element = document.getElementById('element')
//子ノードを取得
var child = element.childNodes;
//最初の子ノードを取得
var firstchild = element.firstChild;
//最初の子要素を取得
var firstchild = element.firstElementChild;
//最後の子要素を取得
var lastchild = element.lastElementChild;
//次の兄弟要素を取得
var nextbro = element.nextElementSbling;
##要素の属性操作
var element = document.getElementById("id")
//基本的には要素にさえアクセスできれば下記のように属性そのままでアクセスできる。
//valueを操作
element.value = "value";
//idを操作
element.id = "id";
//スタイルを変更
element.style.プロパティ=値;
//ある要素の中の属性値全てを取り出す
var attr = element.attributes;
//タグの中のHTMLを変更
element.innerHTML = "<input type = 'text'>"
//innerHTMLに似てるけど、タグを解釈せずにそのまま出力。だがタグ解釈をしない分、innerHTMLより高速。
element.textContent = "<input type = 'text'>"
##イベントハンドラ
< タグ名 onイベント名="Javascriptのコード">
##tips
#####strictモード
'stirct'