JavaScript

2016.05.19

JavaScript
ブラウザがサポートしているスクリプト言語にはJavaScriptとVBScriptがある。
でもVBScriptはIEでしか利用できないから使用するスクリプト言語は基本的に指定しなくてもいい。
ただすべてのブラウザがそうであるとは限らないのでイベントハンドラなどに
スクリプトに直接記述するような場合に使用されるデフォルトのスクリプト言語を
指定しておくといい。それが以下の記述。
<head>
　　<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
</head>

HTMLにJavaScriptを記述する場合

<script>

</script>
このscriptの間に記述する。

外部ファイルのJavaScriptをHTMLで読み込む場合

htmlファイルで、
<script type=”text/javascript” src=”./sample.js”></script>
と書けば、sample.js内の記述が使える。
ファイルに記述したスクリプトが読み込んだ側で直接記述されているように扱われる。なお、スクリプトは読み込む側のファイルとは別のドメインのサーバーにあっても読み込める。
その場合、src=http://sample.jp/xxx.jsと書く。

スクリプトが記述された外部ファイルと、読み込む側のHTMLページの文字コードが異なる場合がある。
その場合、<script>要素に<charset>属性を記述し、外部ファイルの文字コードを指定する。

JavaScriptがオフになっている場合

<noscipt></noscript>
このタグの間に記述したものが、JavaScriptがオフになっているページに表示される。

JavaScriptによる変数、関数の宣言

var 変数名;

配列の場合
var 変数名;
変数名=[“値1″,”値2″,”値3”];
変数名.push(‘値’);と書くと、配列の末尾に値を入れられる。
変数名.unshift(‘値’);と書くと、配列の先頭に値を入れられる。

連想配列の場合
var 変数名;
変数名 = {キー1:”値1″ , キー2:”値2″}
アクセスするには、変数名.キー

JavaScriptに変数の型はない。
なんでも入る。

let 変数名としたら、その変数名で再び定義することができなくなる。代入はできる。
const 変数名としたら、再定義も代入もできない。
また、スコープもletとconstは局所的になるらしい。

関数は
function(){
処理
}
で記述する。()の中に引数を入れられる。
function(int i)でやったらうまくいかなかった。javascriptは
function(i)でいい。

if(!変数名)
javascriptは、変数が以下の状態だとfalseとみなされる。
空文字、null、underfined、数値の0、NaN

変数のキャスト
parseInt(str, int) stringをintに変えるメソッド。第2匹数は基数。基数とは10進数、2進数など。

Document.Formsプロパティ

文章を表すDocumentインターフェースが持つプロパティの1つ。
htmlにあるformタグを全て格納する。

Document.forms[0]や、Document.forms[“フォーム名”]とすることで任意のフォームを取得できる。
Document.forms[0].elements[“部品名”].valueと書くことで、フォームないの部品の値を取得できる。

window.open(URL,ウィンドウ名,オプション)

