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