什麼是JavaScript
1.JavaScript主要用於HTML的頁面,嵌入在HTML的源碼中
2.JavaScript是因特網上醉流行的腳本語言,它存在於全世界所有的web瀏覽器中能夠增強用戶和web站點和web應用之間的交互
3.JavaScript是一種弱類型的語言,沒有類型聲明,他的變量不必須具有一個明確的類型
4.JavaScript是腳本語言:可以用來編程並且直接執行源代碼的語言
5.JavaScript也是一種解釋性語言:在運行時將程序直接翻譯成機器語言
6.JavaScript是一種基於對象(object)和事件驅動,並具有安全性能的腳本語言,廣泛用於服務器,pc,移動設備
7.HTML5以後突出了JavaScript的重要性,如:
HTML5的繪圖支持,本地存儲,離線應用,客戶端通信等
JavaScript的特點
簡單性:
他是基於Java基本語句和控制語句之上的簡單而緊湊的設計,是學習Java的很好過渡,而且他的變量類型是弱類型,未採用嚴格的數據類型
安全性:
JavaScript不允許訪問本地的硬盤,不能講數據存儲到服務器上,不允許對網絡文檔進行修改和刪除
只可以通過瀏覽器實現信息瀏覽或動態交互,從而有效防止數據丟失
動態性:
JavaScript可以直接對用戶或客戶輸出作出響應,無序經過web程序,他對用戶採用事件驅動的方式進行,即某種操作動作引起的響應的事件響應
如:點擊鼠標,移動窗口,選擇菜單等
跨平臺:
JavaScript依賴於瀏覽器本身,於操作環境無關。
JavaScript的組成
1.JavaScript是ECMAScript,文檔對象模型(DOM),瀏覽器對象模型(BOM)由這三個部分組成
ECMAScript:是JavaScript的核心,描述了giant語言的基本語法和基本對象
DOM:描述了處理網頁內容的方法和接口,通過DOM可以訪問所有的HTML元素,連同他們所包含的文本和屬性,可以對其內容進行修改和刪除
同時可以創建新的元素
BOM:描述了與瀏覽器進行交互的方法和接口,BOM提供了獨立與內容而與瀏覽器窗口進行交互的對象
如:可以移動,調整瀏覽器大小的window對象,用於導航的location對象和history對象;
JavaScript原理
JavaScript的使用
JavaScript的基本結構
JavaScript的基本結構:
<script type="text/javascript">
JavaScript語句
</script>
說明:
<script>....</script>可以包含在文檔中的任何位,只需要保證一點: JavaScript代碼在使用前已讀取並加載到內容即可
<script>標籤有一個必選的屬性type:用來指明腳本類型,常用type="text/javascript"
type的可選值:
text/javascript:傳統寫法,瀏覽器支持度較好
application/JavaScript :標準寫法,但不是每一個瀏覽器都支持
text/jScript :
text/vbscript :
text/x-javascript:X前綴表示是實驗性的,不是標準類型,代表實驗階段
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("hello javascript");
</script>
</head>
<body>
<p id="test">測試文字</p>
</body>
</html>
網頁中引用JavaScript的方式
1.內部添加,使用<script>標籤
語法:
<script type="text/javascript">
JavaScript語句
</script>
2.鏈接外部的JavaScript文件
語法:
<script type="text/javaScript" src="xxx.js"></script>
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript">
alert("hello javascript");
</script>
-->
</head>
<body>
<script type="text/javascript" src="../js/outer.js"></script>
</body>
</html>
js代碼:
alert("測試");
3.HTML標籤中,作爲某個元素事件屬性值或者超鏈接href屬性值:
例如:
<input name="btn" type="button" value ="彈出消息框" οnclick="javaScript:alert(歡迎你)"/>
注意:
<script type="text/JavaScript" src="jsdemo.js"/> 錯誤,不可以使用單標籤,必須使用雙標籤
JavaScript的基本語法---注意事項
1.JavaScript的執行順序;按照HTML中出現的順序依次執行
2.JavaScript書寫時儘量嚴格區分大小寫
3.JavaScript的語句與語句之間忽略空白符和換行符
4.JavaScript通過\對代碼進行拆分
5.JavaScript使用;結束語句,最後一個可以省略,但不建議
6.JavaScript可以使用{}擴成一個語句組,形成一個塊block
注意:
JavaScript會忽略關鍵字、變量名、數字、函數名或者其他各元素之間的空格或換行符,我們可以使用縮進換行來使代碼整齊,提高可讀性
JavaScript的基本語法---註釋
註釋:
單行: //註釋內容
多行: //註釋內容
文檔: //註釋內容
JavaScript的基本語法---基本操作
1.頁面的彈出框:
alert();
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
alert("hello"+4+"\n"+9+"javascript");
</script>
</body>
</html>
2.向文檔中寫內容
docment.write();
輸入內容
換行操作
輸入標籤
說明:
如果在文檔已經加載完成後執行docment.write();,整個HTML頁面覆蓋
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{color: gray; text-decoration: none; white-space: pre;}
</style>
</head>
<body>
<p>測試文字</p>
<p>測試文字1</p>
</body>
</html>
<script type="text/javascript">
// document.write("你"<br/>"好");
document.write("<a href='#'>首頁\n文字</a>");
</script>
JavaScript基本語法---關鍵字和保留字
關鍵字和保留字:在JavaScript中具有特殊含義的單詞
JavaScript的保留關鍵字不可以用作變量、標籤或者函數名。
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
JavaScript基本語法--標識符
標識符
1.定義:給變量、函數、對象等指定的名字
標識符的命名規則:
1.區分大小寫
標識符首字符可以是下劃線(_)/美元符號($)/字母開始,不能是數字
不能包含JavaScript中的保留字和關鍵字
標識符的命名規範:
採用駝峯式命名,除第一個單詞外第一個首字母大寫,如: myCar
代碼屏蔽:
如果瀏覽器不支持JavaScript,可以使用<noscript></noscript>標籤顯示noscript中的內容
noscript元素用來定義在腳本未被執行時的代替內容(文本)
此標籤可悲用於識別<script>,標籤但無法支持其中的腳本瀏覽器
變量
變量:
概念:
javaScript的變量用於保存值或表達式,他的值可以改變
如:
x=2; x=y+z; x, y
命名規則:
1.變量建議以字母開頭
2.變量不推薦使用$或者下劃線
3.變量名對大小寫敏感(y和Y是兩個變量)
4.不能以數字開頭
5.見名知意
注意:
JavaScript語句和JavaScript變量都對大小寫敏感,變量名是標識符,遵循標識符的語法
變量的聲明:
聲明變量: var 變量名;
變量賦值: 變量名=值;
說明:
1.如果再次聲明JavaScript變量,該變量也不會丟失原始值
如: var x=5; var x;
2.重新賦值會覆蓋原來的值
如: var x=5; var x=7;
3.如果一個變量沒有賦值,他的初始化值爲undefined
4.可以在同一行聲明多個變量
5.聲明可以跨行
如:
var userName;
age;
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//var money=1000*1.5*1.5;
// document.write("本金是1000<br/>");
/var name="lucy",age=18,gender="女",classNo="1618";
// alert("姓名:"+name+"\n年齡"+age);
var a,b=9;
a=7;
alert(a+" "+b);
</script>
</body>
</html>
JavaScript的消息框
1.警告框:alert(xx);
警告框經常用於確保用戶可以得到某些信息。當警告框出現後,用戶需要點擊確定按鈕才能繼續下一步操作
2.確認框:comfirm(xx);
確認框用於用戶可以驗證或者接受某些信息,當確認框出現後,用戶需要點擊確定或取消按鈕才能進行下一步操作
如果用戶點擊確認返回值爲true
如果點擊取消,返回值爲false
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var result = confirm("確定刪除嗎?");
alert(result);
</script>
</body>
</html>
3.輸入框:
prompt(XX,默認值);
提示用戶在進入頁面前輸入某個值,
當提示框出現後,用戶需要輸入某個值,然後點擊
確定按鈕 :返回值爲輸入的值
取消按鈕: 返回值爲null
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
prompt("請輸入您的姓名","張三");
</script>
</body>
</html>