JavaScript學習筆記（一）
線上視訊課程地址： ofollow,noindex" target="_blank">http://edu.51cto.com/course/15019.html
1、Javascript簡介
1.1、為什麼要學習Javascript
1、可以實現網頁的動態效果
2、js可以做驗證操作，是為了減輕伺服器端的壓力
3、js可以提升使用者的體驗
4、百度地圖
5、現在js可以充當伺服器，比如現在node.js技術，還可以通過js來寫遊戲
1.2、javascript的歷史介紹
布蘭登•艾奇（Brendan Eich），1995年在網景公司，發明的JavaScript。一開始JavaScript叫做LiveScript，但是由於當時Java這個語言特別火，所以為了能火起來索性就改名JavaScript。同時期還有其他的網頁語言，比如VBScript、JScript等等，但是後來都被JavaScript打敗，所以現在的瀏覽器中，只執行一種指令碼語言就是JavaScript。
1.3、JavaScript與ECMAScript的關係
ECMAScript是一種由Ecma國際前身為歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association，制定的標準。
JavaScript是由公司開發而成的，公司開發而成的一定是有一些問題，不便於其他的公司拓展和使用。所以歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名為ECMAScript。
簡單來說ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。
1.4、javascript語言
JavaScript一門指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
2、編寫javascript的方式
2.1、行內js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一個js程式</title> </head> <body> <input type="button" onclick="javascript:alert('這是行內js')" value="測試"> </body> </html>
html關注的頁面的骨架
css關注的頁面的美觀
js關注的是頁面的行為、動作
2.2、內部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個js程式</title>
<script type="text/javascript">
alert("helloworld");
alert("掛機");
</script>
</head>
<body>
<input type="button"value="測試">
</body>
</html>
2.3、外部js
首先定義個js檔案(index.js)
alert("helloworld");
alert("掛機");
然後在html頁面中進行引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一個js程式</title> <!--引入外部js檔案--> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> //繼續在這裡去寫 </script> </head> <body> <input type="button"value="測試"> </body> </html>
3、js的基本語法
3.1、定義變數
在js中，定義變數統一採用var關鍵字進行宣告，它後面賦予值，決定了這個變數的資料型別
<script type="text/javascript"> // 定義變數 var num = 10; console.log(num) var str = 'helloworld'; console.log(str); </script>
3.2、js中的資料型別
在js中，我們可以通過typeof關鍵字來檢測一個變數的資料型別
<script type="text/javascript"> var num=10; console.log(typeof num); num="helloworld"; console.log(typeof num); num=false; console.log(typeof num); var flag; console.log(typeof flag); num = new Date(); console.log(num); console.log(typeof num); num=null; console.log(typeof num); num=new Array(); console.log(num); </script>
執行結果圖
總結一下：typeof關鍵字檢測型別：
number：表示數值型（整型和浮點型）
string：字串，在js中我們可以通過“”或者''來定義一個字串
boolean：布林型，true,false
undefined:變數定義，但是未賦值
object：物件型別 (null值它的typeof也是object)
function：它表示函式型別
3.3、js中的註釋
註釋分為2種，和java基本上一樣
單行註釋：// 註釋的內容
多行註釋：/* 註釋的內容*/
//定義一個函式
var myFun=function(){
/*
* 這個表示多行註釋
* */
}
3.4、運算子
算術運算子：+ - * / %
關係運算符： == > >= < <=
邏輯運算子：&& || !
賦值運算子: =
3.5、選擇結構
3.5.1、基本if
var num = 10 ;
if(num>=10) {
alert('num的值大於10');
}
注意在js中，if後面的表示式可以是很多型別
var num=0;
if(num) {
console.log("************")
}else{
console.log("==========")
}
總結：if表示式如果變數為0，相當於一個false情況
var flag ;
if(flag) {
console.log("***********")
}else{
console.log("==========")
}
總結2：if表示式如果變數為undefined，相當於一個false情況
var flag2 =null;
if(flag2) {
console.log("***********")
}else{
console.log("==========")
}
總結3：if表示式如果變數 的值為null，相當於一個false情況
3.5.2、if...else結構
if(num) {
console.log("************")
}else{
console.log("==========")
}
3.5.3、多重if結構
var score = 91 ;
if(score>90) {
console.log("成績大於90分")
}else if(score>80) {
console.log("成績大於80分")
}else{
console.log("其他")
}
3.5.4、switch
var num = 1 ;
switch (num){
case 1:
alert('星期一');
break;
case 2:
alert('星期二');
break;
default:
alert('其他');
}
3.6、迴圈結構
3.6.1、while迴圈
var i = 1 ;
while (i<=10) {
console.log(i);
i = i+1;
}
3.6.2、do...while迴圈
var i =1 ;
do{
console.log(i);
i++;
}while(i<=10)
3.6.3、for迴圈
vari ;
for(i=1;i<=10;i++) {
console.log(i);
}
3.6.4、break，continue
break：是跳出迴圈結構
continue：是跳出本次迴圈，執行迴圈的下一次
3.7、相關語句
alert：彈出對話方塊
prompt：提示框
如果選擇確定：typeof-->string型別
如果選擇取消：typeof-->object
document.write():向頁面寫一段文字
<script type="text/javascript">
//alert("hello");
var str = prompt("請輸入一個數字","5");
console.log(typeof str);
//將字串轉換成整數
//parseInt("字串")
//字串 52a-->52
//字串 a123 -->NaN(not a number)
//將字串轉成小數parseFloat(),用法和parseInt一樣
var num = parseInt(str);
alert(typeof num);
document.write(num);
</script>
4、函式初步介紹
函式就類似於java中的方法，回顧一下java中方法定義
訪問修飾符 返回值型別 方法名(引數列表) {
//方法體
return 返回值;
}
在js中函式是這樣定義的
function functionName(形參1,...){
//函式的主題
[returnvalue;]
}
4.1、函式呼叫
手動呼叫
<script type="text/javascript">
//無參函式
function myFun(){
for(var i = 0 ;i<10;i++) {
document.write(i+"<br/>")
}
}
//呼叫函式
myFun();
myFun();
myFun();
</script>
一般情況下，函式要結合事件一起使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//無參函式
function myFun(){
for(var i = 0 ;i<5;i++) {
document.write("helloworld"+"<br/>")
}
}
</script>
</head>
<body>
<input type="button" onclick="myFun()" value = "迴圈輸出5次hello"/>
</body>
</html>
案例：編寫一個函式，要求使用者輸入2個數字，實現2個數字的相加
<script type="text/javascript">
//無參函式
function getSum(){
var str1 = prompt("請輸入第一個數字",5);
var num1 = parseInt(str1);
if(isNaN(num1)) {
alert("對不起，你的輸入的數字不合法！！")
return ;
}
var str2 = prompt("請輸入第二個數字",10);
var num2 = parseInt(str2);
if(isNaN(num2)) {
alert("對不起，你的輸入的數字不合法！！")
return;
}
var result = num1+num2 ;
document.write("結果為："+result);
}
</script>
isNaN:is not a number? --->非數字的時候返回true
4.2、js中的函式分類
系統函式：alert,prompt,document.write....
自定義函式：自己編寫函式
4.3、變數的作用域
<script type="text/javascript">
//全域性
var num =10 ;
function myFun1(){
//區域性的變數
//如果在函式中，變數未採用var關鍵字進行宣告，那麼這個變數為全域性變數
num2 =20 ;
console.log(num);
}
function myFun2(){
//在函式2中不能訪問到函式1的變數
console.log(num);
console.log(num2)
}
myFun1();
myFun2();
</script>
總結一下：
定義在函式的外的變數為全域性變數，定義在函式內的變數為區域性變數，但是如果這個變數未採用var宣告，則提升了全域性變數
4.4、函式的編寫方式(瞭解一下)
<script type="text/javascript">
function myFun(){
alert("myFun");
}
var myFun2=function(){
alert("myFun2");
}
myFun();
myFun2();
//匿名函式
(function(){
alert("hehe");
})();
</script>
練習：輸出99乘法表
<script type="text/javascript">
function createTable(){
document.write("<table border='1' width='100%'>");
//外層控制一共輸出多少行
for(var i =1 ;i<=9;i++) {
document.write("<tr>");
for(var j = 1 ;j<=i;j++) {
document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
}
document.write("</tr>")
}
document.write("</table>");
}
createTable();
</script>