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”];

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

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

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

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

window.open

新しいウィンドウを開くメソッド。
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.getElement(“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>
と書けば、セレクトボックスを変更したときに指定した関数を発動させることができる。

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というファイルを使うらしい。

jQuery

javascriptで非同期処理などを行ったりできる何か。

使用するには、以下のテキストをjavascriptに張り付けるだけでいいらしい。
<script type=”text/javascript” src=”https://code.jquery.com/jquery-3.4.1.min.js”></script>

jQueryの書き方。
<script>
$(function(){
$(“body”).css(‘color’ , ‘red’);
});
</script>

冒頭の$(function(){は、略した書き方。
実際は
$(document).ready(function(){
})
という記述で、htmlドキュメントが読み込まれたら、function内の処理を行うという意味になる。

$(“body”)で、body要素に処理を行うという意味になる。
idで指定する場合は、$(‘#id名’)とする。
classで指定する場合は、$(‘.class名’)

$(“body”).css(‘color’ , ‘red’)と書いたら、body要素の色を赤にするという意味になる。
$(“body”).css(“color”)と書いたら、body要素の色を取得できる。
$(‘body’).css(‘color’,’red’).fadeOut()と書いたら、色を赤にしたあとでフェードアウトさせられる。

$(function(){
$(‘#id名’).toggle(100 , function{
処理
});
});
このように書けば、指定したidの項目を消したあとで、functionの処理を行える。

また、クリックしたときの処理は以下のように書く。
メソッドの中に「this」と書けば、その関数を定義しているidを指定できることになる。
$(function(){
$(‘#id名’).click(function(){
$(this).css(‘color’,’red’);
});
});

また、function(e)と書くことで、イベントオブジェクトを取得できる。
イベントオブジェクトでは、マウスカーソルの座標などを取得できる。
$(function(){
$(‘#id名’).mousemove( function(e){
$(this).text(e.pageX);
});
})

jQueryでajaxを使ってServletと連携したコード。
data:{ID:$(“#ID”).val()}
で、IDという名前で、ID要素の中身をサーブレットに送ることを示している。
done(function(result))は、通信に成功したときの処理。resultはサーブレットから
送られてきた値が入る。
$(function(){
　$(‘#ID’).keyup(function(){
　　$.ajax({
　　　url: “DBAccessServlet”,
　　　type: “POST”,
　　　data: {ID:$(“#ID”).val()}
　　})
　　.done(function (result) {
　　　// 通信成功時のコールバック
　　　if(result==0){
　　　　$(“#IDcheck”).text(“そのIDは既に使用されています。”);
　　　}
　　　else{
　　　　$(“#IDcheck”).text(“”);
　　　}
　　　console.log(“成功”);
　　}).fail(function () {
　　　// 通信失敗時のコールバック
　　　console.log(“失敗”);
　　}).always(function (result){
　　// 常に実行する処理
　　});
　});
});

サーブレットのほうでは、以下の記述で、指定した変数を返すことができる。
PrintWriter out = response.getWriter();
out.print(変数名);


ボタンの活性非活性を操作する。
$(“button”).prop(“disabled”,true);
これで、ボタンを非活性にできる。
活性に戻したいときは
$(“button”).prop(“disabled”,false);

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を返す。

編集画面
タイトルとURLをコピーしました