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