新しいウィンドウを開くメソッド。
window.open(‘https://nisuku.com/’);
と書くと、引数に指定したURLを新しいタブで開くことができる。

document.write()

ブラウザに文字などを表示できる。
document.write(“aaaa”);
と書けば、ブラウザに「aaaa」と表示できる。

var num=10;
document.write(num);
と書けば、10と表示される。

document.write()
HTML文書を書き換えるメソッド。
それまで定義していたfunction()も消える。
var page = window.open(“URL”,”名前”,width=100 height=100);
page.document.write(“ああああ”);
こうして新しいウィンドウを開いて、そこに文字を書けばいい。

document.writeln()
文字列の後ろを改行する。しかしHTMLドキュメント内での改行のため、ページ上では
半角スペースとして扱われる。

IDからコントロールを参照する

var select = document.getElementById(‘sampleSelect’);
と書くと、selectという変数にボタンなどのIDを格納することができる。

<select name=”name” id=”aaaa”>
　　<option value=”red”>赤</option>
　　<option value=”blue”>青</option>
</select>

var select = document.getElementById(“aaaa”);
と書くことで、上のチェックボックスの参照を行える。
select.selectedと書けば、値がセレクトされているかなどの判断ができる。
document.getElementById(“aaaa”).value=”入れたい文字”;
と書けば、aaaaのコントロールに入れたい文字を入れることができる。

また、
var str = document.forms.フォームID.テキストボックスID.value
としたら、strに指定したテキストボックスの値を保存できる。

タグの中身を書き換える

innerHTML()メソッドでタグの中身を書き換えることができる。

<div id=”aaaa”></div>
というタグをHTML内に作っておき、javascriptで

target = document.getElementById(“aaaa”);
target.innerHTML = “変更後の文章”;
と書いたら、
divを表記した部分に「変更後の文章」と表示される。
ただし、同じHTML文書内にjavascriptを書く場合、javascriptを上に書くと
<div id=”aaaa”></div>
でdiv内の記述が空白に上書きされてしまうため何も変化が起こらない。

ボタンを押したら関数を発動させる

javascript内に
<script>
　　function 関数名(){
　　　　
　　}
</script>
と書き
HTML内で
<button onclick=”関数名()”>これを押したら関数発動</button>
と書いたら、押したら「関数名」という関数の処理が行われるボタンを作れる。

submitをキャンセルする

form部分に、onsubmit=return 関数名と書く。
<form id=”aaaa” onsubmit=”return Cansel()”>
<input type=”text” id=”bbbb”>
<input type=”submit”>
</form>

javascript内に、
function aaaa(){
if(new String(forms.aaaa.bbbb.value)== 0){
return false;
}
}
と書けば、テキストボックスに値が入力されていなかったら送信をキャンセルする処理にできる。

セレクトボックスを変更したら画面を変更する

<select onChange=”関数名”>
</select>
と書けば、セレクトボックスを変更したときに指定した関数を発動させることができる。

イベント

イベントリスナー
イベントの発生を監視するもの。

イベントハンドラ
イベントが起こった時に実行された時に実行されるコードのブロックをイベントハンドラという。
イベントに対応する応答として、コードのブロックが実行されるよう定義することをイベントハンドラを登録するという。

イベントの種類
onChangeイベント
フォームの内容が変更されたときのイベント。コンボボックスが変更されたり、テキストボックスの中身が書き換えられた時のイベント。

onblueイベント
フォーム部分からフォーカスを外したときのイベント。

addEventListener

クリックなどのイベント時の処理を設定するメソッド。

htmlでボタンを設定。
<button id=”aaaa”>ボタン</button>

javascriptで記載。
var btn = document.getElementById(“aaaa”);
btn.addEventListener(“click”,関数名,false);

これで関数名で指定した関数を呼び出す。

(例)ボタンにマウスが乗ったとき
btn.addEventListener(“mouseover”,関数名,false);
このとき、上の記述の前に関数の記述がないとエラーになった(関数の記述が後だったらダメ)。

オブジェクト

プログラム内で使用するための様々な要素や機能をまとめたもの。
Array,Boolean,functionなどがオブジェクトらしい。
例えばDataオブジェクトは現在の時刻をプロパティとして持ち、時刻を返す関数を持つ。
プロパティとメソッドを合わせてメンバと呼ぶらしい。
プロパティは、キーと値の2つを持つ。キーが変数名で、値が値？

var 変数名 = new オブジェクト名();
で変数にオブジェクトを取得できる。
変数名.関数名()で、関数を使える。

空のオブジェクトは以下の記述で作れるらしい。
const obj = {}
const obj = new Object();

以下のように書くことで、プロパティを保持するオブジェクトを作れる。
const obj = {
name: “太郎”,
age : 10
}

Object.Keys(オブジェクト)で、そのオブジェクトのプロパティの一覧を取得できる。
var key = Object.Keys(obj);
console.log(key);で、[‘name’,’age’]と表示される。

windowオブジェクト

windowオブジェクトは、javascriptに最初から用意されている。
document.getElementById()などのメソッドは、windowオブジェクトのメソッド。
window.document
window.alert
などがあり、windowオブジェクトのメソッドは、windowを省略して書くことができる。
alert(“aaaa”);など。

innerHTML

html要素を読み込んだり、書き込んで変更させることができる。
<div id=”aaaa”>これが読み込まれる</div>
var hensu = document.getElementById(“aaaa”);
console.log(hensu.innerHTML);

と書いたら、コンソールには「これが読み込まれる」と表示される。

hensu.innerHTML=”変更後”
console.log(hensu.innerHTML);
と書いたら、「変更後」と表示される。

setInterval、setTimeout

一定時間経過後に処理を行う関数。

setInterval(関数名,時間);
とすると、一定時間ごとに指定した関数の処理を繰り返す。

setTimeout(関数名,時間);
とすると、一定時間たった後に指定した関数の処理を一度だけ行う。

リテラル

コードに直接書かれる値。
var age = 18; let name = “アキラ”;

関数もリテラルにできる。リテラル関数。名前を持たずに定義されるので匿名関数、無名関数と呼ばれる。
const add = function(a,b){return a+b;}; // 名前を持たずに定義され、変数addに割り当てられる。

アロー関数

リテラル関数を省略して記述できる。
var aaaa = (num1 , num2) => num1 + num2;
こう書くことで、aaaaという変数に引数で渡したnum1とnum2を合計した値を入れることができる。
functionや、returnを省略できる。

var aaaa = num1 => num1 * 2;
引数が1つの場合は()を省略できる。

var aaaa = () => 1+1
引数がない場合は()だけ書く。

forEach

Arrayオブジェクトの関数。
var fruits = [“apple”,”banana”,”orange”];
fruits.forEach(function(item){console.log(item)});
と書くと、fruitsの中身を1つ1つコンソールに表示する。
引数itemは配列の中身1つ1つを参照するらしい。
itemじゃなくても引数名はなんでもいいらしい。

argumentsオブジェクト

関数に渡された引数を参照できるオブジェクト。

fanction aaaa(num1 , num2){
　　return arguments[0] + arguments[1];
}
と書いたら、戻り値はnum1とnum2を合わせた値になる。
arguments[2]と書いた場合は、何も参照されない。
arguments.lengthで、引数の数を求めることができる。
argumentsは関数内でのみ使うことができる。

即時関数

定義した場所で即発動する関数。
(function(aaaa){
　alert(aaaa);
}(“即発動します”))
という風に、関数を()で囲んで記述する。

非同期処理

関数が実行されたとき、関数の処理を行う前に1度関数を終了し、処理を進め、関数の処理が終わった後で値を返すこと。

Ajax

Asynchronous Javascript + XMLの略。
javascriptとXMLを使って、非同期でページを更新する技術。
非同期とは、受け手側と送り手側で、データのやり取りをするタイミングを合わせないこと。
最近はデータのやり取りにXMLではなくJSONというファイルを使うらしい。

execCommand

選択された文字列をどうこうする。
document.execCommand(‘Copy’)と書いたら、選択された文字をコピーする。

要素にcontenteditableを加えた上で、その要素内の文字列を選択し、
document.execCommand(‘foreColor’, false, ‘#e51c23’)と書いたら、選択された文字を赤色にできる。ただしtextarea内の文字列などは赤色にできなかった。

高階関数

関数を引数に持つ関数。

javascriptでは関数を変数に割り当てることができる。
const　addFunc = function(a,b){ return a+b;} //変数に関数を入れる
console.log(addFunc(a,b)); //変数に入れた関数を使う

function addFunc(a,b){return a+b;} //関数を定義
const 変数名 = addFunc; //()を付けずに代入することで変数に関数を割り当てられる

関数の中に関数を値として入れる
function doTwice(func) { func(); func(); } //引数で取得した関数を2回実行する
function hello(){ console.log(‘Hello’);} //関数を定義
doTwice(hello); //helloの関数を値としてdoTwiceに渡す

function doTwice(function(){ console.log(‘Hello’); }); と書くことで、doTwiceに渡す関数をその場で定義することもできる。

ラベル

処理にラベルを付けられる。変数名とかぶってもいい。違うブロック内ならラベル名がかぶってもいい。
loop:
for(i=0;i<10;i++){console.log(“aaaa”);}

オブジェクト初期化子

var object={
age: 10;
aaaa: function(){
console.log(this.age);
},
}
これはobjectというオブジェクトを生成し、変数と関数も同時に定義している。
console.log(object.age);や
object.aaaa();という使い方ができる。

Promise

非同期処理が終わった後に、別の関数の処理を呼び出せる。
プロミスは定義された場所でプロミス内の関数が実行される。
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
resolve(“渡したい値”);
}, 1000);
});

