JS入門とECMAScript
17131 ワード
一、あらすじ1、JavaScriptとは、対象に向けた能力を持つ、解釈型のプログラム設計言語である.より具体的には、オブジェクトおよびイベントに基づいて駆動され、比較的安全なクライアントスクリプト言語である.主な目的は、サーバー端末へのデータの検証、Webインタラクションの増加、ユーザーの体験度の強化などです.HTMLマーク言語を混合して使用するスクリプト言語で作成されたプログラムは、Javascriptを実行する国際標準がECMAScriptであるとブラウザで説明できます.HTMLページにダイナミック機能を追加するために使用されています.ネットスケープのBrendan EichはECMAScriptを設計しています.ドキュメントオブジェクトモデルDOMは、ブラウザーがモデルBOMに対してJSコードが実行されています.ブラウザコンソールを開けてください.F 12-->consone 2、ECMAScript------JSを構成する基本文法DOM------文書オブジェクトモデルは、ページBOM------ブラウザオブジェクトモデルをどのように操作しますか?ブラウザ3、学習プロセス:変数演算子フロー制御方法、関数オブジェクト/クラス4、使用方法:
-- JS
html js
-- JS
html ，
-- JS
js
src ， <script> js
</code></pre>
<p> 、 <br> 1、 </p>
<pre><code>-- （statement）
-- ， 。
-- ( )， ，
。
-- 。 ， JavaScript
，
</code></pre>
<p>2、 </p>
<pre><code> （ _$ ）
,_ $ （ ）
,
</code></pre>
<p>2、 <br> 2.1、 <br> JS <br> var<br> <br> 2.2、 <br> JS ， ， 。<br> * </p>
<pre><code>1）、 :number
:
|infinity
NAN:Not A Number
+-*/% NAN
，
2）、 :string
js
，
3）、 boolean
true false
</code></pre>
<pre><code> * object
</code></pre>
<pre><code>-- （object）( ) ：
1)、 （object）{name:”zhangsan”,age:”18”}
2)、 （array）[1,2,3]
3)、 （function）function test() {}
--
--null—— ， ，
--undefined—— ，
</code></pre>
<p>2.3、 <br> var</p>
<pre><code>--
--
： var ，
-- ：
1） ， undefined
2） ， ，JavaScript ，
3） var 。
4） var ， 。
5） var ，
6）JavaScript 、 ， ， ，
</code></pre>
<p>2.4、 </p>
<pre><code> ：
JavaScript ， ， ，
。 ， ， ，
。 var
--
1）、==
，
，
Number(var)
undefinde NAN
2）、===
，
， false
tips:
</code></pre>
<p>2.5、typeof<br> typeof 。 typeof ：</p>
<pre><code>
undefined
boolean
string
number
object null
function
</code></pre>
<p>2.6、 <br> JS ： js 、 、 。<br> * </p>
<pre><code>
undefined "undefined" NAN false
null "null" 0 false
true "true" 1 true
false "false" 0 false
""( ) “” 0 false
“1.5” "1.5" 1.5 true
"one" "one" NAN true
0 -0 "0" 0 false
NAN “NAN” NAN false
(-)Infinity "(-)Infinity" (-)Infinity true
1 "1" 1 true
</code></pre>
<pre><code> *
</code></pre>
<pre><code>1）、parseInt()
--parseInt() ， ， 0 ，
， ， NaN， ， ，
--parseInt() ， 、 、
。 parseInt()
-- 0， 10，
2）、parseFloat() parseInt() ， 0 ，
， 。 ，
， 。 ，
，parseFloat() 。
</code></pre>
<pre><code> *
</code></pre>
<pre><code>toString() ， Number
toString() ， 。
Number toFixed() ，
</code></pre>
<pre><code> *
</code></pre>
<pre><code>--JS Number、Boolean、String ， 。
，
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object())NaN
Number(100) 100
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
-- String toString() ，
null undefined ：
var s1 = String(null); //"null" var oNull = null;
var s2 = oNull.toString(); //won’t work, causes anerro
-- ， + ""
</code></pre>
<p>3、 <br> ： // ；<br> ： /* */ 。<br> html ：<br> 、 <br> 1、 <br> + - * /( / =? ) %<br> ++ --<br> ++a + <br> a++ +<br> 2、 <br> > < >= <= !=<br> 3、 <br> &&: true<br> ||: true true<br> 4、 <br> = += -= /= *= %=<br> 5、 +<br> <br> 6、 <br> 1? 2: 3<br> true:2<br> false:3<br> 、 <br> 1、if & switch<br> if —— if， <br> switch —— ， , <br> 2、for <br> 1）、 </p>
<pre><code>for( 1; 2; 3){
4
}
1:
2:
3:
：1243 243 243 243 243... 2--
</code></pre>
<p>2）、 </p>
<pre><code>continue;
break;
，
</code></pre>
<p> 、 <br> 1、 <br> （array） <br> ， <br> (index) ,index 0 <br> JS Var ， ， ， <br> ：<br> <br> <br> <br> 2、 </p>
<pre><code>--
var = [ 1, 2,...];
--
var = new Array( 1, 2,...);
--
var = new Array(size);
--
.length
--
var a1 = new Array();
var a2 = new Array(10);
var a3 = new Array("lili", "nana", "huahua", "fangfang");
var a4 = [1, 2, 3, 4, 5, "aa", "bb", "cc", [1, 2, 3, 4, 5]];
-- [ ]
</code></pre>
<p>3、 </p>
<pre><code>1）、
[ ], 0
， undefined
， index=0 index< .length
2）、
[ ]=xxxx
3）、
a.splice(3, 2);
4）、
a[a.length] = "ii";
a.push("LL");
5）、
for(var i = a.length; i > 3; i--) {
a[i] = a[i - 1];
}
a[3] = "zz";
*JS ， 。
</code></pre>
<p>4、 </p>
<pre><code> ，JS ：
-- for
for(var i = 0; i < .length; i++) {
}
： undefinded ，
--for ... in
for(var i in ) {
// i
}
： undefinded ，
--foreach
.foreach(function(element,index){
// element： ；index：
});
： undefinded
* for --
* foreach -- undefined
* for in -- undefined
</code></pre>
<p>5、 </p>
<pre><code>push
unshift
pop
shift
reverse
join
indexOf
slice （ ） ，
splice ， ，
concat
</code></pre>
<p> 、 <br> 1、 <br> 、 <br> <br> JSON <br> ， ， <br> ， <br> ， </p>
<p>2、 <br> * </p>
<pre><code>--
function ( ){
}
： ([ ]);
--
var / = function([ ]){
}
： ([ ])/ ([ ]);
--Function
var = new Function(' 1',' 2',' ');
： ([ ]);
： 。
：
js ， ， 。
js ， arguments
</code></pre>
<pre><code> *
</code></pre>
<pre><code> ， ， ，
， ，
-- ， undefined
-- （ ）： 。
-- ： ， 。
-- ， ； ，
</code></pre>
<pre><code> *
</code></pre>
<pre><code>-- ：
([ ]);
， undefined
--
--
--call() apply()
： ，this
（1） ：function ([ ]){}
（2） ：(function ([ ]) {})([ ]);
，
</code></pre>
<pre><code> * return
</code></pre>
<pre><code> ， return 。
return ， ， ， undefined。
： ， 。
， ， 。
</code></pre>
<p>3、 ：</p>
<pre><code>1）、 (JS)
> ： , undefined
> ： ，
，
——JSON
2）、
， undefined
3）、 （ ）
JavaScript ， function ，
， 。 ，
， ，JavaScript 。
</code></pre>
<p>4、arguments <br> arguments <br> .name <br> .length <br> .toString() </p>
<pre><code>function fn1 (a,b,c) {
// arguments
console.log(arguments.length);
console.log(" ....");
console.log(arguments);
}
fn1(1,2);
console.log(fn1.name);
console.log(fn1.length);
console.log(fn1.toString());
</code></pre>
<p>5、 <br> ： (global variable) (local variable)<br> 1） <br> 2） ， var ， <br> 3） </p>
<pre><code>var num = 1;
function fn() {
var num = 10; // ，
console.log(num); //
var b = 2; //
c = 3; // var
}
</code></pre>
<p>6、 <br> ：<br> <br> <br> 3、 </p>
<p> ：<br> <br> <br> </p>
<pre><code>// 1、
function fn1() {
var a = "Hello!";
function fn2() {
// 2、
console.log(a);
}
// 3、
return fn2;
}
var f = fn1();
console.log(f);
f();
</code></pre>
<p> 、 <br> JavaScript ， ， “ ”。 ，JavaScript 。 ， ， 。</p>
<pre><code> {
var a = 10;
}
console.log("a------>" + a);
</code></pre>
<p> ， a， ， a ， ， 。 ， JavaScript ， 。 ， for、if、while <br> 、 <br> 1、 <br> <br> </p>
<pre><code>function factory(username, password, realname) {
var obj = new Object();
obj.username = username;
obj.password = password;
obj.realname = realname;
return obj;
}
</code></pre>
<p>2、 <br> ， prototype 。 ， ， 。<br> constructor， ， 。<br> ， ， 。 。 <br> ， ， ， 。 ， constructor ， 。</p>
<pre><code>//
function Person(color, hair) {
this.color = color;
this.hair = hair;
this.fav = [" ", " ", " "];
this.eat = function() {
alert(" ...");
}
}
//
function Student(sno, name, gender, grade) {
this.grade = grade;
this.sno = sno;
this.name = name;
this.gender = gender;
this.grade = grade;
this.study = function() {
alert(this.name + ": ， ");
}
this.toString = function() {
return "[object Student]";
}
}
// ( )
Student.prototype = new Person("yellow", "black");
function testObject() {
var stu1 = new Student(1, 'zs', 'm', 3);
var stu2 = new Student(2, 'ls', 'w', 2);
//
// ，
// stu1.fav.push(" ");
// alert(stu1.fav + "----" + stu2.fav);
// ：" ", " ", " "," ----" ", " ", " ","
// stu1.fav = [" ", " ", " "];
// alert(stu1.fav + "----" + stu2.fav);
// ：" ", " ", " "----" ", " ", " "
}
testObject();
</code></pre>
<p> 、 </p>
<pre><code>Date:
//
getFullYear() , getMonth() , getDate() ,
getHours() ,getMinutes() ,getSeconds()
//
setYear(), setMonth(), …
toLoacaleString()
：
getMonth()： ：0~11（1 ~12 ）
setMonth()： 0~11
toLocaleString()： Date ， 。
</code></pre>
<p> 、JSON<br> <br> JSON(JavaScript Object Notation，JS )， 。<br> JavaScript ，json </p>
<pre><code>JS 。
1、
JS ， ：
var = {}; //
var = { : ,....};
new Object
var = new Object();
Object create
var = Object.create(null );
2、
JS ， JS 。
JS JSON ， ，
。
，
JSON.stringify(object)
， Json 。
JSON.parse(jsonStr)
3、eval()
eval() ， js
json json
1） ： json jsonObj
eval("var jsonObj = " + jsonStr);
2） ：
var jsonObj = eval("(" + jsonStr + ")");
json { } ， eval ， 。 eval 。
3） ：
eval(jsonStr);
</code></pre>
<pre><code>
</code></pre>
<p> （ ， json ）<br> </p>
<pre><code>// 1、
var obj = {}; //
var obj2 = {
uname:"zhangsan",
uage:18
};
obj2.usex=true;
console.log(obj);
console.log(obj2);
// 2、 new Object
var obj3 = new Object();
obj3.name = "Tom";
console.log(obj3);
// 3、 Object create
var obj4 = Object.create(null);
console.log(obj4.uname);
var obj5 = Object.create(obj2);
console.log(obj5.uname);
console.log('============ ============');
var str = '{"uname":"zhangsan", "uage":18 }';
// ：
var object1 = JSON.parse(str);
console.log(object1);
console.log(object1.uname);
// ，
var json1 = JSON.stringify(object1)
console.log(json1);
console.log(json1.uname);
console.log("=============eval()============");
console.log(' ');
eval("console.log(' ')");//
// 1） ： json jsonObj
var ab = '{"uname":"zhangsan", "uage":18 }';
eval("var jsonObj = " + ab);
console.log(jsonObj);
// 2） ：
var jsonObj2 = eval("(" +ab + ")");
console.log(jsonObj2);
var arrStr = "[1,'1a','fg']";
// eval("var arrObj = " + arrStr);
eval("var arr=" + arrStr);
console.log(arr);
// ：eval(arrStr);
console.log(arrStr);
console.log(eval(arrStr));
</code></pre>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1407228924861186048"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">