?
目錄
介紹
引入方式
內(nèi)部方式
外部形式
注釋和結(jié)束符
單行注釋
多行注釋
結(jié)束符
輸入和輸出
輸出
輸入
變量
聲明
賦值
關(guān)鍵字
變量名命名規(guī)則
常量
數(shù)據(jù)類型
數(shù)值類型
字符串類型
布爾類型
undefined
類型轉(zhuǎn)換
隱式轉(zhuǎn)換
顯式轉(zhuǎn)換
Number
?介紹
??引入方式
JavaScript 程序不能獨立運行,它需要被嵌入 HTML 中,然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 script
標(biāo)簽(<script> js代碼<script>)將 JavaScript 代碼引入到 HTML 中,有兩種方式:
??內(nèi)部方式
通過 script
標(biāo)簽包裹 JavaScript 代碼
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
?<!-- 內(nèi)聯(lián)形式:通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
?<script>
? ?alert('js基礎(chǔ)介紹')
?</script>
</body>
</html>
??外部形式
一般將 JavaScript 代碼寫在獨立的以 .js 結(jié)尾的文件中,然后通過 script
標(biāo)簽的 src
屬性引入
//demo.js
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
?<!-- 外部形式:通過 script 的 src 屬性引入獨立的 .js 文件 -->
?<script src="demo.js"></script>
</body>
</html>
如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件,那么 標(biāo)簽的代碼會被忽略!??!如下代碼所示:
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
?<!-- 外部形式:通過 script 的 src 屬性引入獨立的 .js 文件 -->
?<script src="demo.js">
? ?// 此處的代碼會被忽略掉?。。?!
alert('會被忽略'); ?
?</script>
</body>
</html>
??注釋和結(jié)束符
通過注釋可以屏蔽代碼被執(zhí)行或者添加備注信息,JavaScript 支持兩種形式注釋語法:
??單行注釋
使用 //
注釋單行代碼
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 注釋</title>
</head>
<body>
?
?<script>
? ?// 這種是單行注釋的語法
? ?// 一次只能注釋一行
? ?// 可以重復(fù)注釋
? ?document.write('前面是注釋');
?</script>
</body>
</html>
??多行注釋
使用 /* */
注釋多行代碼
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 注釋</title>
</head>
<body>
?
?<script>
? ?/* 這種的是多行注釋的語法 */
? ?/*
? 更常見的多行注釋是這種寫法
? 在些可以任意換行
? 多少行都可以
? ? */
? ?document.write('多行注釋')
?</script>
</body>
</html>
注:編輯器中單行注釋的快捷鍵為
ctrl + /
??結(jié)束符
在 JavaScript 中 ;
代表一段代碼的結(jié)束,多數(shù)情況下可以省略 ;
使用回車(enter)替代。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 結(jié)束符</title>
</head>
<body>
?
?<script>
? ?alert(1);//結(jié)束符
? ?alert(2);
? ?alert(1)//無結(jié)束符
? ?alert(2)
?</script>
</body>
</html>
??輸入和輸出
輸出和輸入也可理解為人和計算機的交互,用戶通過鍵盤、鼠標(biāo)等向計算機輸入信息,計算機處理后再展示結(jié)果給用戶,這便是一次輸入和輸出的過程。
舉例說明:如按鍵盤上的方向鍵,向上/下鍵可以滾動頁面,按向上/下鍵這個動作叫作輸入,頁面發(fā)生了滾動了這便叫輸出。
??輸出
JavaScript 可以接收用戶的輸入,然后再將輸入的結(jié)果輸出:
alert()
、document.wirte()
以數(shù)字為例,向 alert()
或 document.write()
輸入任意數(shù)字,他都會以彈窗形式展示(輸出)給用戶。
??輸入
向 prompt()
輸入任意內(nèi)容會以彈窗形式出現(xiàn)在瀏覽器中,一般提示用戶輸入一些內(nèi)容。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 輸入輸出</title>
</head>
<body>
?
?<script>
? ?// 1. 輸入的任意數(shù)字,都會以彈窗形式展示
? ?document.write('要輸出的內(nèi)容')
? ?alert('要輸出的內(nèi)容');
?
? ?// 2. 以彈窗形式提示用戶輸入姓名,注意這里的文字使用英文的引號
? ?prompt('請輸入您的姓名:')
?</script>
</body>
</html>
?變量
變量是計算機中用來存儲數(shù)據(jù)的“容器”,它可以讓計算機變得有記憶,通俗的理解變量就是使用【某個符號】來代表【某個具體的數(shù)值】(數(shù)據(jù))(其實跟別的語言的變量差不多)
<script>
?// x 符號代表了 5 這個數(shù)值
?x = 5
?// y 符號代表了 6 這個數(shù)值
?y = 6
? ?
?//舉例: 在 JavaScript 中使用變量可以將某個數(shù)據(jù)(數(shù)值)記錄下來!
?
?// 將用戶輸入的內(nèi)容保存在 num 這個變量(容器)中
?num = prompt('請輸入一數(shù)字!')
?
?// 通過 num 變量(容器)將用戶輸入的內(nèi)容輸出出來
?alert(num)
?document.write(num)
</script>
??聲明
聲明(定義)變量有兩部分構(gòu)成:聲明關(guān)鍵字、變量名(標(biāo)識)
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 聲明和賦值</title>
</head>
<body>
?
?<script>
? ?// let 變量名
? ?// 聲明(定義)變量有兩部分構(gòu)成:聲明關(guān)鍵字、變量名(標(biāo)識)
? ?// let 即關(guān)鍵字,所謂關(guān)鍵字是系統(tǒng)提供的專門用來聲明(定義)變量的詞語
? ?// age 即變量的名稱,也叫標(biāo)識符
? ?let age
?</script>
</body>
</html>
let
和var
都是 JavaScript 中的聲明變量的關(guān)鍵字,推薦使用let
聲明變量?。?!
??賦值
聲明(定義)變量相當(dāng)于創(chuàng)造了一個空的“容器”,通過賦值向這個容器中添加數(shù)據(jù)。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 聲明和賦值</title>
</head>
<body>
?
?<script>
? ?// 聲明(定義)變量有兩部分構(gòu)成:聲明關(guān)鍵字、變量名(標(biāo)識)
? ?// let 即關(guān)鍵字,所謂關(guān)鍵字是系統(tǒng)提供的專門用來聲明(定義)變量的詞語
? ?// age 即變量的名稱,也叫標(biāo)識符
? ?let age
? ?// 賦值,將 18 這個數(shù)據(jù)存入了 age 這個“容器”中
? ?age = 18
? ?// 這樣 age 的值就成了 18
? ?document.write(age)
? ?
? ?// 也可以聲明和賦值同時進(jìn)行
? ?let str = 'hello world!'
? ?alert(str);
?</script>
</body>
</html>
?
??關(guān)鍵字
JavaScript 使用專門的關(guān)鍵字 let
和 var
來聲明(定義)變量,在使用時需要注意一些細(xì)節(jié):
??以下是使用
let
時的注意事項:
允許聲明和賦值同時進(jìn)行
不允許重復(fù)聲明
允許同時聲明多個變量并賦值
JavaScript 中內(nèi)置的一些關(guān)鍵字不能被當(dāng)做變量名
??以下是使用
var
時的注意事項:
允許聲明和賦值同時進(jìn)行
允許重復(fù)聲明
允許同時聲明多個變量并賦值
大部分情況使用 let
和 var
區(qū)別不大,但是 let
相較 var
更嚴(yán)謹(jǐn),因此推薦使用 let.
??變量名命名規(guī)則
關(guān)于變量的名稱(標(biāo)識符)有一系列的規(guī)則需要遵守:
只能是字母、數(shù)字、下劃線、$,且不能能數(shù)字開頭
字母區(qū)分大小寫,如 Age 和 age 是不同的變量
JavaScript 內(nèi)部已占用于單詞(關(guān)鍵字或保留字)不允許使用
盡量保證變量具有一定的語義,見字知義
注:所謂關(guān)鍵字是指 JavaScript 內(nèi)部使用的詞語,如 let
和var
,保留字是指 JavaScript 內(nèi)部目前沒有使用的詞語,但是將來可能會使用詞語。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 變量名命名規(guī)則</title>
</head>
<body>
?
?<script>
? ?let age = 18 // 正確
? ?let age1 = 18 // 正確
? ?let _age = 18 // 正確
?
? ?// let 1age = 18; // 錯誤,不可以數(shù)字開頭
? ?let $age = 18 // 正確
? ?let Age = 24 // 正確,它與小寫的 age 是不同的變量
? ?// let let = 18; // 錯誤,let 是關(guān)鍵字
? ?let int = 123 // 不推薦,int 是保留字
?</script>
</body>
</html>
??常量
概念:使用 const 聲明的變量稱為“常量”。
使用場景:當(dāng)某個變量永遠(yuǎn)不會改變的時候,就可以使用 const 來聲明,而不是let。
命名規(guī)范:和變量一致
const PI = 3.14
注意: 常量不允許重新賦值,聲明的時候必須賦值(初始化)。
?數(shù)據(jù)類型
計算機程序可以處理大量的數(shù)據(jù),為了方便數(shù)據(jù)的管理,將數(shù)據(jù)分成了不同的類型:
注:通過 typeof 關(guān)鍵字檢測數(shù)據(jù)類型
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
?
?<script>
? ?// 檢測 1 是什么類型數(shù)據(jù),結(jié)果為 number
? ?document.write(typeof 1)
?</script>
</body>
</html>
?
??數(shù)值類型
數(shù)值類型就是我們數(shù)學(xué)中學(xué)習(xí)到的數(shù)字,可以是整數(shù)、小數(shù)、正數(shù)、負(fù)數(shù)。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
?
?<script>
? ?let score = 100 // 正整數(shù)
? ?let price = 12.345 // 小數(shù)
? ?let temperature = -40 // 負(fù)數(shù)
?
? ?document.write(typeof score) // 結(jié)果為 number
? ?document.write(typeof price) // 結(jié)果為 number
? ?document.write(typeof temperature) // 結(jié)果為 number
?</script>
</body>
</html>
JavaScript 中的數(shù)值類型與數(shù)學(xué)中的數(shù)字是一樣的,分為正數(shù)、負(fù)數(shù)、小數(shù)等。
??字符串類型
通過單引號( ''
) 、雙引號( ""
)或反引號包裹的數(shù)據(jù)都叫字符串,單引號和雙引號沒有本質(zhì)上的區(qū)別,推薦使用單引號。
注意事項:
無論單引號或是雙引號必須成對使用
單引號/雙引號可以互相嵌套,但是不以自已嵌套自已
必要時可以使用轉(zhuǎn)義符
\
,輸出單引號或雙引號
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
?
?<script>
? ?let user_name = '小明' // 使用單引號
? ?let gender = "男" // 使用雙引號
? ?let str = '123' // 看上去是數(shù)字,但是用引號包裹了就成了字符串了
? ?let str1 = '' // 這種情況叫空字符串
? ?documeent.write(typeof user_name) // 結(jié)果為 string
? ?documeent.write(typeof gender) // 結(jié)果為 string
? ?documeent.write(typeof str) // 結(jié)果為 string
?</script>
</body>
</html>
??布爾類型
表示真或者假時在計算機中對應(yīng)的是布爾類型數(shù)據(jù),它有兩個固定的值 true
和 false
,表示肯定的數(shù)據(jù)用 true
,表示否定的數(shù)據(jù)用 false
。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
?
?<script>
? ?// pink老師帥不帥?回答 是 或 否
? ?let isCool = true // 是的,摔死了!
? ?isCool = false // 不,套馬桿的漢子!
?
? ?document.write(typeof isCool) // 結(jié)果為 boolean
?</script>
</body>
</html>
??undefined
未定義是比較特殊的類型,只有一個值 undefined,只聲明變量,不賦值的情況下,變量的默認(rèn)值為 undefined,一般很少【直接】為某個變量賦值為 undefined。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
?
?<script>
? ?// 只聲明了變量,并末賦值
? ?let tmp;
? ?document.write(typeof tmp) // 結(jié)果為 undefined
?</script>
</body>
</html>
注:JavaScript 中變量的值決定了變量的數(shù)據(jù)類型。
?類型轉(zhuǎn)換
在 JavaScript 中數(shù)據(jù)被分成了不同的類型,如數(shù)值、字符串、布爾值、undefined,在實際編程的過程中,不同數(shù)據(jù)類型之間存在著轉(zhuǎn)換的關(guān)系。
??隱式轉(zhuǎn)換
某些運算符被執(zhí)行時,系統(tǒng)內(nèi)部自動將數(shù)據(jù)類型進(jìn)行轉(zhuǎn)換,這種轉(zhuǎn)換稱為隱式轉(zhuǎn)換。
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 隱式轉(zhuǎn)換</title>
</head>
<body>
?<script>
? ?let num = 13 // 數(shù)值
? ?let num2 = '2' // 字符串
?
? ?// 結(jié)果為 132
? ?// 原因是將數(shù)值 num 轉(zhuǎn)換成了字符串,相當(dāng)于 '13'
? ?// 然后 + 將兩個字符串拼接到了一起
? ?console.log(num + num2)
?
? ?// 結(jié)果為 11
? ?// 原因是將字符串 num2 轉(zhuǎn)換成了數(shù)值,相當(dāng)于 2
? ?// 然后數(shù)值 13 減去 數(shù)值 2
? ?console.log(num - num2)
?
? ?let a = prompt('請輸入一個數(shù)字')
? ?let b = prompt('請再輸入一個數(shù)字')
?
? ?alert(a + b);
?</script>
</body>
</html>
?顯式轉(zhuǎn)換
編寫程序時過度依靠系統(tǒng)內(nèi)部的隱式轉(zhuǎn)換是不嚴(yán)禁的,因為隱式轉(zhuǎn)換規(guī)律并不清晰,大多是靠經(jīng)驗總結(jié)的規(guī)律。為了避免因隱式轉(zhuǎn)換帶來的問題,通常根邏輯需要對數(shù)據(jù)進(jìn)行顯示轉(zhuǎn)換。
??Number
通過 Number
顯示轉(zhuǎn)換成數(shù)值類型,當(dāng)轉(zhuǎn)換失敗時結(jié)果為 NaN
(Not a Number)即不是一個數(shù)字。文章來源:http://www.zghlxwxcb.cn/news/detail-860287.html
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>JavaScript 基礎(chǔ) - 隱式轉(zhuǎn)換</title>
</head>
<body>
?<script>
? ?let t = '12'
? ?let f = 8
?
? ?// 顯式將字符串 12 轉(zhuǎn)換成數(shù)值 12
? ?t = Number(t)
?
? ?// 檢測轉(zhuǎn)換后的類型
? ?// console.log(typeof t);
? ?console.log(t + f) // 結(jié)果為 20
?
? ?// 并不是所有的值都可以被轉(zhuǎn)成數(shù)值類型
? ?let str = 'hello'
? ?// 將 hello 轉(zhuǎn)成數(shù)值是不現(xiàn)實的,當(dāng)無法轉(zhuǎn)換成
? ?// 數(shù)值時,得到的結(jié)果為 NaN (Not a Number)
? ?console.log(Number(str))
?</script>
</body>
</html>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-860287.html
到了這里,關(guān)于JavaScript基礎(chǔ):js介紹、變量、數(shù)據(jù)類型以及類型轉(zhuǎn)換的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!