JavaScript基礎構文メモ

JavaScript
このエントリーをはてなブックマークに追加
●コメントの記入方法
//
/* */
 
 
●外部ファイル参照
<script type="text/javascript” src=“JSファイルのパス””></script>
 
 
 
●変数、定数、関数
var 変数
conset 定数
function 関数
 
●if,switch,for,while
if(条件){
     処理
}else(条件){
     処理
};
 
switch(条件式){
     case 値1:処理;
     break;
     case 値2:処理;
     break;
     default 値3:処理;
     break;
}
     
for(var i=0;繰り返し条件;i++){
     処理
}
 
for-in
for (var i in xxxx){
console.log(x);
}
xxxx関数内のobjectを出す
 
 
while(繰り返し条件){
     処理
}
 
var a,b,c;
if(条件){ a=b;} else {a=c;}
⇒ a=(条件)?b:c;
 
 
●配列
var 配列名=[x,y,z];
複数配列
[[1,2],[3,5]]
 
配列オブジェクト
.unshift先頭に追加
.push末尾の追加
.shift  先頭を削除
.pop　末尾を削除
.splice(1,2、800,1000) (1〜2)この部分を削除 800、1000を追加
.substring(x,y)
xからyまでの文字順を吹き出し
 
 
●オブジェクト object
 
var xx ={
     sa:  ,
     xx:  
}
 
var xx = new Object();
加える方法は2つ
myObj[“name”] = “Charle”;   Bracket notation
myObj.name = “Charle”;    Dot notation
 
こういうやり方もあるよ
function Person(name,age) {
  this.name = name;
  this.age = age;
}
 
var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 25);
 
 
オブジェクトの中にオブジェクト（Array）
function Person (name, age) {
    this.name = name;
    this.age = age;
}
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
 
 
 
myObj.hasOwnProperty(xxx)
xxxは存在するか、存在しないか
true of false
 
 
 
●ダイアログ
confirm();⇒true or false
alert(); 
prompt(“質問文”,”初めの表示文字”)⇒キャンセルだとnulと表示される
 
console.log(typeof xxxx);
typeof＝この関数は何？string?number?object?
というのを表す
 
 
●パスワード入力
 
pw=prompt(“パスワードを入れてください”,””);
if(pw==“abcde”){
location.href=“kakure.html”;
}else{
alert(“パスワードが違います！”);
}
 
 
●リンクへのジャンプ
location.href=“"
 
 
●input type/// 
input type=“text”　文字入力可能
input type=“button” ボタンの作成     基本idで関連つける
 
 
●DOM
document.getElementById(“xxx”)で取得が可能
getElementsByTagName = Tagを引っ張ってくる(複数)
 
.value⇒取り出す
.innerHTML⇒出力する
.onclick クリック時
 
document.
 
textContent = “”　文字内容の変更
style.cplor = “” 色の変更
className = “” クラスの適用（以前作ったオブジェクトファイルの適応）
 
createElement() エレメント(p h1)などの作成
createTextNode() テキストの作成
document.body.appendChild 新しく追加
fourthLink.href=“”テキストリンクの使い
 
var fifthLi = fourthLi.cloneNode(true);要素の下のに同じのを作成
fifthLi.innerHTML = “<a href=“xxxx”>five</a>”fifthLi(HTML文)の部分に要素を追加
mylist.appendChild(fifthLi)
mylist.inserBefore(fifthLi,fourthLi)
.inserBefore(入れたい要素、入れたい部分の一個前の要素)
 
addEventListener (処理、関数)イベントを紐つける
“click”,function(){};
 
 
●Math関連
Math.random　0〜1までの中の数字をランダムで出力する
Math.PI　円周率
Math.ceil()切り上げ
Math.floor()切り下げ
Math.round()四捨五入
.toFixed(x)　小数点どこまで残すの?
 
 
●Dataオブジェクト
var d = new Date();　その時の時間
new Date(日にちを入れる)その時の時間
.getFullYear()その年
.getMonth()その月
.getTime() 1970/1/1からの経過ミリ秒
 
●その他
.sort　小さい順に並び替える
 
 
 
●setInterval,setTimeout
 
秒＝1000
処理が重いと次々と行われるので…
 
setInterval
 
function show(){
     console.log(i++)
}
 
setInterval(function(){
     show()
},1000);
setTimeout
一回しか行わない
繰り返すには…
 
var i = 0;
function show(){
     console.log(i++);
     setTimeout(function(){
          show();
     },1000);
}
show();
 
functionの中に入れる
 
一定の回数を繰り返したら止めたい
clearTimeout
 
function show(){
     console.log(i++);
     var tid = setTimeout(function(){
     show();
},1000);
     if (i>3){
     clearTimeout(tid);
}
}
show();
 
 
 
●即時関数
(function(){
     javascript
})();関数全体を()で囲む
 
全てのjavascriptを最後にこれで囲む
 
●小ネタ
 
・配列内の物をランダムで出したい
omikuji=[“x”,”y”,”z"];
var result=Math.floor(Math.random()*omikuji.length)
omikuji[result]　ランダムでomikuji内の要素を出してくれる
 
 
・経過時間を計算したい
// Data オブジェクトを使用する場合
var start = new Date();
// 時間を計りたいイベントをここに置く:
doSomethingForALongTime();
var end = new Date();
var elapsed = end.getTime() - start.getTime(); // 時間をミリ秒で表す

// 静的メソッドを使用
var start = Date.now();
// 時間を計りたいイベントをここに置く:
doSomethingForALongTime();
var end = Date.now();
var elapsed = end - start; // 時間をミリ秒で表す
 
・数字を回す(スロットマシーン参照)
     function runSlot(n){
          document.getElementById("num"+n).innerHTML=Math.floor(Math.random()*10);
          timers[n]=setTimeout(function(){
               runSlot(n)
          },50)
     //ここでrunSlot自体を何回も繰り返す⇒math.randomを何度も繰り返す事が可能
     };