提示：JS的重點(diǎn)是讓靜態(tài)的頁面產(chǎn)生一些變化
JS編寫方式
提示：JavaScript是弱類型語言，行尾分號(hào)可寫可不寫
首先看下Java 與 JavaScript什么關(guān)系
嵌入編寫
JS編寫在script(腳本)標(biāo)記中，script標(biāo)記可以出現(xiàn)在html中的任意位置，也就是說JS代碼可以嵌入在HTML中任意部分，從上到下依次執(zhí)行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 嵌入編寫 編寫在script(腳本)標(biāo)記中，script標(biāo)記可以出現(xiàn)在html中的任意位置 -->
<script>
// 輸出語句
console.log('hello world')
</script>
</body>
</html>
外部編寫
script引入外部js文件，那么標(biāo)記中間的代碼運(yùn)行時(shí)會(huì)被瀏覽器忽略掉，不再執(zhí)行
js代碼（取名hello.js）：
console.log('Hello 世界');
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入外部js文件 -->
<script src="./hello.js">
// script引入外部js文件，那么標(biāo)記中間的代碼運(yùn)行時(shí)會(huì)被瀏覽器忽略掉，不再執(zhí)行
console.log('1234');
</script>
</body>
</html>
JS基本語法
JavaScript 變量的命名規(guī)范可以總結(jié)為以下幾個(gè)方面：
- 使用有意義的、描述性的變量名
- 變量名應(yīng)該與變量所代表的值或含義相關(guān)聯(lián)，能夠表達(dá)變量的用途。例如：firstName, lastName, totalAmount 等。
- 變量命名應(yīng)該符合標(biāo)識(shí)符命名規(guī)則
- 變量名必須以字母、下劃線（_）或美元符號(hào)（$）開頭，并且可以包含字母、數(shù)字、下劃線或美元符號(hào)。變量名不能以數(shù)字開頭。同時(shí)要注意保留字的使用，如if、else、for等關(guān)鍵字不能用作變量名。
- 使用駝峰命名法
- 一般情況下建議使用駝峰式命名法，即第一個(gè)單詞的首字母小寫，其他單詞的首字母大寫。例如：totalAmount, firstName, lastName。
-
不能使用JavaScript關(guān)鍵詞與JavaScript保留字。
-
使用有意義的縮寫
- 在變量名中可以使用縮寫，但是要確保縮寫是大家都能理解的。例如：qty(數(shù)量), str(字符串)。
- 避免使用單個(gè)字符的變量名
- 比如 i, j, k 等單字符變量名一般只在循環(huán)中使用，其他情況應(yīng)該盡量避免使用。
遵循良好的變量命名規(guī)范有助于程序的可讀性和可維護(hù)性。
使用let聲明變量
? js中定義變量使用let關(guān)鍵字
js是弱類型語言，定義時(shí)不需要指定數(shù)據(jù)類型，變量的類型是由賦值的數(shù)據(jù)決定
【示例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let Tom
Tom = 200
console.log(Tom);
Tom = '你好世界！'
console.log(Tom);
</script>
</body>
</html>
使用var聲明變量
用的比較少
? 定義變量也可以使用var關(guān)鍵字，新標(biāo)準(zhǔn)js語法，建議使用let
【示例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
Tom = 200
var Tom
Tom = true
console.log(Tom);
</script>
</body>
</html>
JS中的數(shù)據(jù)類型
typeof：獲取當(dāng)前變量的數(shù)據(jù)類型
JavaScript 中有 7 種數(shù)據(jù)類型，其中 5 種是基本數(shù)據(jù)類型，另外兩種是引用數(shù)據(jù)類型。
- 基本數(shù)據(jù)類型：
- 未定義（Undefined）：表示未定義的值。
- 數(shù)字（Number）：整數(shù)和浮點(diǎn)數(shù)都屬于數(shù)字類型，例如 1、3.14 等。
- 布爾值（Boolean）：true 和 false 兩個(gè)值。
- 字符串（String）：例如 “hello”、‘world’ 等，用單引號(hào)或雙引號(hào)包裹起來。
- 符號(hào)（Symbol）：表示獨(dú)一無二的值，用于對(duì)象屬性的鍵。
- 引用數(shù)據(jù)類型：
- 對(duì)象（Object）：例如數(shù)組、函數(shù)、正則表達(dá)式、空（Null）空值等對(duì)象。
- function-函數(shù)類型：function函數(shù)
【示例代碼】
這里沒有寫符號(hào)（Symbol）數(shù)據(jù)類型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//js六種數(shù)據(jù)類型
let x
console.log(typeof x); //1.undefined 未定義
x = 100.3
console.log(typeof x); //2.number 數(shù)字類型（不區(qū)分整數(shù)小數(shù)）
x = false
console.log(typeof x); //3.boolean 布爾類型 true/false
x = 'abc'
console.log(typeof x); //4.String 字符串類型 數(shù)據(jù)使用引號(hào)括起來（單引號(hào)雙引號(hào)通用）
x = []
console.log(typeof x); //5.object 對(duì)象類型 有屬性和方法可以使用
x = function(){}
console.log(typeof x); //6.function 函數(shù)類型 就是方法
//特殊的number類型 NaN（Not a Nnumber）非數(shù) Infinity無限大
x = parseInt('abc')
console.log( x , typeof x);
x = 3/0
console.log( x , typeof x);
</script>
</body>
</html>
JS中運(yùn)算符
JavaScript中的運(yùn)算符可以分為以下幾類：||
| 運(yùn)算符 | 優(yōu)先級(jí) |
|---|---|
| 算術(shù)運(yùn)算符 | 加號(hào)+，減號(hào)-，乘號(hào)*，除號(hào)/，取模%，++，--
|
| 邏輯運(yùn)算符 | 與&&、或ll、 非!
|
| 比較運(yùn)算符 | 等于==，不等于!=，全等于===，不全等于!==，大于>，小于<，大于等于>=，小于等于<=
|
| 賦值運(yùn)算符 | 等號(hào)=，加等+=，減等-=，乘等*=，除等/=，取模等%=
|
| 位運(yùn)算符 | 與&，或l，異或^，非~，左移<<，右移>>，無符號(hào)右移>>>
|
| 條件運(yùn)算符 | 三元操作符？:，根據(jù)表達(dá)式的結(jié)果返回一個(gè)值。例如：a>b?a:b |
除此之外，JavaScript還支持一些其他的運(yùn)算符，例如typeof運(yùn)算符，用于檢測(cè)變量的數(shù)據(jù)類型；
instanceof運(yùn)算符，用于檢測(cè)對(duì)象是否是某個(gè)類的實(shí)例等。
還有反引號(hào) `
【示例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1. / 除法 不同于Java的除法規(guī)則
console.log(3/2);
//2. + 與Java相同
let name = '湯姆'
let nick = '抓杰瑞'
console.log('大家好我是' + name + ',AKA' + nick );
//3.js最新版本引入了模版字符串的語法 替代+字符串連接符 使用反引號(hào)``
console.log( `大家好我是${name},AKA${nick}` );
</script>
</body>
</html>
?== 和 ===
== 和 === 的區(qū)別
-
==比較時(shí)會(huì)將比較的數(shù)據(jù)先轉(zhuǎn)換成相同類型，再去比較數(shù)據(jù)值 -
===嚴(yán)格比較，類型和數(shù)據(jù)值都相同，結(jié)果才是true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(11=='11');
console.log(11==='11');
</script>
</body>
</html>
JS中的數(shù)據(jù)類型轉(zhuǎn)換
字符串類型加減乘除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let num1 = '10'
let num2 = '5'
console.log(num1+num2);
console.log(num1-num2);
console.log(num1*num2);
console.log(num1/num2);
</script>
</body>
</html>
輸出結(jié)果：
字符串類型數(shù)據(jù) 在做 - * / 運(yùn)算時(shí)，js默認(rèn)會(huì)把它轉(zhuǎn)換成number類型
布爾類型加減乘除
給num1和num2重新賦值，一個(gè)true一個(gè)false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
num1 = true
num2 = false
console.log(num1+num2);
</script>
</body>
</html>
輸出1
布爾類型數(shù)據(jù)在做 + - * / 運(yùn)算時(shí)，js默認(rèn)會(huì)把true轉(zhuǎn)換成1，false轉(zhuǎn)換成0再去運(yùn)算
字符串與整數(shù)、小數(shù)之間的轉(zhuǎn)換
parseInt()將字符串轉(zhuǎn)換為整數(shù)pareFloat()將字符串轉(zhuǎn)換成小數(shù)
【示例代碼1】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//pareFloat將字符串轉(zhuǎn)換成小數(shù)
let s1 = '10'
let s2 = '10.5'
s1 = parseInt(s1)
s2 = parseFloat(s2)
console.log(s1+s2);
</script>
</body>
</html>
輸出結(jié)果：
【示例代碼2】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//pareFloat將字符串轉(zhuǎn)換成小數(shù)
let s1 = '10'
let s2 = '52.1'
s1 = parseInt(s1)
s2 = parseInt(s2)
console.log(s1+s2);
</script>
</body>
</html>
輸出結(jié)果：
JS流程控制語句
JS流程控制語句指的是用于控制程序執(zhí)行流程的語句，包括條件語句和循環(huán)語句。
- 條件語句
- if語句：通過判斷一個(gè)條件，決定是否執(zhí)行后面的代碼塊。
if (condition) {
// 如果condition為true，則執(zhí)行這里的語句塊
}
- if…else語句：根據(jù)先前判斷的條件，分別執(zhí)行不同的代碼塊。
if (condition) {
// 如果condition為true，則執(zhí)行這里的語句塊
} else {
// 如果condition為false，則執(zhí)行這里的語句塊
}
- if…else if…else語句：根據(jù)多個(gè)條件依次判斷，分別執(zhí)行不同的代碼塊。
if (condition1) {
// 如果condition1為true，則執(zhí)行這里的語句塊
} else if (condition2) {
// 如果condition2為true，則執(zhí)行這里的語句塊
} else {
// 如果既不是condition1也不是condition2，則執(zhí)行這里的語句塊
}
- switch語句：根據(jù)一個(gè)表達(dá)式的值，依次執(zhí)行不同的代碼塊。
switch(expression) {
case value1:
// 如果expression的值和value1相等，則執(zhí)行這里的語句塊
break;
case value2:
// 如果expression的值和value2相等，則執(zhí)行這里的語句塊
break;
default:
// 如果expression的值既不是value1也不是value2，則執(zhí)行這里的語句塊
}
- 循環(huán)語句
- while循環(huán)：只要指定的條件為true，就不斷地執(zhí)行循環(huán)體中的代碼塊。
while (condition) {
// 如果condition為true，則執(zhí)行這里的語句塊
}
- do…while循環(huán)：先執(zhí)行一次循環(huán)體中的代碼塊，然后只要指定的條件為true，就不斷地執(zhí)行循環(huán)體中的代碼塊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let num = 3452
do {
console.log( num%10 ); //2 5 4 3
num = Math.trunc( num/10 ) //345 34 3 0
} while (num!=0);
</script>
</body>
</html>
這段代碼實(shí)現(xiàn)了一個(gè)反向輸出一個(gè)整數(shù)的各個(gè)位數(shù)的功能。代碼執(zhí)行步驟如下：
- 定義一個(gè)變量num并賦值為3452。
- 進(jìn)入do…while循環(huán)，先執(zhí)行循環(huán)體內(nèi)的代碼塊。
- 執(zhí)行console.log(num%10)語句，輸出num除以10的余數(shù)，即num的個(gè)位數(shù)。此時(shí)輸出為2。
- 執(zhí)行Math.trunc(num/10)語句，將num除以10并向下取整，得到num去掉個(gè)位數(shù)后的整數(shù)部分。此時(shí)num變?yōu)?45。
- 判斷num是否為0。由于num不為0，繼續(xù)進(jìn)行下一次循環(huán)。
- 重復(fù)步驟3~5，輸出num的十位數(shù)5、百位數(shù)4和千位數(shù)3，直到num為0時(shí)循環(huán)結(jié)束。
- 整數(shù)的每個(gè)位數(shù)依次反向輸出：2、5、4、3。
- for循環(huán)：設(shè)定一個(gè)計(jì)數(shù)器并設(shè)置循環(huán)的終止條件，每次循環(huán)時(shí)更新計(jì)數(shù)器的值。
for (initialization; condition; increment) {
// initialization：初始化變量
// condition：設(shè)置循環(huán)的終止條件
// increment：計(jì)數(shù)器增加的量
// 執(zhí)行這里的語句塊
}
【示例代碼】
使用for循環(huán)，輸出100-999之間所有的水仙花數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-508257.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//使用for循環(huán)，輸出100-999之間所有的水仙花數(shù)
//153=1*1*1 + 5*5*5 + 3*3*3
for (let num = 100; num < 1000; num++) {
let b = Math.trunc(num/100)
let s = Math.trunc(num/10%10)
let g = Math.trunc(num%10)
if(num == b*b*b + s*s*s + g*g*g)
console.log(`水花仙數(shù):${num}`)
}
</script>
</body>
</html>
輸出結(jié)果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-508257.html
- for…in循環(huán)：用于遍歷對(duì)象的所有可枚舉屬性。
for (var prop in object) {
// prop：枚舉屬性名
// object：要枚舉屬性的對(duì)象
// 執(zhí)行這里的語句塊
}
- for…of循環(huán)：用于遍歷可迭代對(duì)象（如數(shù)組、字符串等）的所有元素。
for (var element of iterable) {
// element：當(dāng)前遍歷到的元素
// iterable：要遍歷的可迭代對(duì)象
// 執(zhí)行這里的語句塊
}
到了這里，關(guān)于JavaScript（JS基礎(chǔ)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
