概要
-ブラウザに実装されているスクリプト言語
-動きのあるウェブサイト
-javaとは異なる
java script の書き方
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“utf-8”>
<title></title>
</head>
<body>
<script src=“myscript.js"></script>
<script>
console.log(“hello world!”);
</script>
</body>
</html>
コメントの書き方
/*
コメント
コメント
コメント
*/
//コメント
変数
/*
変数 : データにつけるラベル
データ型
-文字列
-数値
-真偽値（true / false）
-オブジェクト
-配列
-関数
-組み込みオブジェクト
- undefined 定義されていない
- null 何もない
*/
var msg;
msg = “hello world!”;
var msg = “hello world”;
console.log(msg)
数値の使用
/*
数値
10
2.5
-2.5
演算子
+ - * / %
+= 代入を伴う演算子
++ -- 単項演算子
*/
var x;
x = 10 * 2; //20
x = 10%3;
x = x +5;
x++;
x--;
console.log(x);
文字列の使用
var s = “hello”;
var s = ‘hello’;
// \n 改行
// \t タブ
s = ‘it \’ s \n a pe \t n.’;
s = “hello” + “world”;
s = “5” + “5”; // “55”
if文の使用
条件分岐
if(条件){
真
}else{
偽
}
比較演算子
<
= <=
=== ==
!== !=
論理演算子
AND &&
OR ||
NOT !
socre > 60 && score <80
var score = 40;
if(score > 60){
console.log(“ok!”);
else if(score > 40){
console.log(“soso...")
}
}else{
console.log(“ng!”);
}
真偽値と三項演算子
真偽値
文字列：空文字以外だったらtrue
数値：0かNaN 以外だったらtrue
true / false
object: null 以外だったらtrue
undefined, null -> false
if(x){
//処理
}
if(x !== ‘ ‘){
//処理
}
三項演算子
var a,b,c;
if(条件){
a=b;
} else{
a=c;
}
a= (条件) ? b:c;
var max, x,y;
max =(x >y) ? x : y;
switch文の使用
breakのつけ忘れ注意
var signal =“red”;
switch(signal){
case”red”:
console.log(“stop!”);
break;
case”green”:
case”blue”;
console.log(“go!”);
break;
case”yellow”:
console.log(“slow down!”);
break;
default:
console.log(“wrong signal”)
break;
}
while文
ループ処理
var i = 0;
while(i < 10){
console.log(i);
i++
}
var i = 0;
do {
console.log(i);
i++;
}while(i <10);
for文の使用
for(var i =0; i <10 ; i++){
console.log(i);
}
break ループ処理を抜ける
for(var i =0; i <10 ; i++){
if(i ===5){
break;
}
console.log(i);
}
continue ループ処理を一回スキップ
for(var i =0; i <10 ; i++){
if(i ===5){
continue;
}
console.log(i);
}
alert,confirm, prompt
//ユーザーに何らかの情報を提示
alert(“hello”);
//OKとキャンセルボタンの提示
var answer = confirm(“are you sure?”);
例）
if(confirm(“本当の削除しますか？”)){
//削除処理
}
//ユーザーから情報を受け取る
var name = prompt(“お名前は？”, “名無しさん");
console.log(name);
関数：複数の処理
function 関数名(){
処理
}
function hello(name){
console.log(“hello” + name);
}
hello(“Tom”);
function hello(name){
return “hello” +name;
}
var greet = hello(“Tom”);
console.log(greet);
ローカル変数
function hello(name){
var msg = “hello” +name; //ローカル変数
return msg;
}
var greet = hello(“Tom”);
console.log(greet);
var hello = function(name){ // 無名関数、匿名関数
var msg = “hello” +name; //ローカル変数
return msg;
} ;
var greet = hello(“Tom”);
console.log(greet);
即時関数
(function hello(name){
console.log(“hello” + name);
} )(“Tom”);
即時関数にすることで、変数をローカル変数にすることが出来る。
複雑なコードを書く際に、安全に変数を使うことが出来る。
setInterval,setTimeout
setInterval
前の処理が終わったかどうか関係無しに次の処理を始めてしまう。->クラッシュしてしまう
var i =0;
function show(){
console.log(i++);
}
setInterval(function(){
show();
}, 1000);
setInterval
前の処理が終わったかどうかを加味する。->繰り返し処理でよく使われる
var i =0;
function show(){
console.log(i++);
}
setInterval(function(){
show();
}, 1000);
ループ処理
var i =0;
function show(){
console.log(i++);
setInterval(function(){
show();
}, 1000);
}
show();
3回表示でストップ
var i =0;
function show(){
console.log(i++);
var tid = setInterval(function(){
show();
}, 1000);
if(i > 3){
clearTimeout(tid);
}
}
show();
配列
配列：グループ化されたデータ
var score_1 = 100, score_2 = 200;
var score = [100, 300, 500];
console.log(score[0]);
score[2]=400;
console.log(score);
var m =[
[1, 2, 3],
[4, 5, 6]
];
console.log(m[1][1]);
オブジェクト
オブジェクト
名前と値
var user ={
email: “email@gmail.com”, //プロパティ
score:80
};
console.log(user[“email”]);
console.log(user.email);
user.score = 100;
console.log(user);
メソッド
var user ={
email: “email@gmail.com”, //プロパティ
score:80
greet: function(name){ // メソッド
console.log(“hello,” + name + “from” + this.email);
}
};
user.greet(“Tom”);
Stringオブジェクトの使用
組み込みオブジェクト
-String
-Array
-Math
-Date
どういうobjectがあるかはmdnへ。
var s = new String(“taguchi”);
var s = “taguchi”; //文字列リテラル
文字列リテラルと文字列オブジェクトは別物であるが、文字列リテラルにメソッドやプロパティをつけるとjavascriptが文字列オブジェクトを利用しようと解釈してくれるため、実行される。
console.log(s.length); //文字数を取り出す
console.log(s.replace(“t”,”T”)); //文字を取り替える
console.log(s.substr(1.3)); //文字も一部を取り出す
Arrayオブジェクトの使用
var a =new Array(100, 300, 200);
//var a =[100, 300, 200]
console.log(a.length);//要素の個数
//unshift -> array <- push 要素を追加
//shift <- arry -> pop 要素の削除
a.push(500);
console.log(a);
a.splice(1, 2, 800, 1000); //要素を途中に追加（削除）
console.log(a)
Math,Dateオブジェクトの使用
Mathオブジェクト
console.log(Math.PI); //π
console.log(Math.ceil(5.3)); //切り上げ
console.log(Math.floor(5.3)); //切り捨て
console.log(Math.round(5.3)); //四捨五入
console.log(Math.random()); //0~1のランダムな数字
Dateオブジェクト
var d = new Date();
//var d =new date(2014, 1, 11, 10, 20, 30);
console.log(d.getFullYear()); //年
console.log(d.getMonth()); //月（ただし、1月が0）
console.log(d.getTime); //1970/1/1からの経過ミリ秒
DOMとは？
console.dir(window); //オブジェクトのプロパティを表示する
console.log(window.outHeight);
window.location.href = ‘http://dotinstall.dom'; //任意のページにリンクする
window.document -今開いているページ
document object model (DOM)
var e = document.getElementById(‘msg’);
e.textContent = ‘hello!’; //テキストを書き換える
e.style.color =‘red’; //スタイルを書き加える
e.className = ‘myStyle’; //スタイルを適用する
var greet = document.createElement(‘p’),
text = document.createTextNode(‘hello world’);
document.body.appendChild(greet).appendChild(text);
//appendChild 子要素の一番下に追加
イベントを設定する
ボタンを押すたびに要素を追加
<button id =“add”>Click!</button>
document.getElementById(‘add’).addEventListener(‘click’, function(){
var greet = document.createElement(‘p’),
text = document.createTextNode(‘hello world’);
document.body.appendChild(greet).appendChild(text);
});