先端基礎学習のjs
20956 ワード
一、データ型
数値タイプ:は、整数値と浮動小数点値を区別しない. すべての数字は64ビットの浮動小数点フォーマットで格納され、JavaおよびC言語のdoubleフォーマット に相当する.で表される最大値は±1.797693134862357 x 10308 である.で表すことができる最小値は±5 x 10-3224 である.
整数: JavaScriptで10進数の整数は、数値のシーケンスからなります. 正確な表現の範囲は-90007199254740992(-253)~90071999254740992(253)である. 範囲外の整数は精度に影響します
文字列のタイプ:
Unicode文字、数字、句読点からなるシーケンスです.文字列定数の先頭と末尾は、単一引用符または二重引用符で囲まれています.JavaScriptには文字タイプがありません.文字列でよく使われる特殊文字の表現.文字列の一部の特殊文字には、右ダッシュ;を付ける必要があります.一般的なエスケープ文字:改行':一重引用符":二重引用符\:右スクライブ
ブールのタイプ:
Booleanタイプには2つの値しかありません:trueとfalse、1と0も表し、実際の演算ではtrue=1、false=0ブール値もon/off、yes/no、1/0がtrue/falseに対応していると見なすことができます
Undefindタイプ
Undefindタイプにはundefinedという値が1つしかありません.宣言された変数が初期化されていない場合、この変数のデフォルト値はundefinedです.
関数に明確な戻り値がない場合、戻り値も「undefined」です.
Nullタイプ
もう1つの値しかないタイプはNullで、専用値null、すなわちその字面量しかありません.値undefinedは実際に値nullから派生しているので、ECMAScriptはそれらを等しいと定義します.
これら2つの値は等しいが、意味は異なる.undefinedは、変数が宣言されているが初期化されていないときに変数が付与された値であり、nullは、まだ存在しないオブジェクトを表すために使用される(typeof演算子を議論するとき、簡単に説明した).関数またはメソッドがオブジェクトを返す場合、そのオブジェクトが見つからない場合、通常nullが返される.
二、プロセス制御
Order Structure
switch-case構造
forサイクルの2つの方法
whileサイクル
例外処理
三、javascriptオブジェクト
JavaScriptではnullやundefined以外のデータ型をオブジェクトとして定義したり、オブジェクトを作成する方法で変数を定義したりすることができます.String、Math、Array、Date、RegExpはJavaScriptで重要な内蔵オブジェクトであり、JavaScriptプログラムではほとんどの機能がオブジェクトベースで実現されています.
文字列の作成(2つの方法)
文字列のプロパティとメソッド
number -----
boolean -----
string -----
undefined ----- undefined
null ----- null数値タイプ:
整数: JavaScriptで10進数の整数は、数値のシーケンスからなります. 正確な表現の範囲は-90007199254740992(-253)~90071999254740992(253)である. 範囲外の整数は精度に影響します
文字列のタイプ:
Unicode文字、数字、句読点からなるシーケンスです.文字列定数の先頭と末尾は、単一引用符または二重引用符で囲まれています.JavaScriptには文字タイプがありません.文字列でよく使われる特殊文字の表現.文字列の一部の特殊文字には、右ダッシュ;を付ける必要があります.一般的なエスケープ文字:改行':一重引用符":二重引用符\:右スクライブ
ブールのタイプ:
Booleanタイプには2つの値しかありません:trueとfalse、1と0も表し、実際の演算ではtrue=1、false=0ブール値もon/off、yes/no、1/0がtrue/falseに対応していると見なすことができます
Undefindタイプ
Undefindタイプにはundefinedという値が1つしかありません.宣言された変数が初期化されていない場合、この変数のデフォルト値はundefinedです.
関数に明確な戻り値がない場合、戻り値も「undefined」です.
Nullタイプ
もう1つの値しかないタイプはNullで、専用値null、すなわちその字面量しかありません.値undefinedは実際に値nullから派生しているので、ECMAScriptはそれらを等しいと定義します.
これら2つの値は等しいが、意味は異なる.undefinedは、変数が宣言されているが初期化されていないときに変数が付与された値であり、nullは、まだ存在しないオブジェクトを表すために使用される(typeof演算子を議論するとき、簡単に説明した).関数またはメソッドがオブジェクトを返す場合、そのオブジェクトが見つからない場合、通常nullが返される.
二、プロセス制御
Order Structure
console.log(“ ”);
console.log(“ ”);
console.log(“ ”);
if ( ){
１;
......
} else{
２;
.....var x= (new Date()).getDay(); // ，0
var y; if ( (x==6) || (x==0) ) {
y=" ";
}else{
y=" ";
}
console.log(y);switch-case構造
switch(x){
case 1:y=" "; break;
case 2:y=" "; break;
case 3:y=" "; break;
case 4:y=" "; break;
case 5:y=" "; break;
case 6:y=" "; break;
case 7:y=" "; break;
default: y=" ";
}forサイクルの2つの方法
for( ; ; )
{
……
}for( in )
{
……
}whileサイクル
var i=1;
while (i<=7) {
document.write("hello ");
document.write("
");
i++;
}例外処理
try { // ， }
catch (e) { // try ，catch 。
//e ， Error }
finally { // try （ try return ），finally 。}三、javascriptオブジェクト
JavaScriptではnullやundefined以外のデータ型をオブジェクトとして定義したり、オブジェクトを作成する方法で変数を定義したりすることができます.String、Math、Array、Date、RegExpはJavaScriptで重要な内蔵オブジェクトであり、JavaScriptプログラムではほとんどの機能がオブジェクトベースで実現されています.
var aa=Number.MAX_VALUE;
//
var bb=new String("hello JavaScript");
//
var cc=new Date();//
var dd=new Array(" "," "," "," ");
//
文字列の作成(2つの方法)
var str1= "hello world" ; var str1= new String( "hello word" ); 文字列のプロパティとメソッド
str1="welcome to the world of JS!" str2=str1.match("world" str3=str1.search("world"0]);
alert(str3); str1="abcdefgh" str2=str1.slice(2,4 str3=str1.slice(4 str4=str1.slice(2,-1 str5=str1.slice(-3,-1 str1=" , , , , , , " strArray=str1.split(","1]);
1:var arrname = [ 0, 1,….]; // var arr=[1,2,3];
2:var arrname = new Array( 0, 1,….); // var test=new Array(100,"a",true);
3:var arrname = new Array( );
// :
var cnweek=new Array(7);
cnweek[0]=" ";
cnweek[1]=" ";
...
cnweek[6]=" ";
join
x.join(bystr) －－－－
var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1); // "1-2-3-4-5-6-7"
concat
x.concat(value,...) －－－－
var a = [1,2,3]; var b=a.concat(4,5) ;
alert(a.toString()); // 1,2,3
alert(b.toString()); // 1,2,3,4,5
reverse,sort
slice
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
splice
//x. splice(start, deleteCount, value, ...)
//x
//splice
//start
//deleteCount
//value
//value
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());
a.splice(1,1);
push pop
//push pop
//x.push(value, ...)
//x.pop()
//x
//value 、 、
//push value x
//pop x
var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);// "1,2,3,4,5"arr1.push([6,7]);
alert(arr1)// "1,2,3,4,5,6,7"arr1.pop();
alert(arr1);// "1,2,3,4,5"
shift unshift
//x.unshift(value,...)
//x.shift()
//
//x
//value 、 、
//unshift value x
//shift x
var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1); // "4,5,1,2,3"arr1. unshift([6,7]);
alert(arr1); // "6,7,4,5,1,2,3"arr1.shift();
alert(arr1); // "4,5,1,2,3"
Date
// 1： var nowd1=new Date();
alert(nowd1.toLocaleString( ));// 2： var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));// 3： var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());// 4： var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//
getDate()
getDay ()
getMonth () （0-11）
getFullYear ()
getYear ()
getHours ()
getMinutes ()
getSeconds ()
getMilliseconds ()
getTime () ( 1970/1/1 )
:
function getCurrentDate(){ //1. Date
var date = new Date(); //
//2.
var year = date.getFullYear(); //3. js 0 11.
var month = date.getMonth()+1; //4.
var day = date.getDate(); //5.
var hour = date.getHours(); //6.
var min = date.getMinutes(); //7.
var sec = date.getSeconds(); //8.
var week = date.getDay(); // getWeek
// 2014 06 18 15:40:30
return year+" "+changeNum(month)+" "+day+" "+hour+":"+min+":"+sec+" "+parseWeek(week);
}
alert(getCurrentDate());//
function changeNum(num){ if(num
Date
//
//setDate(day_of_month)
//setMonth (month)
//setFullYear (year)
//setHours (hour)
//setMinutes (minute)
//setSeconds (second)
//setMillliseconds (ms)
(0-999)//setTime (allms)
( 1970/1/1 )
var x=new Date();
x.setFullYear (1997); // 1997
x.setMonth(7); // 7
x.setDate(1); // 1
x.setHours(5); // 5
x.setMinutes(12); // 12
x.setSeconds(54); // 54
x.setMilliseconds(230); // 230
document.write(x.toLocaleString( )+"
");// 1997 8 1 5 12 54
x.setTime(870409430000); //
document.write(x.toLocaleString( )+"
");// 1997 8 1 12 23 50
Math
0 ~ 1
、
function ( ){
; return ; }
BOMオブジェクト
Windowsオブジェクト window 。
. html window .
: .
: window , .
alert() 。
confirm() 。
prompt() 。
open() 。
close() 。
setInterval() （ ） 。
clearInterval() setInterval() timeout。
setTimeout() 。
clearTimeout() setTimeout() timeout。
scrollTo() 。
:var num = Math.round(Math.random()*100);
function acceptInput(){
//2. (prompt)
var userNum = prompt(" 0~100 !","0");
//3.
if(isNaN(+userNum)){
// ( 2,3 )
alert(" !");
acceptInput();
}
else if(userNum > num){
// ==> , ( 2,3 )
alert(" !");
acceptInput();
}else if(userNum , ( 2,3 )
alert(" !");
acceptInput();
}else{
// ==> , (confirm).
var result = confirm(" ! , ?");
if(result){
// ==> 123 .
num = Math.round(Math.random()*100);
acceptInput();
}else{
// ==> (close ).
close();
}
}
}
setInterval()メソッドは、clearInterval()が び されるか、ウィンドウが じるまで を び し けます.setInterval()から されるID はclearInterval()メソッドのパラメータとして できます.
:
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
DOMオブジェクト HTML Document Object Model( オブジェクトモデル) HTML DOMは、HTML へのアクセスおよび のための な を する. HTML DOMは、HTMLドキュメントを 、 、テキストを むツリー (ノードツリー) として する.
DOMは のように されています. ドキュメント がドキュメントノードです HTMLタグは ノードです HTML に まれるテキストはテキストノードです HTML は ノードです
ノードツリーのノードは いに を しています. (parent)、 (child)、 (sibling)などの は、これらの を するために されます. ノードは ノードを します. ( または )と ばれます. ノードツリーでは、 ノードをルート と ぶ. ノードには ノードがあり、ルート( ノードがない)を く があります. 1つのノードは、 の のサブ を することができる. は じ ノードを つノード である.
ダイレクトノード document.getElementById(“idname”) document.getElementsByTagName(“tagname”) document.getElementsByName(“name”) document.getElementsByClassName(“name”) i am div2i am div2i am div2hello pdiv1=.()
ナビゲーションノードのプロパティ
parentElement // ノードラベル children //
firstElementChild //
lastElementChild //
nextElementtSibling //
previousElementSibling //
ノードの
createElement(ラベル ): した の を します.
:var tag=document.createElement(“input") tag.setAttribute('type','text');
ノードの
サブノードを ( のサブノードとして)somenode.appendChild(newnode)
somenode.insertBefore(newnode, );
ノードを するには
removeChild(): する を し、 び しで
ノードの き え:
somenode.replaceChild(newnode、ノード);
ノード アクション:
1、テキストノードの を する:innerText innerHTML
2、attribute elementNode.setAttribute(name,value)
elementNode.getAttribute( )
elementNode.removeAttribute(“ ”);
3、value されているvalue を する 1.input 2.select (selectedIndex) 3.textarea 4、innerHTMLノードにhtmlコードを する: この はw 3 cの ではありませんが、 ブラウザではサポートされています. tag.innerHTML=「コンテンツを する」
5、classの について:
1
2
3 elementNode.className elementNode.classList.add elementNode.classList.remove
6、cssスタイルを する:
1
2
3
id = "p2" >Hello world!< / p> document.getElementById( "p2" ).style.color = "blue" ; .style.fontSize = 48px
DOMイベント
onclick 。
ondblclick 。
onfocus 。 ：
onblur 。 ： , , , .
onchange 。 ： , .（ ）
onkeydown 。 : , .
onkeypress 。
onkeyup 。
onload 。
。
。
。
。
onselect 。
onsubmit 。
イベントのバインド
1.
function foo(self){ // this;
console.log(" !");
console.log(self);
}
2. !
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this };
onload:
onload の ではbody にのみ .この のトリガはページ のロードが したことを す. シーン:ページのロードが したらすぐに したいことがある 、このイベント を することができる.html>
Title
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
};
*/
function fun() { var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
} hello p
onsubmit: html>
Title
window.onload=function(){ // 1().
//onsubmit , . false . .
var ele=document.getElementById("form");
ele.onsubmit=function(event) { // alert(" !");
// return false;
// 2 event.preventDefault(); ==> 。 alert(" !");
event.preventDefault();
}
};
イベントの
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); // div . }
onselect
var ele=document.getElementsByTagName("input")[0];
ele.onselect=function(){
alert(123);
}
onchange:
var ele=document.getElementsByTagName("select")[0];
ele.onchange=function(){
alert(123);
}
、
ボックスTitle(){
input=.()(input.==){
input.=}
}
(){
ele=.()val=ele.(!val.()){
ele.=}
}
()()
2.モダリティダイアログTitle.{
: : }
.{
: : : :: : : }
.{
: }
.{
: : %: %: -: -: : : }
eles=.()handles=.()(i=i
3.
Title 111111111222222222333333333444444444input_arr=.()button_arr=.()(i=i
4.select
Title.{
: : : %: : : -}
{
: : : : : }
{
: : : : :}
{
: }
{
: : : : : : }
JinPingMei > >> choose_move=.()all_move=.()right=.()left=.()options=left.choose_move.=(){
(i=i
: :={:[]:[]}p=.()c=.()(i in ){
option_pro=.()option_pro.=ip.(option_pro)}
p.=(){
=(.[.]).=[]c..=(i in ){
option_city=.()option_city.=[i]c.(option_city)}
}
ナビゲーションメニューTitle.{
: %: : : }
.{
:%: : : }
.{
: : : : }
.{
: }
.{
: }
111111111111111 222222222222222 333333333333333eles = .()(i=i