前端开发之JavaScript基础篇一
主要內(nèi)容：
1、JavaScript介紹
2、JavaScript的引入方法和輸出及注釋
3、javaScript變量和命名規(guī)則
4、五種基本數(shù)據(jù)類型
5、運(yùn)算符
6、字符串處理
7、數(shù)據(jù)類型轉(zhuǎn)換
?
一、JavaScript介紹
1、JavaScript是什么？
javaScript是一種web前端的描述語言，也是一種基于對象（object）和事件驅(qū)動(dòng)（Event Driven）的、安全性好的腳本語言。 它運(yùn)行在客戶端從而減輕服務(wù)器的負(fù)擔(dān)。 具有如下特點(diǎn)：
（1）javaScript主要用來向html頁面中添加交互行為。
（2）javaScript是一種腳本語言，語法和C語言系列語言的語言類似，屬弱語言類型。
（3）javaScript一般用來編寫客戶端腳本，但node.js例外。
（4）javaScript是一種解釋型語言，邊執(zhí)行邊解釋無需另外編譯。 2、javaScript的用途是什么？
javaScript的用途是解決頁面交互和數(shù)據(jù)交互，最終目的是豐富客戶端效果以及數(shù)據(jù)的有效傳遞。
具體而言：（1）實(shí)現(xiàn)頁面交互，提升用戶體驗(yàn)實(shí)現(xiàn)頁面特效。即js操作html的dom結(jié)構(gòu)或操作樣式。（2）客戶端表單驗(yàn)證即在數(shù)據(jù)送達(dá)服務(wù)器之前就進(jìn)行用戶提交信息即時(shí)有效地驗(yàn)證，減輕服務(wù)器壓力。即數(shù)據(jù)交互。 3、javaScript和ECMAScript的關(guān)系是什么？
區(qū)別：ECMAScript是腳本程序設(shè)計(jì)語言的web標(biāo)準(zhǔn)。JavaScript是一種輕量級的解釋型的腳本語言。
聯(lián)系：ECMAScripts是歐洲計(jì)算機(jī)制造協(xié)會(huì)，基于美國網(wǎng)景通訊公司的Netscape發(fā)明的javaScript和 Microsoft公司隨后模仿javaScript腳本語言制定了ECMAScript標(biāo)準(zhǔn)。 4、javaScript有哪幾部分組成？
主要有三部分組成：分別是ECMAScript、DOM、BOM。DOM是當(dāng)指網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型（Document Object Model）。BOM指的是瀏覽器對象模型（Browser Object Model (BOM)），尚無正式標(biāo)準(zhǔn)。
二、JavaScript的引入方法和輸出及注釋
HTML 中的腳本必須位于 <script> 與 </script> 標(biāo)簽之間。
腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中，或者同時(shí)存在于兩個(gè)部分中。
1、<script>標(biāo)簽
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標(biāo)簽。
<script> 和 </script> 會(huì)告訴 JavaScript 在何處開始和結(jié)束。
<script> 和 </script> 之間的代碼行包含了 JavaScript:
2、javaScript引入方式有三種，分別是行內(nèi)式，內(nèi)部式和外鏈?zhǔn)?#xff08;用得最多）。
（1）行內(nèi)式：將javaScript代碼塊直接寫在標(biāo)簽內(nèi)。
如：<input type="button" onclick="alert('提交成功！')" value="提交"/>
（2）內(nèi)部式：在<head>...</head>或<body>...</body>之間使用<script></script>標(biāo)簽，將javaScript代碼寫在其中。
實(shí)例1---在<head></head>之間插入
<!DOCTYPE html>
<html>
<head><script>function click_btn(){//彈出警告框
alert("重置成功！");
}</script>
</head>
<body><input type="reset" onclick ="click_btn()" value="已重置"/></body>
</html> View Code 實(shí)例2---在<body></body>之間插入
<!DOCTYPE html>
<html><body>
<h2>My web</h2>
<p id="demo">這是一個(gè)段落</p>
<button type="button" onclick="click_btn()">Try it</button><script>function click_btn(){// 改變段落的文字為指定的內(nèi)容
document.getElementById("demo").innerHTML="My first JavaScript Funtion";}
</script>
</body>
</html> View Code ?
（3）外鏈?zhǔn)?#xff1a;可以把腳本保存到外部文件中。外部文件通常包含被多個(gè)網(wǎng)頁使用的代碼。
外部 JavaScript 文件的文件擴(kuò)展名是 .js。
如需使用外部文件，請?jiān)?<script> 標(biāo)簽的 "src" 屬性中設(shè)置該 .js 文件。
實(shí)例：
html文件如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試專用</title><script src="js/myScript.js"></script>
</head>
<body><h2>My web</h2><p id="demo">這是一個(gè)段落</p><button type="button" onclick="click_btn()">Try it</button></body>
</html> View Code myScript.js文件如下：
function click_btn(){document.getElementById('demo').innerText = "我的第一個(gè)JavaScript函數(shù)";
} View Code 3、JavaScript常見輸出方法
JavaScript 顯示數(shù)據(jù)
JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。 注意：JavaScript 沒有任何打印或者輸出的函數(shù)。
（1）使用 window.alert()
<!DOCTYPE html>
<html>
<body><p>答案依次是11、5+6、56，你猜對沒？</p>
<script>
window.alert("猜測一下以下幾個(gè)問題答案？")
window.alert(5 + 6);
window.alert("5+6");
window.alert("5"+"6");
</script></body>
</html> View Code （2）操作 HTML 元素
如需從 JavaScript 訪問某個(gè) HTML 元素，您可以使用 document.getElementById(id) 方法。
? ? ?請使用 "id" 屬性來標(biāo)識 HTML 元素，并 innerHTML 來獲取或插入元素內(nèi)容。
實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試</title>
</head>
<body>
<p id="demo">我的第一個(gè)段落</p>
<button type="button" onclick="click_btn()">Try it</button><script>function click_btn(){// document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。// innerHTML = "這是修改后的段落！" 是用于修改元素的 HTML 內(nèi)容(innerHTML)的 JavaScript 代碼。
document.getElementById("demo").innerText = "這是修改后的段落！";}
</script></body>
</html> View Code （3）寫到 HTML 文檔
出于測試目的，您可以將JavaScript直接寫在HTML 文檔中。
實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試專用</title>
</head>
<body>
<h1>我的第一個(gè) Web 頁面</h1>
<p>我的第一個(gè)段落。</p><script>
document.write(Date()); // 在頁面打印當(dāng)前時(shí)間
</script></body>
</html> View Code 注意：
請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write，整個(gè) HTML 頁面將被覆蓋。
<!DOCTYPE html>
<html>
<body><h1>我的第一個(gè) Web 頁面</h1><p>我的第一個(gè)段落。</p><button onclick="myFunction()">點(diǎn)我</button><script>
function myFunction() {// 注意頁面內(nèi)容會(huì)被覆蓋
document.write(Date());
}
</script></body>
</html> View Code （4）寫到控制臺
如果您的瀏覽器支持調(diào)試，你可以使用?console.log()?方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用調(diào)試模式， 在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。
實(shí)例：
<!DOCTYPE html>
<html>
<body><h1>按F12到調(diào)試頁面，點(diǎn)擊console觀看</h1><script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script></body>
</html> View Code 4、注釋
注釋的作用：JavaScript 不會(huì)執(zhí)行注釋，注釋可提高代碼的可讀性。
注釋的幾種方法：
（1）單行注釋
使用 “//” 符號+注釋文字，可單獨(dú)放一行，也可放到一行代碼之后。
調(diào)試時(shí)，放到代碼之前，則可阻止代碼的執(zhí)行。
例如：
// 輸出標(biāo)題：
document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; // 我也是注釋
// document.getElementById("myH1").innerHTML="歡迎來到我的博客"; // 此時(shí)此行代碼不會(huì)執(zhí)行 （2）多行注釋
以 “ /*? ”開始，以“ */ ”結(jié)尾。
當(dāng)“ /* ” 和 “ */ ”之間為代碼時(shí)，則阻止多行代碼的執(zhí)行（用于調(diào)試時(shí)）。
/*
下面的這些代碼會(huì)輸出
一個(gè)標(biāo)題和一個(gè)段落
并將代表主頁的開始
*/
document.getElementById("myH1").innerHTML="歡迎來到我的主頁";
document.getElementById("myP").innerHTML="這是我的第一個(gè)段落。";
三、JavaScript變量和命名規(guī)則
1、變量含義：
變量使用來存儲信息的容器，由于js是松散數(shù)據(jù)類型，所以變量中可以放置任何類型的數(shù)據(jù)類型。使用包含三個(gè)過程：創(chuàng)建變量，儲存值和代表值。var a; 聲明創(chuàng)建，此時(shí)這個(gè)變量中什么都沒有，獲取變量中的返回值時(shí)，返回值為undefined;= 在js中是賦值的意義，將等號右側(cè)的值賦值給等號左邊的變量。+= 在js中是保留原來的值上累加。一次聲明多個(gè)變量時(shí)，每個(gè)變量用逗號隔開，一般會(huì)相同數(shù)據(jù)類型使用一個(gè)聲明。var a=0, fn=function(){},num=5 2、變量的聲明和定義
（1）先聲明再定義
例如：
var cc;cc = 'hyt';alert(cc); （2）聲明時(shí)即定義
var cc2 = 'hh';alert(cc2);var CC2 = 'hh2';alert(CC2); （3）變量命名規(guī)范
（1）嚴(yán)格區(qū)分大小寫（2）命名時(shí)名稱可以出現(xiàn)字母、數(shù)字、下劃線、$，但是不能以數(shù)字開頭，也不能純數(shù)字，不能包含關(guān)鍵字和保留字。關(guān)鍵字：如 var、number、alert等。注意：除了關(guān)鍵字，像 top、name也盡量不使用。（3）推薦使用駝峰命名法：有多個(gè)有意義的單詞組成名稱的時(shí)候，第一個(gè)單詞的首字母小寫，其余的單詞首字母大寫。（4）匈牙利命名：就是根據(jù)數(shù)據(jù)類型單詞的首字符作為前綴。 擴(kuò)展：JavaScript的保留字和關(guān)鍵字如下圖：
JavaScript關(guān)鍵字
四、5種基本數(shù)據(jù)類型
JavaScript有兩種數(shù)據(jù)類型--基本數(shù)據(jù)類型和引用數(shù)據(jù)類型，這里我們暫時(shí)只討論基本數(shù)據(jù)類型。
1、基本數(shù)據(jù)類型（number、string、boolean、null、underfine）
（1）數(shù)字類型（number）
例如：
var a = 123;console.log(typeof a); // number （2）字符串類型（string）
例如：
var str = 'hello';
console.log(typeof str); // string （3）布爾類型（boolean）
var bool = true;console.log(typeof bool); // booleanvar bool = false;console.log(typeof bool); // boolean （4）空對象（可以通過將變量的值設(shè)置為 null 來清空變量。）
var nul = null;console.log(nul); // null （5）underfined（Undefined 這個(gè)值表示變量不含有值。）
var d1;console.log(typeof d1); // underfined 注意有一個(gè)特殊情況：
var c = 5/0;console.log( typeof c); // 數(shù)值infinity(無限) -- 類型為number 2、引用數(shù)據(jù)類型
分別是function、Object、Array、String、Date。
注意：
JavaScript變量均為對象，當(dāng)你聲明一個(gè)變量時(shí)，就創(chuàng)建了一個(gè)新的對象。
?
五、運(yùn)算符
1、賦值運(yùn)算符
=、 +=、 -=、 *=、 /=、 %= 例如：
var money = prompt('請輸入余額：');var allMoney = money*(1+0.05);console.log(allMoney);
2、算數(shù)運(yùn)算符
+ （加法）、 -（減法） 、 *（乘法） 、 /（除）、%(求余) 、--（自減）、++（自加） 例如：
var a = 100;var b = 66;var sum = a+b;var min = a-b;
var div = b/a;
var lef = a%b;
console.log(sum,min,div,lef); // 166, 34, 0.66, 34
var c = 8,d = 10;d += c;console.log(d); // 18//自增自減---> d++ 表示先賦值，后自身加1；++d 表示先自身加1，再賦值var a1 = d++;console.log(a1,d); // 18 , 19var b1 = ++d;console.log(b1,d); // 20 , 20var c1 = --d;console.log(c1,d); // 19 , 19var d1 = ++d;console.log(d1,d); // 20 , 20 ?
3、比較運(yùn)算符
==（等于）、===（等同于，值和類型均相等）、!=（不等于）、!==（不等同于與，值和類型有一個(gè)不相等，或兩個(gè)都不相等）>（大于）、<（小于）、>=（大于或等于）、<=（小于或等于） 此處需注意：“==”?和 “?===”不同，“==”表示值相等即可，而“===”要求值和類型均要相等才成立，即“===”的要求更高。
console.log(5>8); // false// 隱式轉(zhuǎn)換 “==”比較的是值的大小；“===”是類型和值都要進(jìn)行比較。console.log("6"===6); // false ?
4、邏輯運(yùn)算符---&&（and）、||（or）
// &&都真才為真，一假則假console.log(false&&false); // false// || 有真即為真，一真則真console.log(true || false); // trueconsole.log(false || true); // true ?
六、字符串處理
1、字符串拼接
var firstName = '暮光';var lastName = "微涼";var fullName = firstName + "" + lastName;console.log(fullName); // 暮光微涼var str1 = 'cc';var str2 = 'China';var fullStr = "I'm " + str1+" ,and I come from" +" " + str2;console.log(fullStr); // I'm cc ,and I come from China 2、字符串運(yùn)算
// 注意：字符串之間進(jìn)行“+”時(shí)，只能是拼接；但可以進(jìn)行“-”、“*”、“/”運(yùn)算（瀏覽器進(jìn)行了隱式轉(zhuǎn)換）var a1 = '12';var b1 = '8';var b2 = '2.5'console.log(a1+b1); // 128 ---> “+”只能進(jìn)行拼接console.log(a1-b1); // 4 --> 減運(yùn)算console.log(a1*b1); // 96 --> 乘運(yùn)算console.log(typeof (a1*b1)); // numberconsole.log(a1/b1,a1/b2); // 1.5 4.8 --> 除運(yùn)算console.log(a1%b1,a1%b2); // 4 2 --> 取余運(yùn)算 注意：
var c1 = 'one';var c2 = 'two';console.log(c1*c2); // NaN === not a numberconsole.log(typeof(c1*c2)); // number ?
七、數(shù)據(jù)類型轉(zhuǎn)換
1、將數(shù)字類型轉(zhuǎn)換成字符串類型
var a1 = 123;var a2 = '';var a3 = a1+a2;console.log(a3); // 123（數(shù)值）// 隱式轉(zhuǎn)換（瀏覽器自身完成）console.log(typeof a3); // string（數(shù)據(jù)類型） --> 隱式轉(zhuǎn)換// 強(qiáng)制轉(zhuǎn)換-->使用String() 或 toString()var b1 = String(a1);console.log(typeof b1); // stringvar b2 = 666;console.log(typeof (b2.toString())); // string 2、將字符串類型轉(zhuǎn)換成數(shù)字類型
var c1 = '999';var c2 = Number(c1);console.log(c2); // 999console.log(typeof c2); // number// parseInt() 可以解析一個(gè)字符串，并且返回一個(gè)整數(shù)；parseFloat返回一個(gè)浮點(diǎn)數(shù)var d1 = '123.345hello789';console.log(Number(d1)); // NaN（not a number）console.log(parseInt(d1)); // 123console.log(parseFloat(d1)); // 123.345 --> 返回浮點(diǎn)數(shù)// 注意：在js中所有數(shù)據(jù)類型都被轉(zhuǎn)化為booleanvar m1 = '123'; // 1var m2 = Infinity; // 1 --> Infinity表示無限大var m3 = -222; // 1var m4 = 0; // 0var m5 ; // 0var m6 = NaN; // 0var m7 = null; // 0// 非0真1console.log(Boolean(m1)); // trueconsole.log(Boolean(m2)); // trueconsole.log(Boolean(m3)); // trueconsole.log(Boolean(m4)); // falseconsole.log(Boolean(m5)); // falseconsole.log(Boolean(m6)); // falseconsole.log(Boolean(m7)); // false ?
轉(zhuǎn)載于:https://www.cnblogs.com/schut/p/9448061.html
總結(jié)
以上是生活随笔為你收集整理的前端开发之JavaScript基础篇一的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 这世界是什么歌啊？
- 下一篇： 第四章 python的turtle库的运