目錄
前言
一.JavaScript的簡介
??概念
??學習內容
二.JavaScript的引入方式
??內部腳本
??外部腳本
三.JavaScript的基礎語法
??語法的書寫
??變量?
? 全局變量? ? ??
?局部變量
?常量
???JavaScript的數據類型
??JavaScript運算符
?運算符的講解
?類型轉換
??流程控制語句
四.JS函數
五.JS對象
??Array講解
?Array基本知識
?Array之屬性與方法
??String講解
?String之屬性與方法
??JSON對象
?自定義對象
?JSON
六.JS之BOM
??window
??Location
七.JS之DOM
??如何獲取該元素對象
??修改文本內容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
八.事件監(jiān)聽
??常見事件
??事件綁定
總結
??個人主頁:tq02的博客_CSDN博客-C語言,Java,Java數據結構領域博主
?? 本文由 tq02 原創(chuàng),首發(fā)于 CSDN??
???本章講解內容:JavaScript的全面簡潔講解??歡迎各位→點贊?? +?收藏? +?評論??+關注?
?編譯器:VS Code
前言
? ? ? ? 本博文主要簡單講解JavaScript的概要知識,為了后端而作準備,雖然是概要知識,但是依然是十分主要的知識點,更好的了解前端知識,以便后期后端知識的學習。
官方幫助手冊:https://www.w3school.com.cn/
一.JavaScript的簡介
??概念
- JavaScript (簡稱:JS) 是一門跨平臺、面向對象的腳本語言。是用來控制網頁行為的,它能使網頁可交互。
- JavaScript和Java 是完全不同的語言,不論是概念還是設計。但是基礎語法類似。
- JavaScript在1995年由 Brendan Eich 發(fā)明,并于1997年成為ECMA標準
- ECMAScript 6(ES6)是最新的JavaScript版本(發(fā)布于2015年)。
??學習內容
JS主要學習以下內容:?
- JavaScript是控制網頁行為的,因此需要引入到HTML文檔,而引入的方式本文會有講解
- Java和JavaScript毫無聯(lián)系,只是名字有點相似,但是在基礎語法方面類似,并且JavaScript是一門弱類型語言,且有單獨的數據類型。
- JS函數不同于Java函數,主要用于是被設計為執(zhí)行特定任務的代碼塊。
- JS對象,常用的對象,例如Array、String等,以及Json、BOM
- JS事件綁定等
二.JavaScript的引入方式
將JS代碼與HTML文檔代碼結合,如此一來便可以控制網頁的行為,而引入方式有2種,分別為:內部腳本和外部腳本
??內部腳本
內部腳本:將JS代碼引入到HTML頁面當中
JS代碼?內部引入?要求:
- JavaScript代碼必須位于<script>? </script>標簽之間
- 在HTML文檔中,可以在任意地方,放置任意數量的<script>
- 一般會把腳本置于<body>元素的底部,可改善顯示速度
例如:
//script可在任意位置
<html lang="en">
<head>
<title>JS代碼</title>
<script>/* JS代碼 */</script>
</head>
<body>
<script>/* JS代碼 */</script>
</body>
<script>/* JS代碼 */</script>
</html>
??外部腳本
外部腳本:將JS代碼定義在外部JS文件(xx.js 文件)中,然后引入到 HTML頁面中
JS代碼 外部引入?要求:
- 外部JS文件中,只包含]S代碼,不包含<script>標簽
- <script>標簽不能自閉合
引入語法:<script src="js文件"></script>
例如:
//js文件--new.js
代碼文件
//HTML文件---old.html
<html lang="en">
<head>
<title>JS代碼</title>
</head>
<body>
<script src="new.js"></script>
//自閉合:<script src="new.js"/> 錯誤,不可以這樣
</body>
</html>
三.JavaScript的基礎語法
基礎語法包括三種:語法書寫、變量、數據類型和運算符及流程控制語句
注:JavaScript是弱類型語言、JavaScript的運算符和流程控制語句和Java是十分相似的。
??語法的書寫
JavaScript語法的基本要求:
- 區(qū)分大小寫:與Java 一樣,變量名、函數名以及其他一切東西都是 區(qū)分大小寫 的
- 每行結尾的分號可有可無,但是建議大家使用。
- 注釋:? ?單行注釋: //注釋內容 ????????多行注釋: /*注釋內容*/
- 大括號代表代碼塊
JavaScript的輸出形式有三種方式:
- window.alert()
將括號的內容寫在警告框之中,瀏覽器負責彈出,注:可以將window.省略,直接使用alert()
- document.write()
將括號中的信息填入到網頁之中
- console.log()
將括號內的內容寫入控制臺,控制臺:網頁->右擊 "檢查" ->點擊 "console"
代碼示例:
<html lang="en">
<head>
<title>JS輸出</title>
</head>
<body>
<script>
window.alert("我喜歡學習");
document.write("我喜歡Java");
console.log("我喜歡中國");
</script>
</body>
</html>
輸出結果:
??變量?
? ? ? ?JavaScript的變量聲明不像Java,會使用各種數據類型聲明,目前JavaScript有兩種關鍵字可以定義變量,分別為:var(全局變量)、let(局部變量)
示例:var a=10; let b=20
變量名需要遵循如下規(guī)則:
- ?組成字符可以是任何字母、數字、下劃線()或美元符號 (S)
- 數字不能開頭
- 建議使用駝峰命名
JavaScript是一門弱類型語言,變量可以存放各種類型的值。因此存在著原本的值被其他類型替換
ECMAScript 6新增了let(局部變量)、const(常量)
?? 全局變量? ? ??
? ? ? 關鍵字:var? ? ?特點:1、作用域很大? ?2、可重復定義
<script>
{
var a=10;
var a="tq02";
}
alert(a);
</script>
其中a被定義了兩次,分別為10和"tq02",而最后定義是tq02,因此a為tq02。
?局部變量
????關鍵字:let? ? ? 特點:1、作用域為所在的代碼塊? ? 2、不可以重復聲明
<html lang="en">
<head>
<title>JS輸出</title>
</head>
<body>
<script>
var a=10;
var a="tq02";
//不可以重復聲明
//let a="20";
{
let a=20;
alert(a); //警告框輸出為20;出了代碼塊就失效了
}
window.alert(a);
document.write("我喜歡Java");
console.log("我喜歡中國");
</script>
</body>
</html>
?常量
關鍵字:const? ? ? 特點:一旦聲明,常量的值就不可以改變,編譯時,不會報錯,但無法編譯成功
<html lang="en">
<head>
<title>JS輸出</title>
</head>
<body>
<script>
const a=10;
// a="tq02"
window.alert(a);
</script>
</body>
</html>
???JavaScript的數據類型
????????因為JavaScript是弱類型語言,在定義變量時,不用指定數據類型,但是JavaScript是存在數據類型的,JavaScript數據類型分為原始類型、引用類型?,引用類型就是JS函數,在下一章有詳細講解,我們主要講解原始類型
原始類型 | 取值 |
---|---|
number | 數字(小數、整數、NAN(not a numer)) |
string | 字符串,單雙引號皆可 |
boolean | true、false |
null | 對象為空 |
undefined | 當聲明的變量未初始化時,默認為underfined |
問:在平時中我們應該如何查看變量的元素類型呢?
答:使用關鍵字:typeof
<script>
//number類型
alert(typeof 3);
alert(typeof 3.15);
//string
alert(typeof "tq02");
alert(typeof 'tq02');
//boolean
alert(typeof true);
alert(typeof false);
//object
alert(typeof null);
//underfined
var a;
alert(typeof a);
而細心的人一定可以發(fā)現(xiàn),為什么null的數據類型是object?。?/p>
官方作出的解釋:這實際上是 JavaScript 最初實現(xiàn)中的一個錯誤,然后被 ECMAScript 沿用了。現(xiàn)在,null 被認為是對象的占位符,從而解釋了這一矛盾,但從技術上來說,它仍然是原始值。
??JavaScript運算符
?運算符的講解
JavaScript運算符 | |
算數運算符? | ? ? ? + ? ? ?— ? ?* ? ? ?/ ? ? %? ?++? ?-- |
關系運算符? | ? ?>? <? ?>=? ? <= ? ?!= ? ?==? ? === |
邏輯運算符? | ? ?&& ? ? ? || ? ! |
條件(三目)運算符? | 條件表達式?true_value:false_value |
賦值運算符? | ?= ? ? +=? ? ?*=? ?!=? ? - =? ? /=? ? ?%=? ? |
JavaScript的運算符和Java大致一樣,但是不同的就在于 ===?不同于==, ===表示的是值與類型相同,而==為值相同
例如:
<script>
a=10;
alert(a=="10") //true
alert(a==="10") //false
<script>
如上圖,a=="10"時,a會自動進行類型裝換,因此相等,而a==="10",錯誤,因為類型不同。
?類型轉換
類型裝換分2種,字符串轉換成數字,其他類型轉換為boolean類型。
字符串轉換為數字
將字符串字面值轉換為數字,如果字面值不是數字,則轉換為NaN。
而在轉換的過程中有幾個特別注意的。
<script> parseInt("12") //12 parseInt("ABC12") //NaN parseInt("12AB") //12 </script>
注:如果字符串是數字+字母,則裝換為前面的數字
其他類型轉換為boolean類型
- Number:0 和 NaN為false 其他均為true
- String:空字符串為false? 其他轉換為true
- null和unde:均為false
代碼示例:
<script> if(0){ //0為false,不成立 alert("”0轉換為false"); } if(NaN){ //NaN為false,不成立 alert("NaN轉換為false"); } if(1){ alert("1轉換為true"); } if(""){ //空字符串為false,不成立 alert("false"); } if("tq02"){ //字符串為true, alert("true") } if(null||undefined){ //為false,不成立,不執(zhí)行 alert(false); }
?注:"? "不是空字符串,中間含有空格,因此為true
??流程控制語句
JavaScript流程控制語句有以下幾種,用法和Java是一致的。
- if....else if.....else
- switch
- for
- while
- do...while
四.JS函數
函數:被設計為執(zhí)行特定任務的代碼塊,通過使用關鍵字 function進行定義。
語法格式:
第一種定義方法 function 函數名(參數1,參數2..){ //執(zhí)行的代碼 } 第二種定義方法 var 變量名=function(參數1,參數2){ //待執(zhí)行代碼 }
注:1、形式參數不需要類型。因為JavaScript是弱類型語言
? ? ? ?2、返回值也不需要定義類型,可以在函數內部直接使用return返回即可
第一種定義方法代碼 展示:
//注:形式參數不需要類型,所以直接為參數名
function add(a,b){
return a+b;
}
var result=add(10,20);
?第二種定義方法代碼 展示:
var result=add(a,b){
return a+b;
};
//函數調用的方法一樣
add(20,30);
?函數調用時,需要注意一點,函數調用時,可以傳遞任意個數的參數,但是函數只接收前幾個。
例如:
var result=add(a,b){ //只接收20和30
return a+b;
};
add(20,30,50,60,70);
五.JS對象
JavaScript中含有很多對象,官方資料查找:https://www.w3school.com.cn/
而我們主要講解3種對象,JS當中最為重要的Array、String、JSON
??Array講解
?Array基本知識
Array對象,我們很熟悉,用于定義數組的。
定義方法:
- ?var? 變量名 =new Array(元素列表);
- var? ?變量名=[ 元素列表 ];
訪問方法:
- 變量名[ 下標值 ]? ? ? ? ?注:和Java一樣,從下標0開始。
特點:長度可變、類型可變
長度可變講解
<script>
var a=new Array(1,2,3,4);
a[10]=50;
</script>
????????如上述代碼,我定義了一個數組,長度為4位,然后我在下標為9的位置上,賦值為50,并沒有出錯,而有人會問那么下標4到下標8的值為什么呢?由于沒有賦值,因此為默認值undefined。
類型可變講解
<script>
var a=new Array(1,2,3,4);
a[10]=50;
a[6]="tq02";
</script>
? ? ? ? 在下標為5的位置上,賦值了tq02,而并沒有報錯,正常編譯。
?Array之屬性與方法
Array常用屬性:length。? ? ?作用:獲取數組長度
Array常用方法:
- forEach()? ? ? ?作用:遍歷數組,遍歷數組中有值的元素。
- push()? ? ? ? ? ?作用:添加元素,可一次性添加多個元素。
- splice()? ? ? ? ? 作用:刪除元素,從某個下標刪到某個下標。
forEach()方法
<script>
var a=[1,2,3,4,5,6,7,8];
a.forEach(function(e){
alert(e);
})
</script>
額外講一個箭頭函數,將函數關鍵字function刪去,如果有形參就使用,沒有就空著,然后打上箭頭(=>)。其他不變。例如將上述代碼修改為箭頭函數,使代碼更為簡潔
<script> var a=[1,2,3,4,5,6,7,8]; a.forEach((e)=>{ alert(e); }) </script>
push()方法
<script>
var a=[1,2,3,4,5,6,7,8];
a.push(3,4,5); //數組a添加了3個值
</script>
splice()方法
<script>
var a=[1,2,3,4,5,6,7,8];
a.splice(2,5); //從下標值2開始刪到下標值5
</script>
??String講解
String字符串對象創(chuàng)建方法有2種:
- var 變量名 = new String("....");
- var 變量名="....";
?String之屬性與方法
String常用屬性:length。? ? ?作用:獲取字符串長度
String常用方法:
- charAt()? ? ? ? ? ? ? ? 作用:返回指定下標值的字符
- indexOf()? ? ? ? ?作用:檢索字符串
- trim()? ? ? ? ? ? ? ? ? ? 作用:去除字符串兩邊的空格
- substring()? ? ? ? ? ? 作用:提取字符串中兩個指定索引號之間的字符
charAt() 方法
<script>
var a="abcdefg";
alert(a.charAt(3)); //彈出下標為3的d
</script>
indexOf()方法
<script>
var a="abcdefg";
alert(a.indexOf("cd")); //檢索到下標為2
</script>
trim()方法
<script>
var a=" abcdefg ";
alert(a.trim()); //將字符串兩端的空格去除
</script>
substring()方法
<script>
var a="abcdefghigk";
alert(a.substring(3,8)); //截取下標為3的d到下標7的h
</script> // 含頭不含尾,所以不含有下標為8的值
??JSON對象
?自定義對象
自己使用編譯器定義一個對象,以便操作。
語法格式:var? 對象名{
? ? ? ? ? ? ? ? ? ? ? ? 屬性名1:屬性值,
????????????????????????屬性名2:屬性值,
? ? ? ? ? ? ? ? ? ? ? ? ........? :? ? .........,
? ? ? ? ? ? ? ? ? ? ? ? 函數名(形參列表){ }
??????????????????};
調用方法:1、對象名.屬性名? ? ? ?2、對象名.函數名
?JSON
概念:JavaScript Object? Notation,JavaScript對象標記法
JSON是通過JavaScript對象標記法書寫的文本。
注意了,這是文本,也就是字符串。而對象就是自定義對象,由于是字符串,所以大括號里的屬性名也需要雙引號。
基礎語法:var 變量名='{"key1":value1,? ? ?"key2":value2,? ...............? }';
value數據類型:數字(整數、浮點數)、字符串(雙引號當中)、邏輯值(true、false)、數字(方括號中)、對象(花括號中)?
例如:
var a='{
"name":"tq02",
"sex":"男",
"age":22,
"addr":["背景","上海","西安"]
}'
- 問:如何調用JSON中key對應的value的值?
答:使用關鍵字parse,將json字符串 轉換 js對象? ?
問:那么可以講 js對象 轉換為 JSON字符串 嘛?
答:可以,使用stringify關鍵字進行轉換。
<script>
var a='{ "name":"tq02", "age":22 , "addr": ["北京","上海","四川"]}';
var j=JSON.parse(a); //轉換為了js對象
alert(j.addr);
alert(JSON.stringify(j)); //再次轉換為了JSON字符串
</script>
六.JS之BOM
概念:Browser 0bject Model 瀏覽器對象模型,允許avaScript與瀏覽器對話,JavaScript 將瀏覽器的各個組成部分封裝為對象。也就是說BOM就是由對象組成。
BOM組成:
- window:瀏覽器窗口對象
- Navigator:瀏覽器對象主要是瀏覽器的應用名稱、版本和內核
- Screen:屏幕對象
- History:歷史記錄對象
- Location:瀏覽器的地址欄對象
??window
問:如何使用window對象?
答:直接使用window就可以了
問:如何調用window對象的方法或者屬性?
答:使用window.對象/方法? 對了,使用方法時,可以省略window.
常用屬性:
- history: 對 History 對象的只讀引用。
- location: 用于窗口或框架的 Location 對象。
- navigator: 對Navigator 對象的只讀引用。
常見的方法:
- alert(): 顯示帶有一段消息和一個確認按鈕的警告框
- confirm(): 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框,并且有返回值
- setlnterval(): 按照指定的周期 (以毫秒計)來調用函數或計算表達式
- setTimeout(): 在指定的毫秒數后調用函數或計算表達式。
<script>
alert("tq02");
confirm("你確定刪除嘛");
//每兩秒執(zhí)行一次
var i=0;
setInterval(()=>
{
document.write(i++);
},2000)
//兩秒之后執(zhí)行該函數
setTimeout(()=>{
document.write(5000);
},2000)
</script>
??Location
Location:地址欄對象
使用方法:window.location,由于window.可以省略,因此直接使用location
屬性:href:設置或返回完整的URL。
<script>
location.;
</script>
七.JS之DOM
????????概念:Document Obiect Model,W3C(萬維網聯(lián)盟)的標準,文檔對象模型,定義了訪HTML和XML文檔的標準,分為3個不同的部分:1.Core DOM、2.XMLDOM、3.HTML DOM
1.Core DOM,將標記語言的各個組成部分封裝為對應的對象:
- Document: 整個文檔對象? ? ? ? 封裝的是整個文本
- Element:元素對象? ? ? ?封裝了文本的所有的標簽
- Attribute:屬性對象? ? ? ?封裝了所有標簽中的屬性
- Text:文本對象? ? ? ? ? ? ? 封裝了所有標簽之間的文本
- Comment: 注釋對象? ? 封裝了文本所有的注釋
2.XMLDOM-XML 文檔的標準模型,核心DOM的子集。
3.HTML DOM-HTML ,JavaScript可以通過DOM,進而對HTML進行操作:
- 改變HTML元素的內容
- 改變HTML元素的樣式(CSS)
- 對HTMLDOM 事件作出反應
- 添加和刪除HTML元素
注:我們主要學習HTML DOM-HTML、主要學習:如何獲取該元素對象、如何修改該對象內容
??如何獲取該元素對象
HTML中的HTML元素可以通過Document對象獲取,而Document對象是通過window對象獲取的。
而Document對象提供了以下以下獲取HTML元素對象的函數:
- 根據id屬性值獲取,返回單個Element對象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
var h1 = document.getElementById( 'h1');
- 根據標簽名稱獲取,返回Element對象數組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
var divs = document.getElementsByTagName( 'div');
- 根據name屬性值獲取,返回Element對象數組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
var hobbys = document.getElementsByName( 'hobby');
- ? ?根據class屬性值獲取,返回Element對象數組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
完整代碼示例:? ? ? ?var clss = document.getElementsByClassName('cls');
<html lang="en">
<head>
<title>Document</title>
<img id="h1" src="圖片鏈接"><br><br>
<div class="cls">csdn官網</div> <br>
<div class="cls">tq02網頁</div> <br>
<input type="checkbox" name="hobby">電影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戲
</head>
<body>
<script>
//1.獲取元素,根據id名獲取
var img=document.getElementById('h1');
alert(img);
//2.根據標簽獲取
var divs=document.getElementsByTagName('div');
for(let i=0;i<divs.length;i++){
alert(divs[i]);
}
//根據name屬性值獲取
var hobbys = document.getElementsByName( 'hobby');
for(let i=0;i<hobbys.length;i++){
alert(hobbys[i]);
}
//根據class屬性值獲取
var clss = document.getElementsByClassName('cls');
for(let i=0;i<clss.length;i++){
alert(clss[i]);
}
</script>
</body>
</html>
??修改文本內容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
??????通過DOM修改文本內容,我們需要使用到getElementsByClassName()方法;以及innerHTML屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
代碼示例? ------ 將csdn官網文字變?yōu)閯澣螒颍?/p>
<html lang="en">
<head>
<title>Document</title>
<img id="h1" src="圖片鏈接"><br><br>
<div class="cls">csdn官網</div> <br>
<div class="cls">tq02網頁</div> <br>
</head>
<body>
<script>
var a=doucument.getElementByClassName('cls');
var divs=a[0];
divs.innnerHTML="劃拳游戲";
</script>
</html>
八.事件監(jiān)聽
事件監(jiān)聽,顧名思義,分為事件和監(jiān)聽,兩者相輔相成。缺一不可。
事件:HTML事件指發(fā)生在HTML元素上的'事情',比如:按鈕被點擊,鼠標移動,按下鍵盤等等。
而計算機是如何監(jiān)聽到事件的發(fā)生呢?
答:通過事件綁定
??常見事件
事件名 | 說明 |
onclick | 鼠標單擊事件 |
onblur | 元素失去焦點 |
onfocus | 元素獲得焦點 |
onload | 某個頁面或圖像被完成加載 |
onsubmit | 當表單提交時觸發(fā)該事件 |
onkeydown | 某個鍵盤的鍵被按下 |
onmouseover | 鼠標被移到某元素之上 |
onmouseout | 鼠標從某元素移開 |
而下面的事件綁定,我們使用onclick
??事件綁定
? ? ? ? 事件綁定,有兩種方式
方式一:通過HTML標簽的事件屬性進行綁定
<input type="button" onclick="on()" value="按鈕1">
<script>
function on(){alert(!我被點擊了!');
}
</script>
解析:當點擊按鈕時,我們就可以通過事件屬性onclick,所綁定的on()方法,然后調用script中的on()方法
方式二:通過 DOM 元素屬性綁定
<input type="button" id="btn" value="按鈕2">
<script>
document.getElementById('btn' ).onclick=function(){
alert('我被點擊了!);
}
</script>
解析:通過document獲取指令DOM元素,然后再通過onclick屬性來綁定一個函數。
總結
????????看到這里,JavaScript的基本內容已經學會了,理論已經有了,是時候進行實踐操作了,JavaScript最重要最難的內容是DOM和事件監(jiān)聽,本文內容顯示有限,如果想更加深入學習,還是需要去看視頻進行加一步學習。文章來源:http://www.zghlxwxcb.cn/news/detail-515389.html
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ------------------懶惰的tq02文章來源地址http://www.zghlxwxcb.cn/news/detail-515389.html
到了這里,關于JavaWed第三章:JavaScript的全面知識的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!