javascript
03-JavaScript
1、介紹
JavaScript
JavaScript:一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,
內置支持類型。它的解釋器被稱為 JavaScript 引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言。
組成部分:
- ECMAScript: JS 基礎語法(規定 關鍵字 運算符 語句 函數等等…)
- BOM: 瀏覽器對象模型
- DOM: 文檔對象模型
作用:修改html頁面的內容;修改html的樣式;完成表單的驗證。
注意:JS 可以在頁面上直接寫,也可以單獨出去;JS 的文件的后綴名 .js
JS 和 HTML 的整合:
- 方式1:在頁面上直接寫,將 js 代碼放在 <script></script> 標簽中,一般放在head 標簽中
- 方式2:獨立的 js 文件,通過 script 標簽的src屬性導入。eg:<script type="text/javascript" src="test.js" ></script>
2、JavaScript 基礎
JS 中的變量聲明:
- var 變量名=初始化值;
- var 變量名; 變量名=初始化值;
注:var可以省略,建議不要省略;一行要以分號結尾,最后一個分號可以省略,建議不要省略。
JS 的數據類型:
1、原始類型(5種)
- Null
- String
- Number
- Boolean
- Undefined
通過 typeof 運算符可以判斷一個值或者變量是否屬于原始類型,若屬于原始類型,還可以判斷出屬于那種原始類型。typeof 變量|值;
若變量為 null,使用 typeof 彈出的值 object
使用 typeof 的返回值:
- undefined - 如果變量是 Undefined 類型的
- boolean - 如果變量是 Boolean 類型的
- number - 如果變量是 Number 類型的
- string - 如果變量是 String 類型的
- object - 如果變量是一種引用類型或 Null 類型的
2、引用類型
運算符:
關系運算符:
- 兩邊值都是字符,比較 ascii 碼
- 兩邊都是數字,和 java 一樣
- 一邊是數字,一遍是字符串形式的數字 eg:3>"2" 可以比較,將字符串形式的數字轉換成數字在進行比較。
- 一邊是數字,一遍是普通字符串 eg:3>"hello" 可以比較,值永遠是 false
等性運算符:== 只判斷值是否相同;=== 不僅判斷是否相同,還要判斷類型是否相同
"66"==66 true "666"===666 false
JS 的語句:
if、while、for 等和 java 一樣,switch 和 java 一樣(區別:switch 后面跟字符串,還可以跟變量)
JS 操作:
獲取元素:var obj=document.getElementById("id值");
獲取元素的value屬性:var val=document.getElementById("id值").value;
設置元素的value屬性:document.getElementById("id值").value="sdfsdf";
獲取元素的標簽體:var ht=document.getElementById("id值").innerHTML;
設置元素的標簽體:document.getElementById("id值").innerHTML="ssss";
定義函數:
- 方式1:function 函數名(參數列表){函數體}
方式2:var 函數名=function(參數列表){函數體}
注意:函數聲明的時候不用聲明返回值類型;參數列表上不要寫參數類型;通過return 結束方法和將值返回;函數調用的時候:函數名(參數)
事件:
- onclick 單擊
- onsubmit 表單提交,加在 form 表單上的 onsubmit="return 函數名()" ,函數返回值為boolean類型
- onload 頁面加載成功或者元素加載成功
事件和函數綁定:
方式1:通過元素的事件屬性,<xxx onxxx="函數名(參數列表)">,若參數為 this 是將當前的 dom 對象傳遞給了函數
方式2:給元素派發事件(相當于給元素綁定事件)
document.getElementById("id值").onxxx=function(){...}; document.getElementById("id值").onxxx=函數名;注意:內存中應該存在該元素才可以派發事件,怎么理解?因為網頁是從前往后解析,如果把派發事件寫在頁面元素的前面,而HTML頁面其實還沒加載完畢,在這之前獲取元素是獲取不到,即不能派發事件。
做法:
- 將 js 代碼放在html頁面的最下面
- 在頁面加載成功之后在運行 js 代碼 onload 事件.
?
3、BOM(瀏覽器對象模型)
所有的瀏覽器都有 5 個對象。
- window:窗口
- location:定位信息 (地址欄)
- history:歷史
? Windows 對象詳解
如果文檔包含框架(frame 或 iframe 標簽),瀏覽器會為 HTML 文檔創建一個 window 對象,并為每個框架創建一個額外的 window 對象。
PS:若是 window 對象的屬性和方法,調用的時候可以省略 window
常用的屬性:通過 window 可以獲取其他的四個對象
- window.location 等價于 location
- window.history 等價于 history
- …
常用的方法:
- 消息框:
alert("....") 警告框
confirm("你確定要刪除嗎?")確定框,返回值:boolean
prompt("請輸入您的姓名") 輸入框,返回值:你輸入的內容 定時器:
設置定時器:setInterval(code,毫秒數):周期執行;setTimeout(code,毫秒數):延遲 多長事件后 只執行一次,例如:setInterval(showAd,4000);,serInterval("showAd()",4000);
清除定時器:clearInterval(id):,clearTimeout(id):打開和關閉:open(url) 打開;close() 關閉
- 消息框:
? location 對象:定位信息,地址欄
常用屬性:
- href 獲取或者設置當前頁面的 url(定位信息)
- location.href; 獲取 url
- location.href=”…”;設置 url,相當于 a 標簽,超鏈接
? history 對象:操作歷史*
- back(); 后退
- forward(): 向前
go(int)
- go(-1) 相當于 back()
- go(1) 相當于 forward()
4、DOM(文檔對象模型)
就是我們的 HTML 代碼加載到內存中會形成一顆 document 樹。
節點:
- 文檔節點 document
- 元素節點 element
- 屬性節點 attribute
- 文本節點 text
獲取一個元素節點:通過 document 獲取
操作元素的屬性:dom對象.屬性
操作元素的標簽體:dom對象.innerHTML
5、其他及注意
1、在方法中 (function()) this 指代的是當前的元素(當前的 dom 對象)
例如:
2、事件總結:
常見事件:
- 焦點事件★:onfocus、onblur
- 表單事件:onsubmit、onchange 改變
- 頁面加載事件★:onload
- 鼠標事件(掌握):onclick
- 鼠標事件(了解):ondblclick 雙擊、onmousedown 按下、onmouserup 彈起、onmousemove 移動、onmouserover 懸停、onmouserout 移出
- 鼠標事件(理解):onkeydown 按下、onkeyup 彈起、onkeypress 按住
3、阻止默認事件的發生;阻止事件傳播
4、引用型類似總結:
- 原始類型中的 String Number Boolean 都是偽對象,可以調用相應的方法
- Array:數組
String:
語法:new String(值|變量);//返回一個對象String(值|變量);//返回原始類型 常用方法:substring(start,end):[start,end)substr(start,size):從索引為指定的值開始向后截取幾個charAt(index):返回在指定位置的字符。indexOf(""):返回字符串所在索引replace():替換split():切割常用屬性:lengthBoolean:
語法:new Boolean(值|變量);Boolean(值|變量);非0數字 非空字符串 非空對象 轉成trueNumber:語法
語法:new Number(值|變量);Number(值|變量); 注意:null====>0 fale====>0 true====>1字符串的數字=====>對應的數字其他的NaNDate:
new Date(); 常用方法:toLocalString()RegExp:正則表達式
語法:直接量語法 /正則表達式/參數直接量語法 /正則表達式/new RegExp("正則表達式")new RegExp("正則表達式","參數") 參數:i:忽略大小寫g:全局常用方法:test() :返回值為booleanMath:
Math.常量|方法 Math.PI Math.random() [0,1)全局:
decodeURI() 解碼某個編碼的 URI。 encodeURI() 把字符串編碼為 URI。Number():強制轉換成數字 String():轉成字符串parseInt():嘗試轉換成整數 parseFloat():嘗試轉換成小數eval() 計算 JavaScript 字符串,并把它作為腳本代碼來執行。
總結
以上是生活随笔為你收集整理的03-JavaScript的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 02-CSS
- 下一篇: Spring学习笔记1