整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本數(shù)據(jù)類型
JavaScript腳本語言同其它語言一樣，有它自身的基本數(shù)據(jù)類型、表達(dá)式和算術(shù)運(yùn)算符以及程序的基本框架結(jié)構(gòu)。
JavaScript提供了四種基本的數(shù)據(jù)類型用來處理數(shù)字和文字, 而變量提供存放信息的地方, 表達(dá)式則可以完成較復(fù)雜的
信息處理。
1、基本數(shù)據(jù)類型
在JavaScript中四種基本的數(shù)據(jù)類型：數(shù)值（整數(shù)和實(shí)數(shù)）、字符串型（用“”號(hào)或‘’括起來的字符或數(shù)值）、
布爾型（使True或False表示）和空值。在JavaScript的基本類型中的數(shù)據(jù)可以是常量，也可以變量。由于JavaScript
采用弱類型的形式，因而一個(gè)數(shù)據(jù)的變量或常量不必首先作聲明，而是在使用或賦值時(shí)確定其數(shù)據(jù)的類型的。當(dāng)然也可
以先聲明該數(shù)據(jù)的類型，它是通過在賦值時(shí)自動(dòng)說明其數(shù)據(jù)類型的。
2、常量
整型常量
JavaScript的常量通常又稱字面常量，它是不能改變的數(shù)據(jù)。其整型常量可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示
其值。
實(shí)型常量
實(shí)型常量是由整數(shù)部分加小數(shù)部分表示，如12.32、193.98 ?？梢允褂每茖W(xué)或標(biāo)準(zhǔn)方法表示：5E7、4e5等。
布爾值
布爾常量只有兩種狀態(tài)：True或False。 它主要用來說明或代表一種狀態(tài)或標(biāo)志，以說明操作流程。它與Ｃ＋＋是
不一樣的,Ｃ＋＋可以用１或０表示其狀態(tài),而JavaScript只能用True或False表示其狀態(tài)。
字符型常量
使用單引號(hào)（‘）或雙引號(hào)（“）括起來的一個(gè)或幾個(gè)字符。如 "This is a book of JavaScript
"、"3245"、"ewrt234234" 等。
空值
JavaScript中有一個(gè)空值null,表示什么也沒有。如試圖引用沒有定義的變量,則返回一個(gè)Null值。
特殊字符
同Ｃ語言一樣，JavaScript中同樣以有些以反斜杠（／）開頭的不可顯示的特殊字符。通常稱為控制字符。
3、變量
變量的主要作用是存取數(shù)據(jù)、提供存放信息的容器。對(duì)于變量必須明確變量的命名、變量的類型、變量的聲明及其
變量的作用域。
變量的命名
JavaScript中的變量命名同其計(jì)算機(jī)語言非常相似，這里要注意以下兩點(diǎn)：
必須是一個(gè)有效的變量，即變量以字母開頭，中間可以出現(xiàn)數(shù)字如test1、text2等。除下劃線（－）作為連字符外，變
量名稱不能有空格、（＋）、（－）、（，）或其它符號(hào)。
不能使用JavaScript中的關(guān)鍵字作為變量。
在JavaScript中定義了４０多個(gè)類鍵字，這些關(guān)鍵是JavaScript內(nèi)部使用的，不能作為變量的名稱。如Var、int、
double、true不能作為變量的名稱。
在對(duì)變量命名時(shí)，最好把變量的意義與其代表的意思對(duì)應(yīng)起來，以免出現(xiàn)錯(cuò)誤。
變量的類型
在JavaScript中，變量可以用命令Var作聲明:
var mytest;
該例子定義了一個(gè)mytest變量。但沒有賦予它的值。
Var mytest=”This is a book”
該例子定義了一個(gè)mytest變量, 同時(shí)賦予了它的值。
在JavaScript中，變量以可以不作聲明，而在使用時(shí)再根據(jù)數(shù)據(jù)的類型來確其變量的類型。
如：
x=100
y="125"
xy=True
cost=19.5等。
其中x整數(shù)，y為字符串，xy為布爾型，cost為實(shí)型。
變量的聲明及其作用域
JavaScript變量可以在使用前先作聲明，并可賦值。通過使用var關(guān)鍵字對(duì)變量作聲明。對(duì)變量作聲明的最大好處
就是能及時(shí)發(fā)現(xiàn)代碼中的錯(cuò)誤；因?yàn)镴avaScript是采用動(dòng)態(tài)編譯的，而動(dòng)態(tài)編譯是不易發(fā)現(xiàn)代碼中的錯(cuò)誤，特別是變量
命名的方面。
對(duì)于變量還有一個(gè)重要性──那就是變量的作用域。在JavaScript中同樣有全局變量和局部變量。全局變量是定義
在所有函數(shù)體之外，其作用范圍是整個(gè)函數(shù)；而局部變量是定義在函數(shù)體之內(nèi)，只對(duì)其該函數(shù)是可見的，而對(duì)其它函數(shù)
則是不可見的。
三、表達(dá)式和運(yùn)算符
１、表達(dá)式
在定義完變量后，就可以對(duì)它們進(jìn)行賦值、改變、計(jì)算等一系列操作，這一過程通常又叫稱一個(gè)叫表達(dá)式來完成，
可以說它是變量、常量、布爾及運(yùn)算符的集合，因此表達(dá)式可以分為算術(shù)表述式、字串表達(dá)式、賦值表達(dá)式以及布爾表
達(dá)式等。
２、運(yùn)算符
運(yùn)算符完成操作的一系列符號(hào)，在JavaScript中有算術(shù)運(yùn)算符，如＋、-、*、/等；有比較運(yùn)算符如!＝、＝＝等;
有邏輯布爾運(yùn)算符如！（取反）、|、||; 有字串運(yùn)算如＋ 、 ＋＝等。
在JavaScript主要有雙目運(yùn)算符和單目運(yùn)算符。其雙目運(yùn)算符由下列組成：
操作數(shù)１ 運(yùn)算符 操作數(shù)２
即由兩個(gè)操作數(shù)和一個(gè)運(yùn)算符組成。如50＋40、"This"+"that"等。單目運(yùn)算符，只需一個(gè)操作數(shù)，其運(yùn)算符可在
前或后。
（１）算術(shù)運(yùn)算符
JavaScript中的算術(shù)運(yùn)算符有單目運(yùn)算符和雙目運(yùn)算符。
雙目運(yùn)算符：
+（加） 、-（減）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、&(按位與)、<<（左移）、 >>（右移）、
>>>（右移，零填充）。
單目運(yùn)算符：
-（取反）、~（取補(bǔ)）、++（遞加1）、--（遞減1）。
（２）比較運(yùn)算符
比較運(yùn)算符它的基本操作過程是，首先對(duì)它的操作數(shù)進(jìn)行比較，爾后再返回一個(gè)true或False值，有８?jìng)€(gè)比較運(yùn)算符
:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
（３）布爾邏輯運(yùn)算符
在JavaScript中增加了幾個(gè)布爾邏輯運(yùn)算符:
!（取反)、&=（與之后賦值）、 &（邏輯與）、 |=（或之后賦值）、 |（邏輯或）、 ^=（異或之后賦值）、 ^（邏輯
異或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。
其中三目操作符主要格式如下：
操作數(shù)？結(jié)果１：結(jié)果２
若操作數(shù)的結(jié)果為真，則表述式的結(jié)果為結(jié)果１，否則為結(jié)果２。
四、范例
下面是一個(gè)跑馬燈效果的JavaScript文檔。
<html><head><script Language="JavaScript">
var msg="這是一個(gè)跑馬燈效果的JavaScript文檔";
var interval=100;
var spacelen=120;
var space10=" ";
var seq=0;
function Scroll() {
len=msg.length;
window.status=msg.substring(0, seq+1);
seq++;
if ( seq >=len ) {
seq=spacelen;
window.setTimeout("Scroll2();", interval );}
else
window.setTimeout("Scroll();", interval );}
function Scroll2() {
var out="";
for (i=1; i<=spacelen/space10.length; i++) out +=
space10;
out=out + msg;
len=out.length;
window.status=out.substring(seq, len);
seq++;
if ( seq >=len ) { seq=0; };
window.setTimeout("Scroll2();", interval );}
Scroll();
</script><body></body></html>
本講介紹了JavaScript腳本是如何加入Web頁面, 并學(xué)習(xí)了JavaScript語言中的基本數(shù)據(jù)類型、變量、常量、操作
運(yùn)算符等。從本講中的內(nèi)容中可以看出，對(duì)于已經(jīng)掌握Ｃ＋＋語言的人來說，學(xué)習(xí)JavaScript真是一件非常輕松愉快的
事。
第三講 JavaScript程序構(gòu)成
JavaScript腳本語言的基本構(gòu)成是由控制語句、函數(shù)、對(duì)象、方法、屬性等,來實(shí)現(xiàn)編程的。
一、程序控制流
在任何一種語言中，程序控制流是必須的，它能使得整個(gè)程序減小混亂，使之順利按其一定的方式執(zhí)行。下面是
JavaScript常用的程序控制流結(jié)構(gòu)及語句:
１、if條件語句
基本格式
if（表述式）
語句段１；
......
else
語句段２；
.....
功能：若表達(dá)式為true，則執(zhí)行語句段１；否則執(zhí)行語句段２。
說明：
if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執(zhí)行順序。
表達(dá)式中必須使用關(guān)系語句，來實(shí)現(xiàn)判斷，它是作為一個(gè)布爾值來估算的。
它將零和非零的數(shù)分別轉(zhuǎn)化成false和true。 若if后的語句有多行，則必須使用花括號(hào)將其括起來。
if語句的嵌套：
if（布爾值）語句１；
else（布爾值）語句２；
else if（布爾值）語句３；
……
else 語句４；
在這種情況下，每一級(jí)的布爾表述式都會(huì)被計(jì)算，若為真，則執(zhí)行其相應(yīng)的語句，否則執(zhí)行else后的語句。
２、For循環(huán)語句
基本格式
for（初始化；條件；增量）
語句集；
功能：實(shí)現(xiàn)條件循環(huán)，當(dāng)條件成立時(shí)，執(zhí)行語句集，否則跳出循環(huán)體。
說明：
初始化參數(shù)告訴循環(huán)的開始位置，必須賦予變量的初值；
條件：是用于判別循環(huán)停止時(shí)的條件。若條件滿足，則執(zhí)行循環(huán)體，否則 跳出。
增量：主要定義循環(huán)控制變量在每次循環(huán)時(shí)按什么方式變化。
三個(gè)主要語句之間，必須使用逗號(hào)分隔。
３、while循環(huán)
基本格式
while（條件）
語句集；
該語句與For語句一樣，當(dāng)條件為真時(shí)，重復(fù)循環(huán)，否則退出循環(huán)。
For與while語句都是循環(huán)語句，使用For語句在處理有關(guān)數(shù)字時(shí)更易看懂，也較緊湊；而while循環(huán)對(duì)復(fù)雜的語句效
果更特別。
４、break和continue語句
與C++語言相同，使用break語句使得循環(huán)從For或while中跳出，continue使得跳過循環(huán)內(nèi)剩余的語句而進(jìn)入下一次
循環(huán)。
二、函數(shù)
函數(shù)為程序設(shè)計(jì)人員提供了一個(gè)豐常方便的能力。通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是根據(jù)所要完成的功能，
將程序劃分為一些相對(duì)獨(dú)立的部分，每部分編寫一個(gè)函數(shù)。從而，使各部分充分獨(dú)立，任務(wù)單一，程序清晰，易懂、易
讀、易維護(hù)。JavaScript函數(shù)可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅(qū)動(dòng)的結(jié)果而調(diào)用的程序。
從而實(shí)現(xiàn)一個(gè)函數(shù)把它與事件驅(qū)動(dòng)相關(guān)聯(lián)。這是與其它語言不樣的地方。
１、JavaScript函數(shù)定義
Function 函數(shù)名 （參數(shù),變?cè)﹞
函數(shù)體;.
Return 表達(dá)式;
}
說明：
當(dāng)調(diào)用函數(shù)時(shí),所用變量或字面量均可作為變?cè)獋鬟f。
函數(shù)由關(guān)鍵字Function定義。
函數(shù)名：定義自己函數(shù)的名字。
參數(shù)表，是傳遞給函數(shù)使用或操作的值，其值可以是常量 ，變量或其它表達(dá)式。
通過指定函數(shù)名（實(shí)參）來調(diào)用一個(gè)函數(shù)。
必須使用Return將值返回。
函數(shù)名對(duì)大小寫是敏感的。
２、函數(shù)中的形式參數(shù)：
在函數(shù)的定義中，我們看到函數(shù)名后有參數(shù)表，這些參數(shù)變量可能是一個(gè)或幾個(gè)。那么怎樣才能確定參數(shù)變量的個(gè)
數(shù)呢？在JavaScript中可通過arguments .Length來檢查參數(shù)的個(gè)數(shù)。
例：
Function function_Name(exp1,exp2,exp3,exp4)
Number=function _Name . arguments .length;
if (Number>1）
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
...
三、事件驅(qū)動(dòng)及事件處理
１、基本概念
JavaScript是基于對(duì)象(object-based)的語言。這與Java不同,Java是面向?qū)ο蟮恼Z言。而基于對(duì)象的基本特征，
就是采用事件驅(qū)動(dòng)(event-driven)。它是在用形界面的環(huán)境下，使得一切輸入變化簡(jiǎn)單化。通常鼠標(biāo)或熱鍵的動(dòng)作我們
稱之為事件（Event），而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動(dòng)作，稱之為事件驅(qū)動(dòng)（Event Driver）。而對(duì)事件進(jìn)行
處理程序或函數(shù)，我們稱之為事件處理程序（Event Handler）。
２、事件處理程序
在JavaScript中對(duì)象事件的處理通常由函數(shù)(Function)擔(dān)任。其基本格式與函數(shù)全部一樣，可以將前面所介紹的所
有函數(shù)作為事件處理程序。格式如下：
Function 事件處理名（參數(shù)表）{
事件處理語句集；
……
}
３、事件驅(qū)動(dòng)
JavaScript事件驅(qū)動(dòng)中的事件是通過鼠標(biāo)或熱鍵的動(dòng)作引發(fā)的。它主要有以下幾個(gè)事件：
（１）單擊事件onClick
當(dāng)用戶單擊鼠標(biāo)按鈕時(shí)，產(chǎn)生onClick事件。同時(shí)onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基
本對(duì)象中產(chǎn)生：
button（按鈕對(duì)象）
checkbox（復(fù)選框）或（檢查列表框）
radio （單選鈕）
reset buttons（重要按鈕）
submit buttons（提交按鈕）
例：可通過下列按鈕激活change()文件：
<Form>
<Input type="button" Value=“ ” onClick="change()">
</Form>
在onClick等號(hào)后，可以使用自己編寫的函數(shù)作為事件處理程序，也可以使用JavaScript中內(nèi)部的函數(shù)。還可以直
接使用JavaScript的代碼等。例：
<Input type="button" value=" " onclick=alert("這是一個(gè)例子"）;
（２）onChange改變事件
當(dāng)利用text或texturea元素輸入字符值改變時(shí)發(fā)該事件，同時(shí)當(dāng)在select表格項(xiàng)中一個(gè)選項(xiàng)狀態(tài)改變后也會(huì)引發(fā)該
事件。
例： <Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>
（３）選中事件onSelect
當(dāng)Text或Textarea對(duì)象中的文字被加亮后，引發(fā)該事件。
（４）獲得焦點(diǎn)事件onFocus
當(dāng)用戶單擊Text或textarea以及select對(duì)象時(shí)，產(chǎn)生該事件。此時(shí)該對(duì)象成為前臺(tái)對(duì)象。
（５）失去焦點(diǎn)onBlur
當(dāng)text對(duì)象或textarea對(duì)象以及select對(duì)象不再擁有焦點(diǎn)、而退到后臺(tái)時(shí)，引發(fā)該文件，他與onFocas事件是一個(gè)
對(duì)應(yīng)的關(guān)系。
（６）載入文件onLoad
當(dāng)文檔載入時(shí)，產(chǎn)生該事件。onLoad一個(gè)作用就是在首次載入一個(gè)文檔時(shí)檢測(cè)cookie的值，并用一個(gè)變量為其賦值
，使它可以被源代碼使用。
（７）卸載文件onUnload
當(dāng)Web頁面退出時(shí)引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。
四、范例
范例1：下例程序是一個(gè)自動(dòng)裝載和自動(dòng)卸載的例子。即當(dāng)裝入HTML文檔時(shí)調(diào)用loadform()函數(shù),而退出該文檔進(jìn)入
另一HTML文檔時(shí)則首先調(diào)用unloadform()函數(shù),確認(rèn)后方可進(jìn)入。
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
function loadform(){
alert("這是一個(gè)自動(dòng)裝載例子!");
}
function unloadform(){
alert("這是一個(gè)卸載例子!");
}
//-->
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">調(diào)用</a>
</BODY>
</HTML>
范例2：這是一個(gè)獲取瀏覽器版本號(hào)的程序。該程序首先顯示一個(gè)波浪一提示信息。之后顯示瀏覽器的版本號(hào)有關(guān)信
息。
<html>
<head>
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /=16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
function getletter(num) {
if (num < 10) { return num; }
else {
if (num==10) { return "A" }
if (num==11) { return "B" }
if (num==12) { return "C" }
if (num==13) { return "D" }
if (num==14) { return "E" }
if (num==15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("這是一個(gè)獲取WEB瀏覽器的程序"))
document.write("</CENTER></font>")
document.write("瀏覽器名稱: "+navigator.appName+"<br>");
document.write("版本號(hào): "+navigator.appVersion+"<br>");
document.write("代碼名字: "+navigator.appCodeName+"<br>");
document.write("用戶代理標(biāo)識(shí): "+navigator.userAgent);
</script>
<body></body></html>
本講介紹了JavaScript程序設(shè)計(jì)的有關(guān)內(nèi)容。程序流、函數(shù)、事件是我們學(xué)習(xí)掌握J(rèn)avaScript編程的重點(diǎn)。
第四講 基于對(duì)象的JavaScript語言
JavaScript語言是基于對(duì)象的（Object-Based），而不是面向?qū)ο蟮模╫bject-oriented）。之所以說它是一門基
于對(duì)象的語言，主要是因?yàn)樗鼪]有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能。而是把其它語言所創(chuàng)建的
復(fù)雜對(duì)象統(tǒng)一起來，從而形成一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)。
雖然JavaScript語言是一門基于對(duì)象的，但它還是具有一些面向?qū)ο蟮幕咎卣鳌Ｋ梢愿鶕?jù)需要?jiǎng)?chuàng)建自己的對(duì)象
，從而進(jìn)一步擴(kuò)大JavaScript的應(yīng)用范圍，增強(qiáng)編寫功能強(qiáng)大的Web文檔。
一、對(duì)象的基礎(chǔ)知識(shí)
１、對(duì)象的基本結(jié)構(gòu)
JavaScript中的對(duì)象是由屬性(properties)和方法(methods)兩個(gè)基本的元素的構(gòu)成的。前者是對(duì)象在實(shí)施其所需
要行為的過程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對(duì)象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特
定的函數(shù)相聯(lián)。
２、引用對(duì)象的途徑
一個(gè)對(duì)象要真正地被使用，可采用以下幾種方式獲得：
引用JavaScript內(nèi)部對(duì)象；
由瀏覽器環(huán)境中提供；
創(chuàng)建新對(duì)象。
這就是說一個(gè)對(duì)象在被引用之前，這個(gè)對(duì)象必須存在，否則引用將毫無意義，而出現(xiàn)錯(cuò)誤信息。從上面中我們可以
看出JavaScript引用對(duì)象可通過三種方式獲取。要么創(chuàng)建新的對(duì)象，要么利用現(xiàn)存的對(duì)象。
３、有關(guān)對(duì)象操作語句
JavaScript不是一純面向?qū)ο蟮恼Z言，它設(shè)有提供面向?qū)ο笳Z言的許多功能，因此JavaScript設(shè)計(jì)者之所以把它你
“基于對(duì)象”而不是面向?qū)ο蟮恼Z言，在JavaScript中提供了幾個(gè)用于操作對(duì)象的語句和關(guān)鍵字及運(yùn)算符。
1）、For...in語句
格式如下：
For（對(duì)象屬性名 in 已知對(duì)象名）
說明：
該語句的功能是用于對(duì)已知對(duì)象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個(gè)已知對(duì)象的所有屬性反復(fù)置給一個(gè)變
量；而不是使用計(jì)數(shù)器來實(shí)現(xiàn)的。
該語句的優(yōu)點(diǎn)就是無需知道對(duì)象中屬性的個(gè)數(shù)即可進(jìn)行操作。
例：下列函數(shù)是顯示數(shù)組中的內(nèi)容：
Function showData(object)
for (var X=0; X<30;X++)
document.write(object[i])；
該函數(shù)是通過數(shù)組下標(biāo)順序值，來訪問每個(gè)對(duì)象的屬性，使用這種方式首先必須知道數(shù)組的下標(biāo)值，否則若超出范
圍，則就會(huì)發(fā)生錯(cuò)誤。而使For...in語句，則根本不需要知道對(duì)象屬性的個(gè)數(shù)，見下：
Function showData(object)
for(var prop in object)
document.write(object[prop])；
使用該函數(shù)時(shí)，在循環(huán)體中，F(xiàn)or自動(dòng)將的屬性取出來，直到最后為此。
.with語句
使用該語句的意思是：在該語句體內(nèi)，任何對(duì)變量的引用被認(rèn)為是這個(gè)對(duì)象的屬性，以節(jié)省一些代碼。
with object{
...}
所有在with語句后的花括號(hào)中的語句，都是在后面object對(duì)象的作用域的。
.this關(guān)鍵字
this是對(duì)當(dāng)前的引用，在JavaScript由于對(duì)象的引用是多層次，多方位的，往往一個(gè)對(duì)象的引用又需要對(duì)另一個(gè)對(duì)
象的引用，而另一個(gè)對(duì)象有可能又要引用另一個(gè)對(duì)象，這樣有可能造成混亂，最后自己已不知道現(xiàn)在引用的那一個(gè)對(duì)象
，為此JavaScript提供了一個(gè)用于將對(duì)象指定當(dāng)前對(duì)象的語句this。
.New運(yùn)算符
雖然在JavaScript中對(duì)象的功能已經(jīng)是非常強(qiáng)大的了。但更強(qiáng)大的是設(shè)計(jì)人員可以按照需求來創(chuàng)建自己的對(duì)象，以
滿足某一特定的要求。使用New運(yùn)算符可以創(chuàng)建一個(gè)新的對(duì)象。其創(chuàng)建對(duì)象使用如下格式：
Newobject=NEW Object(Parameters table);
其中Newobject創(chuàng)建的新對(duì)象：object是已經(jīng)存在的對(duì)象； parameters table參數(shù)表；new是JavaScript中的命令
語句。
如創(chuàng)建一個(gè)日期新對(duì)象
newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作為一個(gè)新的日期對(duì)象了。
４、對(duì)象屬性的引用
對(duì)象屬性的引用可由下列三種方式之一實(shí)現(xiàn)：
（１）使用點(diǎn)（.）運(yùn)算符
university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
其中university是一個(gè)已經(jīng)存在的對(duì)象，Name、City、Date是它的三個(gè)屬性，并通過操作對(duì)其賦值。
（２）通過對(duì)象的下標(biāo)實(shí)現(xiàn)引用
university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"
通過數(shù)組形式的訪問屬性，可以使用循環(huán)操作獲取其值。
function showunievsity(object)
for (var j=0;j<2; j++)
document.write(object[j])
若采用For...in則可以不知其屬性的個(gè)數(shù)后就可以實(shí)現(xiàn)：
Function showmy(object)
for (var prop in this)
docament.write(this[prop]);
（３）通過字符串的形式實(shí)現(xiàn)
university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"
５、對(duì)象的方法的引用
在JavaScript中對(duì)象方法的引用是非常簡(jiǎn)單的。
ObjectName.methods()
實(shí)際上methods()=FunctionName方法實(shí)質(zhì)上是一個(gè)函數(shù)。 如引用university對(duì)象中的showmy（）方法，則可使用：
document.write (university.showmy())
或：document.write(university)
如引用math內(nèi)部對(duì)象中cos()的方法
則：
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with則引用時(shí)相對(duì)要復(fù)雜些：
document.write(Math.cos(35))
document.write(math.sin(80))
二、常用對(duì)象的屬性和方法
JavaScript為我們提供了一些非常有用的常用內(nèi)部對(duì)象和方法。用戶不需要用腳本來實(shí)現(xiàn)這些功能。這正是基于對(duì)
象編程的真正目的。
在JavaScript提供了string（字符串）、math（數(shù)值計(jì)算）和Date（日期）三種對(duì)象和其它一些相關(guān)的方法。從而
為編程人員快速開發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。
１、常用內(nèi)部對(duì)象
在JavaScript中對(duì)于對(duì)象屬性與方法的引用，有兩種情況：其一是說該對(duì)象是靜態(tài)對(duì)象，即在引用該對(duì)象的屬性或
方法時(shí)不需要為它創(chuàng)建實(shí)例；而另一種對(duì)象則在引用它的對(duì)象或方法是必須為它創(chuàng)建一個(gè)實(shí)例，即該對(duì)象是動(dòng)態(tài)對(duì)象。
對(duì)JavaScript內(nèi)部對(duì)象的引用，以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對(duì)象的靜動(dòng)性對(duì)于掌握和理解
JavaScript內(nèi)部對(duì)象是具有非常重要的意義。
１)、串對(duì)象
string對(duì)象：內(nèi)部靜態(tài)性。
訪問properties和methods時(shí)，可使用（.）運(yùn)算符實(shí)現(xiàn)。
基本使用格式：objectName.prop/methods
（１）串對(duì)象的屬性
該對(duì)象只有一個(gè)屬性，即length。它表明了字符串中的字符個(gè)數(shù)，包括所有符號(hào)。例：
mytest="This is a JavaScript"
mystringlength=mytest.length
最后mystringlength返回mytest字串的長(zhǎng)度為20。
（２）串對(duì)象的方法
string對(duì)象的方法共有１９個(gè)。主要用于有關(guān)字符串在Web頁面中的顯示、字體大小、字體顏色、字符的搜索以及字
符的大小寫轉(zhuǎn)換。
其主要方法如下：
錨點(diǎn)anchor()：該方法創(chuàng)建如用Html文檔中一樣的anchor標(biāo)記。使用anchor如用Html中(A Name="")一樣。通過下
列格式訪問:string.anchor(anchorName)。
有關(guān)字符顯示的控制方法
big字體顯示, Italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示
，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。
字體顏色方法；fontcolor(color)
字符串大小寫轉(zhuǎn)換
toLowerCase()－小寫轉(zhuǎn)換，toUpperCase()大寫轉(zhuǎn)換。下列把一個(gè)給定的串分別轉(zhuǎn)換成大寫和小寫格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。
字符搜索：indexOf[charactor,fromIndex]
從指定formIndtx位置開始搜索charactor第一次出現(xiàn)的位置。
返回字串的一部分字串：substring(start,end)
從start開始到end的字符全部返回。
２)、算術(shù)函數(shù)的math對(duì)象
功能：提供除加、減、乘、除以外的一引些自述運(yùn)算。如對(duì)數(shù)，平方根等 。
靜動(dòng)性：靜態(tài)對(duì)象
（１）主要屬性
math中提供了６個(gè)屬性，它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)Ｅ、以１０為底的自然對(duì)數(shù)ＬＮ１０、以２為底的自然對(duì)數(shù)
LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根為SQRT2。
（２）主要方法
絕對(duì)值：abs()
正弦余弦值：sin(),cos()
反正弦反余弦 :asin(), acos()
正切反正切：tan(),atan()
四舍五入：round()
平方根：sqrt()
基于幾方次的值：Pow(base,exponent)
...
３)、日期及時(shí)間對(duì)象
功能：提供一個(gè)有關(guān)日期和時(shí)間的對(duì)象。
靜動(dòng)性：動(dòng)態(tài)性，即必須使用New運(yùn)算符創(chuàng)建一個(gè)實(shí)例。例:
MyDate=New Date()
Date對(duì)象沒有提供直接訪問的屬性。只具有獲取和設(shè)置日期和時(shí)間的方法。
日期起始值:１７７０年１月１日００:００:００。
獲取日期的時(shí)間方法
getYear(): 返回年數(shù)
getMonth():返回當(dāng)月號(hào)數(shù)
getDate(): 返回當(dāng)日號(hào)數(shù)
getDay():返回星期幾
getHours():返回小時(shí)數(shù)
getMintes(:返回分鐘數(shù)
getSeconds():返回秒數(shù)
getTime() : 返回毫秒數(shù)
（２）設(shè)置日期和時(shí)間：
setYear();設(shè)置年
setDate():設(shè)置當(dāng)月號(hào)數(shù)
setMonth():設(shè)置當(dāng)月份數(shù)
setHours():設(shè)置小時(shí)數(shù)
setMintes():設(shè)置分鐘數(shù)
setSeconds():設(shè)置秒數(shù)
setTime ():設(shè)置毫秒數(shù)
...
2、JavaScript中的系統(tǒng)函數(shù)
JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對(duì)象無關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需創(chuàng)建任何實(shí)例,
可直接用。
返回字符串表達(dá)式中的值：
方法名：eval（字串表達(dá)式），例：
test=eval("8+9+5/2");
返回字符串ASCI碼：
方法名：unEscape (string)
返回字符的編碼：
方法名：escape(character)
返回實(shí)數(shù)：
parseFloat(floustring);
返回不同進(jìn)制的數(shù)：
parseInt(numbestring ,rad.X)
其中radix是數(shù)的進(jìn)制，numbs字符串?dāng)?shù)
當(dāng)今交互式網(wǎng)絡(luò)的世界里，JavaScript（JS）扮演著至關(guān)重要的角色，它賦予了網(wǎng)站生命力、響應(yīng)性和用戶交互性。本文將深入探討JavaScript，提供一個(gè)全面的指南，幫助你掌握網(wǎng)站開發(fā)的動(dòng)態(tài)藝術(shù)。
什么是JavaScript？
JavaScript是一種高級(jí)、跨平臺(tái)的編程語言，專門用于在網(wǎng)頁上創(chuàng)建動(dòng)態(tài)和交互式內(nèi)容。它允許你操縱HTML元素、響應(yīng)用戶輸入并創(chuàng)建復(fù)雜的網(wǎng)頁應(yīng)用程序。
JavaScript語法
JavaScript語法與其他編程語言相似，包括：
JavaScript對(duì)象
對(duì)象是JavaScript中組織和存儲(chǔ)數(shù)據(jù)的基本單位。它們由鍵值對(duì)組成，其中鍵是屬性名稱，值是屬性值。例如，以下JavaScript對(duì)象表示一個(gè)人的信息：
const person={
name: "John Doe",
age: 30,
occupation: "Software Engineer"
};
JavaScript事件
事件是用戶與網(wǎng)頁交互時(shí)觸發(fā)的。JavaScript允許你偵聽事件并相應(yīng)地執(zhí)行代碼。最常見的事件類型包括：
JavaScript DOM
文檔對(duì)象模型（DOM）是JavaScript與網(wǎng)頁交互的接口。它允許你訪問和修改HTML元素及其屬性。例如，以下JavaScript代碼獲取頁面中所有段落元素并將其文本設(shè)置為紅色：
const paragraphs=document.querySelectorAll("p");
paragraphs.forEach((paragraph)=> {
paragraph.style.color="red";
});
學(xué)習(xí)JavaScript
學(xué)習(xí)JavaScript相對(duì)容易，有許多在線資源和教程可供使用。以下是一些提示：
掌握J(rèn)avaScript的好處
掌握J(rèn)avaScript有很多好處，包括：
結(jié)論
JavaScript是賦予網(wǎng)站生命力的編程語言。通過理解其語法、對(duì)象和事件，你可以解鎖創(chuàng)建動(dòng)態(tài)、交互式和用戶友好的網(wǎng)頁的能力。無論你是想增強(qiáng)現(xiàn)有網(wǎng)站的功能還是從頭開始開發(fā)新的應(yīng)用程序，掌握J(rèn)avaScript都是必不可少的。
本文主要理理js模塊化相關(guān)知識(shí)。
涉及到內(nèi)聯(lián)腳本、外聯(lián)腳本、動(dòng)態(tài)腳本、阻塞、defer、async、CommonJS、AMD、CMD、UMD、ES Module。順帶探究下Vite。
假設(shè)你是一個(gè)前端新手，現(xiàn)在入門，那么我們創(chuàng)建一個(gè)html頁面，需要新建一個(gè)index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p id="content">hello world</p>
</body>
</html>如果需要在頁面中執(zhí)行javascript代碼，我們就需要在 HTML 頁面中插入 <script> 標(biāo)簽。
有2種插入方式：
1、放在<head>中
2、放在<body>中
比如，點(diǎn)擊hello world之后，在hello world后面加3個(gè)感嘆號(hào)的功能，我們?cè)趆ead中加入script標(biāo)簽，并給hello world綁定點(diǎn)擊事件：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function myFunction() {
document.getElementById('content').innerHTML='hello world!!!'
}
</script>
</head>
<body>
<p id="content" onclick="myFunction()">hello world</p>
</body>
</html>如果加在body中，一般放在body的最后面：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p id="content" onclick="myFunction()">hello world</p>
<script>
function myFunction() {
document.getElementById('content').innerHTML='hello world!!!'
}
</script>
</body>
</html>簡(jiǎn)單的邏輯我們可以用這2種方式寫，這種方式叫做內(nèi)聯(lián)腳本。
當(dāng)邏輯復(fù)雜時(shí)，我們可以把上面的script標(biāo)簽中的代碼抽取出來，比如在html的同級(jí)目錄創(chuàng)建一個(gè)js文件夾，里面新建一個(gè)a.js的文件。
a.js中寫上面script標(biāo)簽中的代碼：
function myFunction() {
document.getElementById('content').innerHTML='hello world!!!'
}上面的script標(biāo)簽則可以改成：
<script src="./js/a.js"></script>上面的2種寫法，瀏覽器在加載html時(shí)，遇到script標(biāo)簽，會(huì)停止解析html。
內(nèi)聯(lián)腳本會(huì)立刻執(zhí)行；外聯(lián)腳本會(huì)先下載再立刻執(zhí)行。
等腳本執(zhí)行完畢才會(huì)繼續(xù)解析html。
（html解析到哪里，頁面就能顯示到哪里，用戶也能看到哪里）
比如下面的代碼：
<p>...content before script...</p>
<script src="./js/a.js"></script>
<p>...content after script...</p>解析到第一個(gè)p標(biāo)簽，我們能看到...content before script...顯示在了頁面中，然后瀏覽器遇到script標(biāo)簽，會(huì)停止解析html，而去下載a.js并執(zhí)行，執(zhí)行完a.js才會(huì)繼續(xù)解析html，然后頁面中才會(huì)出現(xiàn)...content after script...。
我們可以通過Chrome的Developer Tools分析一下index.html加載的時(shí)間線：
這會(huì)導(dǎo)致2個(gè)問題：
1、腳本無法訪問它下面的dom；
2、如果頁面頂部有個(gè)笨重的腳本，在它執(zhí)行完之前，用戶都看不到完整的頁面。
對(duì)于問題2，我們可以把腳本放在頁面底部，這樣它可以訪問到上面的dom，且不會(huì)阻塞頁面的顯示：
<body>
...all content is above the script...
<script src="./js/a.js"></script>
</body>但這不是最好的辦法，我們接著往下看。
我們給script標(biāo)簽加defer屬性，就像下面這樣：
<p>...content before script...</p>
<script defer src="./js/a.js"></script>
<p>...content after script...</p>defer 特性告訴瀏覽器不要等待腳本。于是，瀏覽器將繼續(xù)解析html，腳本會(huì)并行下載，然后等 DOM 構(gòu)建完成后，腳本才會(huì)執(zhí)行。
這樣script標(biāo)簽不再阻塞html的解析。
這時(shí)再看時(shí)間線：
需要注意的是，具有 defer 特性的腳本保持其相對(duì)順序。
比如：
<script defer src="./js/a.js"></script>
<script defer src="./js/b.js"></script>上面的2個(gè)腳本會(huì)并行下載，但是不論哪個(gè)先下載完成，都是先執(zhí)行a.js，a.js執(zhí)行完才會(huì)執(zhí)行b.js。
這時(shí)，如果b.js依賴a.js，這種寫法將很有用。
另外需要注意的是，defer 特性僅適用于外聯(lián)腳本，即如果 script標(biāo)簽沒有 src屬性，則會(huì)忽略 defer 特性。
我們可以給script標(biāo)簽加async屬性，就像下面這樣：
<script async src="./js/a.js"></script>這會(huì)告訴瀏覽器，該腳本完全獨(dú)立。
獨(dú)立的意思是，DOM 和其他腳本不會(huì)等待它，它也不會(huì)等待其它東西。async 腳本就是一個(gè)會(huì)在加載完成時(shí)立即執(zhí)行的完全獨(dú)立的腳本。
這時(shí)再看時(shí)間線：
可以看到，雖然下載a.js不阻塞html的解析，但是執(zhí)行a.js會(huì)阻塞。
還需要注意多個(gè)async時(shí)的執(zhí)行順序，比如下面這段代碼：
<p>...content before script...</p>
<script async src="./js/a.js"></script>
<script async src="./js/b.js"></script>
<p>...content after script...</p>兩個(gè)p標(biāo)簽的內(nèi)容會(huì)立刻顯示出來，a.js和b.js則并行下載，且下載成功后立刻執(zhí)行，所以多個(gè)async時(shí)的執(zhí)行順序是誰先下載成功誰先執(zhí)行。
一些比較獨(dú)立的腳本，比如性能監(jiān)控，就很適合用這種方式加載。
另外，和defer一樣，async 特性也僅適用于外聯(lián)腳本。
我們可以動(dòng)態(tài)地創(chuàng)建一個(gè)script標(biāo)簽并append到文檔中。
let script=document.createElement('script')
script.src='/js/a.js'
document.body.append(script)append后腳本就會(huì)立刻開始加載，表現(xiàn)默認(rèn)和加了async屬性一致。
我們可以顯示的設(shè)置script.async=false來改變這個(gè)默認(rèn)行為，那么這時(shí)表現(xiàn)就和加了defer屬性一致。
上面的這些寫法，當(dāng)script標(biāo)簽變多時(shí)，容易導(dǎo)致全局作用域污染，還要維護(hù)書寫順序，要解決這個(gè)問題，需要一種將 JavaScript 程序拆分為可按需導(dǎo)入的單獨(dú)模塊的機(jī)制，即js模塊化，我們接著往下看。
很長(zhǎng)一段時(shí)間 JavaScript 沒有模塊化的概念，直到 Node.js 的誕生，把 JavaScript 帶到服務(wù)端，這時(shí)，CommonJS誕生了。
CommonJS定義了三個(gè)全局變量：
require，exports，modulerequire 讀入并執(zhí)行一個(gè) js 文件，然后返回其 exports 對(duì)象；
exports 對(duì)外暴露模塊的接口，可以是任何類型,指向 module.exports；
module 是當(dāng)前模塊，exports 是 module 上的一個(gè)屬性。
Node.js 使用了CommonJS規(guī)范。
比如：
// a.js
let name='Lily'
export.name=name
// b.js
let a=require('a.js')
console.log(a.name) // Lily由于CommonJS不適合瀏覽器端，于是出現(xiàn)了AMD和CMD規(guī)范。
AMD（Asynchronous Module Definition） 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
基本思想是，通過 define 方法，將代碼定義為模塊。當(dāng)這個(gè)模塊被 require 時(shí)，開始加載依賴的模塊，當(dāng)所有依賴的模塊加載完成后，開始執(zhí)行回調(diào)函數(shù)，返回該模塊導(dǎo)出的值。
使用時(shí)，需要先引入require.js：
<script src="require.js"></script>
<script src="a.js"></script>然后可以這樣寫：
// a.js
define(function() {
let name='Lily'
return {
name
}
})
// b.js
define(['a.js'], function(a) {
let name='Bob'
console.log(a.name) // Lily
return {
name
}
})CMD（Common Module Definition） 是 Sea.js 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
使用時(shí)，需要先引入sea.js：
<script src="sea.js"></script>
<script src="a.js"></script>然后可以這樣寫：
// a.js
define(function(require, exports, module) {
var name='Lily'
exports.name=name
})
// b.js
define(function(require, exports, module) {
var name='Bob'
var a=require('a.js')
console.log(a.name) // 'Lily'
exports.name=name
})UMD (Universal Module Definition) 目的是提供一個(gè)前后端跨平臺(tái)的解決方案(兼容全局變量、AMD、CMD和CommonJS)。
實(shí)現(xiàn)很簡(jiǎn)單，判斷不同的環(huán)境，然后以不同的方式導(dǎo)出模塊：
(function (root, factory) {
if (typeof define==='function' && (define.amd || define.cmd)) {
// AMD、CMD
define([], factory);
} else if (typeof module !=='undefined' && typeof exports==='object') {
// Node、CommonJS
module.exports=factory();
} else {
// 瀏覽器全局變量
root.moduleName=factory();
}
}(this, function () {
// 只需要返回一個(gè)值作為模塊的export
// 這里我們返回了一個(gè)空對(duì)象
// 你也可以返回一個(gè)函數(shù)
return {};
}));AMD 和 CMD 是社區(qū)的開發(fā)者們制定的模塊加載方案，并不是語言層面的標(biāo)準(zhǔn)。從 ES6 開始，在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊化功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，完全可以取代上文的規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。
ES6 的模塊自動(dòng)采用嚴(yán)格模式。模塊功能主要由兩個(gè)命令構(gòu)成：export和import。
export命令用于規(guī)定模塊的對(duì)外接口；
import命令用于輸入其他模塊提供的功能。
比如上面的代碼，我們可以這樣寫:
// a.js
const name='Lily'
export {
name
}
// 等價(jià)于
export const name='Lily'
// b.js
import { name } from 'a.js'
console.log(name) // Lily
// b.js
import * as a from 'a.js'
console.log(a.name) // Lily此外，還可以用export default默認(rèn)導(dǎo)出的寫法：
// a.js
const name='Lily'
export default {
name
}
// b.js
import a from 'a.js'
console.log(a.name) // Lily如果只想運(yùn)行a.js，可以只import:
// b.js
import 'a.js'我們可以給script標(biāo)簽加type=module讓瀏覽器以 ES Module 的方式加載腳本：
<script type="module" src="./js/b.js"></script>這時(shí)，script標(biāo)簽會(huì)默認(rèn)有defer屬性（也可以設(shè)置成async），支持內(nèi)聯(lián)和外聯(lián)腳本。
這時(shí)我們運(yùn)行打開index.html，會(huì)發(fā)現(xiàn)瀏覽器報(bào)錯(cuò)了：
這是因?yàn)?type=module 的 script 標(biāo)簽加強(qiáng)了安全策略，瀏覽器加載不同域的腳本資源時(shí)，如果服務(wù)器未返回有效的 Allow-Origin 相關(guān) CORS 頭，會(huì)禁止加載改腳本。而這里啟動(dòng)的index.html是一個(gè)本地文件（地址是file://路徑），將會(huì)遇到 CORS 錯(cuò)誤，需要通過一個(gè)服務(wù)器來啟動(dòng) HTML 文件。
在瀏覽器支持 ES Module 之前，我們用工具實(shí)現(xiàn)JavaScript模塊化的開發(fā)，比如webpack、Rollup 和 Parcel 。但是當(dāng)項(xiàng)目越來越大后，本地?zé)岣略絹碓铰?，?Vite 旨在利用ESM解決上述問題。
Vite使用簡(jiǎn)單，可以去官網(wǎng)(https://cn.vitejs.dev/)看看。
老的規(guī)范了解即可，未來是ES Module的，用Vite可以極大的提升開發(fā)時(shí)的體驗(yàn)，生產(chǎn)環(huán)境用Rollup打包。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
