JavaScript是什么以及一次理清變量、語(yǔ)法
JavaScript 基礎(chǔ)①：JS 是什么？怎么寫(xiě)？
前言
在學(xué)前端之前，我一直以為：
HTML 是寫(xiě)內(nèi)容的
CSS 是改樣式的
JavaScript 可能只是“再高級(jí)一點(diǎn)的樣式”
直到我真正開(kāi)始寫(xiě) JS 才發(fā)現(xiàn)，這個(gè)理解完全不對(duì)。
和 CSS 不同，JavaScript 不關(guān)心頁(yè)面長(zhǎng)什么樣，
它關(guān)心的是一件事：
用戶(hù)做了什么 → 接下來(lái)該發(fā)生什么
一、JavaScript 是什么？它在前端里負(fù)責(zé)什么
JavaScript 是一門(mén)運(yùn)行在瀏覽器里的腳本語(yǔ)言。
腳本語(yǔ)言的意思很簡(jiǎn)單：
不需要編譯
瀏覽器一行一行解釋執(zhí)行
在前端三件套里，它們分工很明確：
HTML：頁(yè)面結(jié)構(gòu)，骨架
CSS：頁(yè)面樣式，皮膚
JavaScript：頁(yè)面邏輯和交互，大腦
舉個(gè)很直觀(guān)的例子：
點(diǎn)按鈕
彈提示框
表單校驗(yàn)
根據(jù)用戶(hù)操作改變頁(yè)面內(nèi)容
這些事情，全是 JavaScript 在干。
二、JavaScript 的三種寫(xiě)法
行內(nèi)式 JS（能用，但不推薦）
直接寫(xiě)在 HTML 標(biāo)簽里：
<button type="button" onclick="alert('bjyxszd');">
bxg
</button>特點(diǎn)：
寫(xiě)起來(lái)快
但 HTML 和 JS 混在一起
代碼一多就很難維護(hù)
內(nèi)部 JS
把 JS 寫(xiě)在
<script type="text/javascript">
function getDemo(){
var result = confirm("是否確定要?jiǎng)h除數(shù)據(jù)？");
if(result == true){
alert('刪除成功！')
}else{
alert("取消刪除！")
}
}
</script>這種方式的好處是：
JS 和 HTML 分離了一點(diǎn)
非常適合學(xué)習(xí)階段測(cè)試代碼
外部 JS 文件
新建一個(gè) demo1.js 文件：
function getSay(){
alert("Hello World!")
}
console.log("輸出函數(shù)")
var name = prompt("請(qǐng)輸入姓名：")
console.log(name)
然后在 HTML 中引入：
<script src="demo1.js"></script>
優(yōu)點(diǎn)很明顯：
結(jié)構(gòu)清晰
JS 可以復(fù)用
代碼量大時(shí)非常舒服
三、JS 的常見(jiàn)輸入輸出
alert：彈窗
<body>
<button type="button" onclick="alert('bjyxszd');">
bxg
</button>
作用很直接，但會(huì)阻塞代碼執(zhí)行，
在真實(shí)開(kāi)發(fā)中并不常用。
confirm：讓用戶(hù)做選擇（重點(diǎn)）
var result = confirm("是否確定要?jiǎng)h除數(shù)據(jù)？");這里是我第一次意識(shí)到 JS 不只是“執(zhí)行”，而是在等待用戶(hù)的選擇：
點(diǎn)擊“確定” → true
點(diǎn)擊“取消” → false
從這一刻開(kāi)始，代碼已經(jīng)開(kāi)始分叉。
prompt：輸入框（返回字符串）
var name = prompt("請(qǐng)輸入姓名：");
console.log(name);
注意一點(diǎn)：
prompt 得到的結(jié)果一定是字符串
后面如果要參與計(jì)算，必須處理類(lèi)型問(wèn)題
console.log：開(kāi)發(fā)者的眼睛
其實(shí)上面的截圖中已經(jīng)能看出console.log的用法，在控制臺(tái)打印出內(nèi)容。
console.log("輸出函數(shù)");
相比彈窗：
不打斷流程
信息更清晰
學(xué)習(xí) JS 時(shí)，console.log 幾乎是必備工具。
四、變量：JS 里存數(shù)據(jù)的“盒子”
var a = 10; var b = "10"; var c = false;
JavaScript 是弱類(lèi)型語(yǔ)言：
- 不用提前聲明類(lèi)型
- 賦什么值，就是什么類(lèi)型
常見(jiàn)數(shù)據(jù)類(lèi)型示例
var a = 10; console.log(a, typeof a); var b = "10"; console.log(b, typeof b); var c = false; console.log(c, typeof c); var d; console.log(d, typeof d); var e = null; console.log(e, typeof e);
五、一個(gè)完整的小案例：點(diǎn)擊 → 判斷 → 執(zhí)行
HTML：
<a href="#" rel="external nofollow" onclick="getDemo()">點(diǎn)擊我刪除數(shù)據(jù)</a>
JS：
function getDemo(){
var result = confirm("是否確定要?jiǎng)h除數(shù)據(jù)？");
if(result == true){
alert('刪除成功！')
}else{
alert("取消刪除！")
}
}這段代碼沒(méi)有任何樣式，但已經(jīng)在做三件事：
1、接收用戶(hù)操作
2、判斷用戶(hù)選擇
3、根據(jù)結(jié)果走不同分支
這是 JavaScript 和 CSS 最本質(zhì)的區(qū)別：
CSS 只描述規(guī)則，而 JS 在處理“可能發(fā)生的情況”。
六、小結(jié)
寫(xiě)完這一篇，我對(duì) JavaScript 有了一個(gè)很清晰的認(rèn)識(shí)：
CSS 難在細(xì)節(jié)
JavaScript 難在邏輯和判斷
從寫(xiě) JS 開(kāi)始，你需要提前想清楚：
用戶(hù)會(huì)不會(huì)點(diǎn)
點(diǎn)了之后怎么辦
不點(diǎn)又怎么辦
后面在數(shù)據(jù)類(lèi)型、運(yùn)算符、流程控制中，這種“分岔思維”會(huì)越來(lái)越明顯。
總結(jié)
到此這篇關(guān)于JavaScript是什么以及一次理清變量、語(yǔ)法的文章就介紹到這了,更多相關(guān)JS變量、語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了webpack之devtool詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
詳解javascript立即執(zhí)行函數(shù)表達(dá)式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達(dá)式IIFE的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了微信小程序如何獲取用戶(hù)頭像和昵稱(chēng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
TensorFlow.js機(jī)器學(xué)習(xí)預(yù)測(cè)鳶尾花種類(lèi)
TensorFlow.js是一個(gè)開(kāi)源的基于硬件加速的JavaScript庫(kù)，用于訓(xùn)練和部署機(jī)器學(xué)習(xí)模型。本教程將會(huì)帶大家簡(jiǎn)單了解和使用TensorFlow.js框架實(shí)現(xiàn)預(yù)測(cè)鳶尾花種類(lèi)2022-11-11
JavaScript中的observables?操作符創(chuàng)建實(shí)例
這篇文章主要介紹了JavaScript中的observables?操作符創(chuàng)建實(shí)例的相關(guān)資料，文章介紹詳細(xì)，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-03-03
js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能
這篇文章主要為大家詳細(xì)介紹了js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門(mén)和TAB選項(xiàng)卡實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門(mén)和TAB選項(xiàng)卡效果,通過(guò)簡(jiǎn)單的自定義切換函數(shù)setTab實(shí)現(xiàn)頁(yè)面元素的遍歷及屬性切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了Three.js基礎(chǔ)學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Javascript必知必會(huì)(四)js類(lèi)型轉(zhuǎn)換
這篇文章主要介紹了Javascript必知必會(huì)(四)js類(lèi)型轉(zhuǎn)換 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JS/HTML5游戲常用算法之碰撞檢測(cè) 像素檢測(cè)算法實(shí)例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 像素檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript像素檢測(cè)碰撞算法的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12