一.JS編寫(xiě)的位置
- 位置一：HTML代碼行內(nèi)（不推薦）
- image-20210510164843552
- 位置二：script標(biāo)簽中
- image-20210510164853197
- 位置三：?jiǎn)为?dú)的script文件
- image-20210510164902851
<body>
<!--
JS的編寫(xiě)位置
1.HTML代碼里
2.script標(biāo)簽里
3.單獨(dú)的JS文件里
-->
<div>div元素</div>
<!-- <a href="" onclick="alert('我是一個(gè)彈窗')">點(diǎn)我</a>
<a href="javascript:alert('我也是彈窗')">點(diǎn)我</a> -->
</body>
<script>
document.write('js文件');
</script>
<script src="./js/index.js"></script>
1.1 注意點(diǎn)
- script標(biāo)簽不能寫(xiě)成單標(biāo)簽：
- 在外聯(lián)式引用js文件時(shí)毁兆，script標(biāo)簽中不可以寫(xiě)JavaScript代碼邪媳，并且script標(biāo)簽不能寫(xiě)成單標(biāo)簽
- 即不能寫(xiě)成<script src="index.js"/>
- 省略type屬性：
- 在以前的代碼中，<script>標(biāo)簽中會(huì)使用 type="text/javascript"漾狼。
- 現(xiàn)在可不寫(xiě)這個(gè)代碼了，因?yàn)镴avaScript 是所有現(xiàn)代瀏覽器以及 HTML5 中的默認(rèn)腳本語(yǔ)言蔚携。
- 加載順序：
- 作為HTML文檔內(nèi)容的一部分议泵，JavaScript默認(rèn)遵循HTML文檔的加載順序，即自上而下的加載順序
- ==推薦將JavaScript代碼和編寫(xiě)位置放在body子元素的最后一行==
- ==JavaScript代碼嚴(yán)格區(qū)分大小寫(xiě)==
- HTML元素和CSS屬性不區(qū)分大小寫(xiě)娘扩，但是在JavaScript中嚴(yán)格區(qū)分大小寫(xiě)
==加載順序的案例==
1.JS代碼放在body后
GIF 2021-5-10 17-07-45.gif
2.JS代碼放在body前
image-20210510170930948
<title>JS的代碼放的位置</title>
<style>
.div {
width: 100px;
height: 100px;
background-color: pink;
transition: width 1s linear 0s, height 1s linear, background-color 1s linear 0s;
}
</style>
<!-- <script>
var div = document.querySelector(".div");
div.onclick = function () {
div.style.width = 300 + "px";
div.style.height = 300 + "px";
div.style.backgroundColor = "red"
}
</script> -->
<body>
<div class="div">div元素</div>
</body>
<script>
var div = document.querySelector(".div");
div.onclick = function () {
div.style.width = 300 + "px";
div.style.height = 300 + "px";
div.style.backgroundColor = "red"
}
</script>
二.JS注釋
- 單行注釋?zhuān)?
- image-20210510171408330
- 多行注釋?zhuān)?
- image-20210510171418715
- 文檔注釋
- image-20210510171428473
三.JS與瀏覽器的交互方式
- 方式一：彈出彈窗顯示內(nèi)容
- alert函數(shù)：接受一個(gè)參數(shù)
- image-20210510172651870
- 方式二：在控制臺(tái)打印（使用最多）
- console.log(內(nèi)容1, 內(nèi)容2)
- image-20210510172717522
- 方式三：將內(nèi)容輸入到界面顯示
- 通過(guò)document.write(寫(xiě)入的內(nèi)容)
- image-20210510172754621
- 方式四：接收用戶(hù)輸入的內(nèi)容：
- image-20210510172831684
四.定義變量
==變量：一小塊存儲(chǔ)數(shù)據(jù)的內(nèi)存空間==變量在運(yùn)行期間是可以改變的
Java是強(qiáng)類(lèi)型語(yǔ)言壮锻，JavaScript是弱語(yǔ)言類(lèi)型琐旁。
- 強(qiáng)類(lèi)型：在開(kāi)辟存儲(chǔ)空間時(shí)，定義了空間將來(lái)存儲(chǔ)的數(shù)據(jù)的數(shù)據(jù)類(lèi)型猜绣。只能存儲(chǔ)固定類(lèi)型的數(shù)據(jù)灰殴。
- 弱類(lèi)型：在開(kāi)辟存儲(chǔ)空間時(shí)，不定義將來(lái)存儲(chǔ)的數(shù)據(jù)的數(shù)據(jù)類(lèi)型途事，可以存放任意類(lèi)型的數(shù)據(jù)验懊。
4.1 定義變量的方式
在JavaScript中如何命名一個(gè)變量呢？
var 變量名稱(chēng)=變量賦值;
var 變量名尸变；變量名=初始化值义图；
- 變量的聲明：在JavaScript中聲明一個(gè)變量使用var關(guān)鍵字（后續(xù)學(xué)習(xí)ES6還有l(wèi)et、const聲明方式）
- 變量的賦值：使用=給變量進(jìn)行賦值召烂；
4.1.1 方式一：聲明并賦值
var age = 12;
4.1.2 方式二：先聲明碱工，后賦值，
var name;
name = "jason";
4.1.3 方式三：聲明多個(gè)變量
var a, b, c;
a = 10;
b = 5;
c = 8;
4.2 變量名規(guī)范：
4.2.1 變量命名規(guī)范：必須遵守
- 1.變量名只能以數(shù)字奏夫，字母怕篷，下劃線(xiàn)和$組成，不能以數(shù)字開(kāi)頭
- 2.變量名不能以JavaScript 關(guān)鍵字組成{if,int ,true,do ........}
- 3.變量名區(qū)分大小寫(xiě)
4.2.2 變量命名規(guī)范：建議遵守
- 多個(gè)單詞使用駝峰標(biāo)識(shí)
- 賦值=兩邊都加上一個(gè)空格
- 一條語(yǔ)句結(jié)束后加上分號(hào);
image-20210510221325888
五.基本數(shù)據(jù)類(lèi)型
目前酗昼，我們先掌握J(rèn)avaScript基本的數(shù)據(jù)類(lèi)型：
- – 數(shù)值型(數(shù)字類(lèi)型/數(shù)值類(lèi)型)（Number）
- – 字符串型（String）
- – 布爾型（Boolean）
- – 空類(lèi)型（Null）
- – 未定義型（Undefined）
5.1 Number(數(shù)值型)
- Number類(lèi)型也叫 數(shù)字類(lèi)型或數(shù)值類(lèi)型
- 數(shù)字的表示方法：十進(jìn)制（掌握）廊谓、十六進(jìn)制、二進(jìn)制麻削、八進(jìn)制（了解）
- image-20210510231246351
- 數(shù)字表示的范圍：
- ==最小值：Number.MIN_VALUE蒸痹，這個(gè)值為： 5e-324==
- ==最大值：Number.MAX_VALUE春弥，這個(gè)值為： 1.7976931348623157e+308==
- ==NaN，即非數(shù)值（Not a Number）是一個(gè)特殊的數(shù)值叠荠，JS中當(dāng)對(duì)數(shù)值進(jìn)行計(jì)算時(shí)沒(méi)有結(jié)果返回匿沛，則返回NaN。==
- isNaN榛鼎，用于判斷是否不是一個(gè)數(shù)字逃呼。不是數(shù)字返回true，是數(shù)字返回false者娱。
<script type="text/javascript">
/*
JS中的數(shù)值類(lèi)型
1.整數(shù)型和浮點(diǎn)型都是Number類(lèi)
2.JS中可以表示最大值
Number.MAX_VALUE 1.7976931348623157e+308
Number.MIN_VALUE 5e-324 大于零的最小值
3.如果數(shù)值大于最大值抡笼，則會(huì)返回
infinity 表示正無(wú)窮
-infinity 表示負(fù)無(wú)窮
3.1 如果使用typeof(infinity)會(huì)返回number
4. NaN 是一個(gè)特殊的數(shù)字，表示Not A Number,使用typeof檢查一個(gè)NaN也會(huì)返回number
5.進(jìn)制
5.1 16進(jìn)制
0X10就是16
0X100就是256 16*16=256
5.2 8進(jìn)制
0o10就是8
0o100就是64 8*8=64
5.3 2進(jìn)制
0b10 就是2
0b100 就是4
*/
var num = 123;
console.log(num);
var num2 = Number.MAX_VALUE;
console.log(num2);
var num3 = Number.MIN_VALUE;
console.log(num3);
var num4 = Number.MAX_VALUE * Number.MAX_VALUE;
console.log(num4); //Infinity
console.log(typeof (num4)); //number
var num5 = NaN;
console.log(typeof (num5)); //number
var str1 = "hello";
var num6 = parseInt(str1);
console.log(num6); //NaN
console.log("-----------------------");
var num16 = 0X10;
console.log(num16); //16
var num8 = 0o100;
console.log(num8); //64
var num22 = 0b100;
console.log(num22); //4
</script>
5.2 String(字符串型)
-
字符串類(lèi)型：****String
- 字符串類(lèi)型肺然，用于表示一段文字.
- 比如人的姓名：coderwhy蔫缸。地址：廣州市腿准。簡(jiǎn)介：認(rèn)真是一種可怕的力量际起。
字符串的表示可以使用單引號(hào)也可以使用雙引號(hào)。
-
轉(zhuǎn)義字符：掌握 ==\’ \” \t \n==四個(gè)的用法
-
轉(zhuǎn)義字符 表示符號(hào) ' 單引號(hào) " 雙引號(hào) \ 反斜杠 \n 換行符 \r 回車(chē)符 \t 制表符 \b 退格符
-
獲取字符串的長(zhǎng)度：length屬性
5.3 Boolean(布爾型)
- 布爾類(lèi)型用于表示真假：
- 比如是否畢業(yè). 是否有身份證. 是否購(gòu)買(mǎi)車(chē)票. 是否成年人.
- 兩個(gè)取值: true/false
5.4 Null(空值)
- Null類(lèi)型也是只有一個(gè)值：null
- 通常當(dāng)一個(gè)對(duì)象（Object類(lèi)型）不再使用時(shí)吐葱，可以賦值為null
5.5.Undefined(未定義型)
- Undefined 類(lèi)型只有一個(gè)值：undefined
- 在使用 var 聲明變量但未對(duì)其加以初始化時(shí)街望，這個(gè)變量的值就是 undefined
- typeof對(duì)沒(méi)有初始化和沒(méi)有聲明的變量都會(huì)返回undefined
- ==Null和Undefined的關(guān)系：==
- undefined值實(shí)際上是由null值衍生出來(lái)的，所以如果比較undefined和null是否相等弟跑，會(huì)返回true
- 但是轉(zhuǎn)化成數(shù)字時(shí)灾前，undefined為NaN，null為0
<script type="text/javascript">
/*
* Null（空值）類(lèi)型的值只有一個(gè)孟辑，就是null
* null這個(gè)值專(zhuān)門(mén)用來(lái)表示一個(gè)為空的對(duì)象
* 使用typeof檢查一個(gè)null值時(shí)哎甲，會(huì)返回object
*
* Undefined（未定義）類(lèi)型的值只有一個(gè)，就undefind
* 當(dāng)聲明一個(gè)變量饲嗽，但是并不給變量賦值時(shí)炭玫，它的值就是undefined
* 使用typeof檢查一個(gè)undefined時(shí)也會(huì)返回undefined
*/
var a = null;
var b = undefined;
console.log(typeof a);//Object
console.log(typeof(b));//undefined;
var str;
console.log(str);//undefined;
</script>
六.打印數(shù)據(jù)類(lèi)型
typeof:打印數(shù)據(jù)類(lèi)型
七.棧空間和堆空間
內(nèi)存的分類(lèi)：椕蚕海空間和堆空間
image-20210510235352165
七.轉(zhuǎn)換成數(shù)字類(lèi)型
7.1 ==其它類(lèi)型轉(zhuǎn)換為數(shù)值類(lèi)型==
7.1.1 Number(any)函數(shù)：將任意類(lèi)型轉(zhuǎn)成數(shù)字
1.字符串->數(shù)字
*1.1 如果是純數(shù)字型字符串吞加，會(huì)轉(zhuǎn)換為數(shù)字*
*1.2 如果是不是數(shù)字型字符串，則會(huì)顯示NaN*
*1.3 如果字符串是一個(gè)空串或者是一個(gè)全是空格的字符串尽狠，則轉(zhuǎn)換為0*
*2.布爾->數(shù)字*
*2.1 true返回1衔憨；*
*2.2 false返回0；*
*3.null->數(shù)字：返回0*
*4.undifined->數(shù)字：返回NaN*
image-20210511181435903
/*
3.其它類(lèi)型轉(zhuǎn)換為數(shù)值
3.1 使用Number()函數(shù)
1.字符串->數(shù)字
1.1 如果是純數(shù)字型字符串袄膏，會(huì)轉(zhuǎn)換為數(shù)字
1.2 如果是不是數(shù)字型字符串践图，則會(huì)顯示NaN
1.3 如果字符串是一個(gè)空串或者是一個(gè)全是空格的字符串，則轉(zhuǎn)換為0
2.布爾->數(shù)字
2.1 true返回1沉馆；
2.2 false返回0码党；
3.null->數(shù)字：返回0
4.undifined->數(shù)字：返回NaN
3.2 使用專(zhuān)門(mén)的方式對(duì)付字符串
1.parseInt()和parseFloat()：
1.1 可以將一個(gè)字符串中的有效的整數(shù)內(nèi)容去出來(lái)赫舒，然后轉(zhuǎn)換為Number
1.2 如果對(duì)非String使用parseInt()或parseFloat()，它會(huì)先將其轉(zhuǎn)換為String然后在操作
*/
var str = "abc";
var num1 = Number(str)
console.log(num1, typeof (num1)); //NaN number
var str2 = "123";
var num3 = Number(str3);
console.log(num3, typeof (num3)); //123 number
var str3 = "123abc";
var num4 = Number(str3);
console.log(num4, typeof (num4)); //NaN number
var str4 = '';
var num5 = Number(str4);
console.log(num5, typeof (num5)); //0 number
var bool = true;
var num2 = Number(bool);
console.log(num2, typeof (num2)); //1 number
var strNull = null;
var num6 = Number(strNull);
console.log(num6, typeof (num6)); //0 number
var strUndefined = undefined;
var num7 = Number(strUndefined);
console.log(num7, typeof (num7)); //NaN number
</script>
7.1.2 parseInt(string, radix)函數(shù)：將字符串轉(zhuǎn)換成整數(shù)類(lèi)型闽瓢，radix表示基數(shù)接癌，這里可以理解成進(jìn)制
- 如果第一個(gè)字符是數(shù)字或運(yùn)算符號(hào)，那么就開(kāi)始解析扣讼，直到遇到非數(shù)字字符缺猛，停止解析并得到解析結(jié)果；
- 如果第一個(gè)字符是非數(shù)字且非運(yùn)算符號(hào)椭符，則不解析并得到結(jié)果 NaN荔燎。
image-20210511181614173
<script>
/*
使用專(zhuān)門(mén)的方式對(duì)付字符串:如果對(duì)非String使用parseInt()或parseFloat()，它會(huì)先將其轉(zhuǎn)換為String然后在操作
1.parseInt(string, radix)：
1.1 可以將一個(gè)字符串中的有效的整數(shù)內(nèi)容去出來(lái)销钝，然后轉(zhuǎn)換為Number
1.2 可以進(jìn)行進(jìn)制轉(zhuǎn)換
2.parseFloat(string)
*/
console.log(parseInt('123')); //123
console.log(parseInt('123,1233')); //123
console.log(parseInt('123a')); //123
console.log(parseInt('a123')); //NaN
console.log(parseInt(null)); //NaN
console.log(parseInt(undefined)); //NaN
console.log(parseInt(true)); //NaN
console.log('------------------------')
console.log(parseInt("111", 2)); //7有咨，轉(zhuǎn)換為二進(jìn)制7
console.log(parseInt('100', 8)); //64,轉(zhuǎn)換為八進(jìn)制64
console.log(parseInt('111', 16)); //16^2+16^1*1+16^0*1=273,轉(zhuǎn)換為16進(jìn)制273
console.log('------------------------')
console.log(parseFloat('123,1233')); //123
console.log(parseFloat(null)); //NaN
</script>
7.1.3 parseFloat(string)函數(shù)：將字符串轉(zhuǎn)換成浮點(diǎn)類(lèi)型(小數(shù)類(lèi)型)
- 如果第一個(gè)字符是數(shù)字或運(yùn)算符號(hào)，那么就開(kāi)始解析蒸健，直到遇到非數(shù)字字符座享，停止解析并得到解析結(jié)果；
- 如果第一個(gè)字符是非數(shù)字且非運(yùn)算符號(hào)似忧，則不解析并得到結(jié)果 NaN渣叛。
image-20210511181625916
7.2==其它類(lèi)型轉(zhuǎn)換為字符串類(lèi)型==
7.2.1 方式一: 調(diào)用toString()方法
image-20210511190359266
7.2.2 方式二: String(內(nèi)容)
- toString()方法只能將數(shù)值類(lèi)型和布爾類(lèi)型轉(zhuǎn)換成字符串類(lèi)型，不能將Undefined和Null類(lèi)型轉(zhuǎn)成字符串類(lèi)型盯捌；
- String()函數(shù)能將所有基本類(lèi)型轉(zhuǎn)成字符串類(lèi)型淳衙；
image-20210511190432459
7.2.3 方式三:字符串拼接
image-20210511190442032
<script>
/*
其它類(lèi)型轉(zhuǎn)換字符串：
1 toString()方法：
1.1 該方法不會(huì)影響原變量，會(huì)生成新的數(shù)值變量
1.2 如果是null饺著，undefined使用該方法,會(huì)報(bào)錯(cuò)
2 String()方法：
2.1 使用String()函數(shù)做強(qiáng)制類(lèi)型轉(zhuǎn)換時(shí)箫攀，對(duì)于Number和Boolean實(shí)際上就是調(diào)用的toString()方法
2.2 但是對(duì)于null和undefined，就不會(huì)調(diào)用toString()方法幼衰，
它會(huì)將 null 直接轉(zhuǎn)換為 "null"靴跛，
將 undefined 直接轉(zhuǎn)換為 "undefined"
3.字符串拼接
3.1 隱式轉(zhuǎn)換：其它的數(shù)據(jù)類(lèi)型和字符串通過(guò)運(yùn)算符+進(jìn)行拼接時(shí)，會(huì)自動(dòng)轉(zhuǎn)換為字符串類(lèi)型
*/
var num = 123;
var bool = true;
var obj = null;
var message = undefined;
//toString()方法
console.log(num.toString()); //123
console.log(bool.toString()); //true
//console.log(obj.toString()); //報(bào)錯(cuò)
//console.log(message.toString()); //報(bào)錯(cuò)
//String()方法
console.log(String(num)); //123
console.log(String(bool)); //true
console.log(String(obj)); //null
console.log(String(message)); //undefined
//字符串拼接:隱式轉(zhuǎn)換：其它的數(shù)據(jù)類(lèi)型和字符串通過(guò)運(yùn)算符+進(jìn)行拼接時(shí)塑顺，會(huì)自動(dòng)轉(zhuǎn)換為字符串類(lèi)型
console.log(num + ''); //123
console.log(bool + ''); //true
console.log(obj + ''); //null
console.log(message + ''); //undefined
</script>
7.3==其它類(lèi)型轉(zhuǎn)換為布爾類(lèi)型==
- 通常使用Boolean()函數(shù)將其他類(lèi)型轉(zhuǎn)成布爾類(lèi)型:
- 轉(zhuǎn)換成false的五種特殊值：==""（空字符串）汤求、0（包括 0、-0）严拒、undefined扬绪、null、NaN==裤唠；
- 如果某個(gè)值為 ""（空字符串）挤牛、0（包括 0、-0）种蘸、undefined墓赴、null竞膳、NaN時(shí)，那么這個(gè)值轉(zhuǎn)換成布爾類(lèi)型之后的值為 false诫硕。
- 否則坦辟，其值為 true。（記住五種特殊值）
image-20210511190855280
<script>
/*
1. 如果某個(gè)值為 ""（空字符串）章办、0（包括 0锉走、-0）、undefined藕届、null挪蹭、NaN時(shí)，那么這個(gè)值轉(zhuǎn)換成布爾類(lèi)型之后的值為 false休偶。
2.否則梁厉，其值為 true。（記住五種特殊值）
*/
console.log(Boolean('')); //flase
console.log(Boolean(null)); //flase
console.log(Boolean(undefined)); //flase
console.log(Boolean(NaN)); //flase
console.log(Boolean(0)); //flase
</script>