promise.then(
function(result){
//resolveされた場合の処理を行う
cosole.log(result); // 渡したい値と表示される
}
fcuntion(reject){
//rejectされた場合の処理を行う
}
);

Promiseの中には、resolveとrejectをいくつ書いても最初の1つしか有効にならない。
new Promise(function(resolve){と書けば、resolveした場合のみを返せる処理を書ける。

async

関数の前にasyncをつけると、その関数はpromiseを返すようになる。promiseを返すとは、resolveかrejectを返すことだと思う。
async function taskA(){
return 100;
}
taskA().then(function(value){ console.log(value); }); //100と表示される。
promiseの返り値は、valueとして取得できる？

await
asyncをつけた関数の中で、awaitを描くと、thenの役割を果たしてくれるらしい。
acync function taskA(){ return 100; }
acync function exection(){
const result = await taskA();
console.log(result); // 100と表示される。
}

commonJS

元々ブラウザでのみ使用されていたjavascriptを、サーバーサイドで使うために標準仕様を定められたのがcommonJS

require()
JSファイルをモジュール化して、require(ファイル名？)で読み込む。

typeof演算子

値のデータ型を返す演算子のこと。
typeof 1 = number
typeof ‘Hello’ = string
typeof true = boolean
typeof null = object

if(typeif 1 == “number”)
と、numberという文字列と比較することもできる。

apply

配列を使って関数を呼び出す。
関数名(関数の対象となる要素,配列)と書く。
関数の対象となる要素とは、thisの参照先のこと？

var list = function(){
for(var i =0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
var args = [1,2,3];
list.apply(window,args);
と書くと、1,2,3と表示される。

callでも同じようにthisの参照先を記載した呼び出しができる。
ただし引数に配列ではなく、1つ1つ値を「,」で区切って指定する。
list.call(window,1,2,3);

デコレーター @

クラスやメソッドに機能を追加するもの。

@type

/** @type number */
var num = 1;
と書いたら、numをnumberと指定できる？
これはデコレーターとは別？

underfind

変数を定義し、値を代入する前の状態。
nullとは同じようで少し違うらしい。nullは、変数を定義し、そこにnullというシンボル？を入れた状態らしい。
if(a==underfind) と書くと、nullでもunderfindでもtrueとなるらしい。
if(a===underfind)と書くと、nullではfalseになるらしい。

シンボル

ユニークで不変なデータ型。オブジェクトのプロパティ識別子として使われる。
const sym1 = Symbol();
const sym2 = Symbol(“シンボルの説明”);
データ型なのにnew で定義するとエラーになるらしい。

bind

var aaaa = function(){console.log(this)}
aaaa.bind(“田中”)();
とすると、thisを田中として処理を行える。

strictモード

スクリプトや関数の先頭に’use strict’と書くと、strictモードが始まる。
strictモードとは、より厳格にエラーをチェックするモード。
通常のjsではエラーとならない部分もエラーとして扱われる。
NaNに値の代入を行ったり、変数の定義にvarやletなどの修飾子をつけないといけなかったり。

for in

for( var i In オブジェクト名){console.log(i);}
指定したオブジェクトのプロパティを1つ1つ参照してループ処理を行う。
上の文だとプロパティ名が全て表示される。値ではない。

for(var i In オブジェクト名){console.log(オブジェクト名[i]);}
と書くとプロパティの値を1つ1つ表示する。

for(var i In 配列変数名){console.log(配列変数名[I]);}
と書くことで配列変数の中身を1つ1つ参照することもできる。

module export , require

module.exports = {name:’田中’ , age:25}
と書くと別のjsファイルからnameやageなどの値を参照できる。

参照するには
var aaaa = require(‘ファイルのパス’);
と書く。
aaaa.nameなどで参照できる。

prototype

Object.defineProperty

Object.defineProperty(オブジェクト名、プロパティ名、プロパティディスクリプタ)
指定したオブジェクトに指定した名前のプロパティを作る。プロパティディスクリプタの部分でそのプロパティの情報を色々設定できる。
Object.defineProperty(obj,prop,{value:aaaa});
とすると、objに「aaaa」という値を持ったpropというプロパティを作る。

プロパティディスクリプタには他にも以下の記述ができる。
writable:value値の書き換えができるかどうか。デフォはfalse。
enumerable:trueならfor-inループでこのプロパティが列挙される。デフォはfalse。
configurable:falseならこのプロパティの削除、アクセサを持つプロパティへの変更、valueフィールド以外の値の変更が不可能。デフォはfalse。

In演算子　hasOwnProperty

In演算子　オブジェクトのプロパティがあるかどうかを調べられる演算子。
If(“aaaa” In obj){}と書くと、objの中にaaaaという名前のプロパティがある場合、ifの中を通る。

hasOwnPropertyもオブジェクトが指定したプロパティを持っているかを表す。
オブジェクト.hasOwnProperty(“aaaa”);
ただしhasOwnPropertyはpropertyチェーンを遡らない。In演算子は遡る。

some　every

someは配列の中身が１つでも条件を満たしていればtrueを返す。
const arr = [0,1,2];
arr.some(value => value > 1); //trueを返す。

everyは配列の中身が全て条件を満たしていればtrueを返す。
const arr = [0,1,2];
arr.every(value => value > 1); //falseを返す。

乱数　Math.random()

ver rand = Math.random();
0.0~9.9までの値を取得できる。javascriptの乱数はシードを指定しなくても毎回異なる値が出てくるらしい。
rand = Math.floor(rand * 10);
とすることで、0~9までの値を取得できる。Math.floorは、小数点以下を切り捨てるメソッド。Math.ceil()は切り上げ、Math.round()は四捨五入になる。

Audioオブジェクト

音声を読み込み再生できる。
var audio = Audio();

var audio = Audio(‘aaaa.mp3’);
aaaa.play();　再生
aaaa.pause(); 一時停止
aaaa.currentTime = 0; 再生時間を先頭に戻す。
aaaa.preload = ‘auto’ 音声を読みこむタイミングを指定。noneは、再生時まで読み込まない。autoは先に読み込む。metadataはメタ情報のみ先に読みこむ。
aaaa.src(‘music/aaaa.mp3’); 読み込むファイルのパス指定。
aaaa.load(); ファイルをロードする。
aaaa.loop = true; 音声をループするかを指定。

TinyMCE

リッチエディタの一種。
リッチエディタとは、リッチテキストを編集するためのもの。
リッチテキストとは、MicroSoftが作ったテキスト形式で、フォントの変更などが簡単にできる。

jsで追加したtextareaにtinyMCEを導入するには、
tinyMCE.execCommand(‘mceAddControl’ , false ,’textareaのID名’)と書く。

JSON

JSON.stringify() 引数の配列をJSON化できる。
JSON.parse() JSON形式のものを元に戻せる。

eval()

引数で渡した文字列をjavascriptの記述として取得、実行できるらしい。
使い道がよくわからない。

append()

親ノード.append(文字列);
で、親ノードに引数の文字列やノードを追加できる。

BLOBオブジェクト

new Blob(ファイルの内容の羅列,ファイルの種類(MIMEタイプ))
ファイルの種類は、{type:’text/plain’}や{type:’image:png’}などで表す。

fileオブジェクト

ファイルの情報を扱うオブジェクト。
new File(データ,ファイル名,オプション)

File API

jsからクライアント側のファイルにアクセスするためのAPI。

querySelector()

querySelector(‘input’)と書くと、inputタグを取得できる。
querySelector(‘.myClass’)と書くと、myClassクラスを取得できる。
querySelectorAll()メソッドは、指定したセレクタに一致する全てのhtml要素を取得する。

jsのstyleオブジェクト

DOMのstyleオブジェクト。要素のstyle属性を扱うオブジェクト。
jsでstyleオブジェクトを操作して、要素のスタイルを動的に変更できる。

style.displayプロパティ
displayプロパティは、要素の表示形式を指定できる。インライン要素をブロックレベル要素にするとか。

URLインターフェース

URLの解析、構築、正規化、エンコードに使用する。

URL.createObjectURL()
引数で指定されたオブジェクトのURLを取得する。

編集画面

タイトルとURLをコピーしました