JavaScript基礎(一)

時間  2019-11-13
標籤 javascript 基礎 欄目 JavaScript 简体版
原文   原文鏈接

   我是一個初學者，但求能學到些許知識！如下是根據韓順平老師的《輕鬆搞定網頁設計html+css+javascript—javascrip部分》整理而成。javascript

   爲何要學習javascript?php

   javascript是實現網頁動態效果的基石，在web開發中扮演重要的角色，被普遍的應用到各個領域：css

  1. 網頁遊戲
  2. 地圖搜索(google，baidu)
  3. 股市信息查詢
  4. web聊天

   在web開發中，js是必不可少的技術!同時js也是ajax/jquery/extjs等框架的基礎。html

   javascript介紹--基本介紹java

   javascript是一種普遍用於客戶端web開發的腳本語言，經常使用來給HTML網頁添加動態功能，好比響應用戶的各類操做。jquery

   什麼是腳本語言?程序員

  1. 腳本語言介於HTML和C，C++，Java，C#等編程語言之間
  2. 腳本語言與編程語言有類似地方，其函數與編程語言相似，也有變量。與編程語言之間最大的區別是編程語言的語法和規則更爲嚴格和複雜一些。
  3. 腳本語言是一種解釋性語言(即在執行的時候，直接對源碼進行執行)，例如Python、vbscript，javascript等等，它不象C/C++等能夠編譯成二進制代碼。(解釋性語言/編譯性語言之間的區別，這是一個疑問?)
  4. 腳本語言通常都有相應的腳本引擎來解釋執行，javascript的腳本引擎就是瀏覽器。
  5. js腳本語言每每不能獨立使用，它和html/jsp/php/asp/asp.net配合使用纔有意義

   javascript最主要的設計目的就是讓網頁中的元素能夠被編程也就是讓網頁動起來，甚至你能夠編寫js版本的坦克大戰遊戲。javascript不能獨立運行，它須嵌入到其它編程語言中才能運行(html/asp/asp.net/jsp/php...)；javascript只能用於b(brower瀏覽器)/s(server服務器)開發，即咱們常說的web開發(好比網站開發，web應用等)；javascript主要針對客戶端編程，也就是說js通常運行在客戶端；javascript也能夠對服務器端編程(比較少)；javascript最新版本是1.8(彼時是，但如今不知道是多少了)；javascript在客戶端(瀏覽器)執行。web

   javascript介紹--發展歷史ajax

   javascript最先是叫livescript，是一種基於對象和事件驅動，而且具有安全性的腳本語言，是由netscapce(網景)公司1996開發的，後和sun公司合做，將livescript改名爲javascript。編程

   由於瀏覽器的差別，咱們會看到，在不一樣的瀏覽器中使用js編程，會有差別，好比，在給某個控件綁定響應函數時，w3c dom標準是addEventListener()，而ie是使用attachEvent()，還有就是有些方法在ie中可使用，而在ff中卻不能使用，這些都是咱們在實際開發中要注意的問題。（由於js是由瀏覽器來解釋執行的，所以這裏有一個問題，不一樣類型的瀏覽器可能對js的支持不同。）

   js語言的特色

   javascript語言是簡單的；

   javascript是基於對象和事件驅動(動態的)；

   它能夠直接對用戶或客戶輸入作出響應，無需通過web服務程序。它對用戶的反映響應，是採用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁中執行了某種操做所產生的動做，就稱爲「事件」。好比按下鼠標，移動窗口、選擇菜單等均可以視爲事件。當事件發生後，可能會引發相應的事件響應。

   javascript是跨平臺的。

   javascript是依賴於瀏覽器自己，與操做環境無關，只要能運行瀏覽器的計算機，並支持javascript的瀏覽器就能夠正確執行。

   js是腳本編程語言；

   js是解釋執行的。

   js能夠對客戶端編程，也能夠對服務器編程(較少)。

   javascript和jscript比較

  1. jscript是微軟開發的，而javascript則是網景和sun合做開發的
  2. 在網景開發livescript(javascript前身)時，微軟就意識到這個腳本語言會很火，因而找到網景表示但願合做開發livescript，可是網景公司最終選擇和微軟的對頭sun公司合做開發livescript，並改名爲javascript。
  3. 微軟一氣之下，開發了針對ie的腳本語言，並命名爲jscript，在當時的這二種腳本語言中語法是截然不同，給當時的程序員帶來很大的麻煩，後來w3c出面了，w3c統一了標準(ECMAScript)因此如今的這二種腳本語言的語法能夠說90%以上都是相同的。
  4. 在必定程度上，你能夠認爲jscript和javascript是同樣的。
  5. 在網上搜索javascript幫助手冊，完後打開一看是jscript幫助手冊，就不足爲怪了。

   JS的第一個實例，Hello World

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- JS的代碼通常是放在head標籤之間的，但實際上也能夠在別的位置 -->
    <script type="text/javascript">
        window.alert("Hello1 World!!!");
    </script>
</head>
<body></body>
</html>

   注意：

  1. js位置能夠隨意。
  2. js必需用<script type="text/javascript">js代碼</script>，若是沒有使用script包起來，則瀏覽器會將其視爲普通文本。
  3. 在一個html文件中(jsp/php/asp等)能夠出現多對<script>片斷。瀏覽器會按前後順序依次執行。(在此不舉例說明了)

   JS運行原理圖：

   

   初步瞭解js的變量定義和使用

   看下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- JS的代碼通常是放在head標籤之間的，但實際上也能夠在別的位置 -->
    <script type="text/javascript">
        //js中變量的定義(在js中變量用var表示，無論實際類型)
        num1 = 456;
        num2 = 89;
        //Num2 = 900
        result = num1 + num2;
        window.alert("結果是="+result);//alert函數
    </script>
</body>
</html>

   注意：js中變量的定義(在js中變量用var表示，無論實際類型)。

   js爲何須要變量

   不管是使用哪一種語言編寫程序，變量都是其程序的基本組成單位。js是弱數據類型的語言，在定義變量時，不須要指明該變量的類型(由js引擎來決定)。例如：

var name="shunping";//name是字符串
var kk=2;//kk是數
var yy;//yy是undefined

   若是name=234;那麼這時name自動變成數。

   不聲明變量亦可直接使用：

x=345;//亦可

   js的變量的類型究竟怎樣決定?

  1. js是弱數據類型(針對強數據類型而言)語言；即在定義變量的時候，統一使用var表示便可，甚至不寫也能夠。
  2. js中的變量數據類型是由js引擎決定的。

   

   js基本語法

   javascript中的標識符。

   標識符是指javascript中定義的符號，例如：變量名，函數名，數組名等。標識符能夠由任意順序的大小寫字母、數字、下劃線(_)和美圓符號($)組成，但標識符不能以數字開頭，不能是javascript中的關鍵字/保留字。

   合法的標識符舉例：indentifier、username、user_name、_userName、$username。

   非法的標識符舉例：int、98.三、Hello World。

   javascript嚴格區分大小寫computer和Computer是兩個徹底不一樣的符號。

   javascript程序代碼的格式：每條功能執行語句的最後必需用分號(;)結束，每一個詞之間用空格、製表符、換行符或大括號、小括號這樣的分隔符隔開。語句塊使用{}來表示。

   javascript程序的註釋：/* ... */(多行註釋)中能夠嵌套"//"(單行註釋)註釋，但不能嵌套"/*...*/"。

   javascript基本數據類型--三大類型

   

   經過typeof能夠看到變量的具體數據類型是什麼。以下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var v1 = "abc";
        var v2 = 890;
        window.alert("v1是"+typeof v1);
        window.alert("v2是"+typeof v2);
        v1 = 567;//js是動態語言
        window.alert("v1是"+typeof v1);</script>
</head>
<body>
    
</body>
</html>

   number(數值類型)：

  1. 整形常量(10進制\8進制\16進制)。十六進制以0x或0X開頭，例如：0x8a；八進制必需以0開，例如：0123；十進制的第一位不能是0(數字0除外)，不然看成8進制數對待，例如：123。
  2. 實型常量。12.3二、193.9八、5E七、4e5等。  

   特殊數值：NaN(not a number)、Infinity(無窮大)、isNaN()、isFinite()。

var a = "abc";
window.alert(parseInt(a));//返回NaN不是一個數字類型
window.alert(6/0);//返回Infinity(無窮大)

   因此編程時，必定要儘可能避免。

   isNaN()：不是數返回true，是數返回false

window.alert(isNaN("123"));//注意是字符串"123"也返回false
window.alert(isNaN("abc"));//返回true
window.alert(isNaN(123));//返回false

   boolean(布爾值)--true和false

   js中數字0在布爾值中表示false，非0的數字都爲true。

   String字符串(單引號/雙引號皆可)----"a book of JavaScript"、'abc'、"a"、""

   字符串中的特殊字符，須要以反斜槓(\)後跟一個普通字符來表示，例如：\r、\n、\t、\b、\'、\"、\\xxx。

   js基本語法--複合數據類型

   複合數據類型：數組、對象。

   

   js基本語法--特殊數據類型

   javascript特殊數據類型：null、undefine。

   

var a = null;
window.alert(a);//null空值
window.alert(a);//Uncaught ReferenceError(捕獲的引用錯誤): a is not defined(未定義)
var a;
window.alert(a);//沒有給a賦值，就會返回一個undefined

   js基本語法--定義變量、初始化、賦值

   一、定義變量。

   什麼是定義變量?

   var a;這就是定義一個變量，變量名是a。

   二、初始化變量

   在定義變量的時候，就給值。

   var a=45;這就是初始化變量a。

   三、給變量賦值

   好比你先定義了變量：var tt;

   而後，再給值tt=780;-->這就是給變量賦值。

   js基本語法--數據類型轉換

   一、自動轉換，例：

var a=1.2; 
a=45; 
a="李阿昀";
window.alert(a);//輸出的結果是李阿昀

   二、強制轉換，例：如何字符串轉成數字?

var a=parseInt("123");
var b=parseFloat("12.3");
...//其它後面介紹

   如何將數字轉成字符串呢?(相似Java)

var b = 90;//b是number
b = b + "";//b是string

   注意：parseInt()，parseFloat()是系統函數(全局函數)，能夠直接使用。

   js基本語法--運算符

   算術運算符

   這個聽其名而知其意，就是用於計算的，javascript經常使用的是：+加、-減、*乘、/除、%取模。其實%運算能夠獲得兩個數相除的餘數(主要用於整數)。以下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var a = 90;
        var b = 8;
        window.alert(a%b);
        if(a%b == 0) {
         window.alert("能整除");
        } else {
         window.alert("不能整除");
        }
    </script>
</head>
<body>
    
</body>
</html>

   ++自加、--自減。這兩個運算符比較特殊。以下例：

var a=56;
var b=++a;//b=++a<==>[a=a+1; b=a;] b=a++<==>[b=a;a=a+1;]
window.alert(b); 
window.alert(a);

   +=左加、-=左減 、/=左除、%=左取模。以下例：

var a=56;
var b=90;
a-=34;//a=22
b%=a;//b=b%a;
window.alert(b); //2
window.alert(a); //22

   關係運算符

   ==等於、>大於、<小於、>=大於等於、<=小於等於、!=不等於。

   以下例：

var a = 9;
var b = '9';//先用parseInt()函數將字符串'9'轉成數字9，而後進行判斷，並不會轉換爲ASCII碼值！
if(a == b) {
     window.alert("ok!");
} else {
     window.alert("no");
}

   先介紹window.prompt和document.writeln()。

   prompt()函數：若是用戶單擊提示框的取消按鈕，則返回 null。若是用戶單擊確認按鈕，則返回輸入字段當前顯示的文本(即字符串)。

   write()方法可向文檔寫入HTML表達式或JavaScript代碼。

   writeln()方法等同於write()方法，不一樣的是在每一個表達式以後寫一個換行符。舉例說明：

var val = window.prompt("請輸入值：");//若是用戶單擊確認按鈕，則返回輸入字段當前顯示的文本。(即字符串)
var val2 = window.prompt("請再輸入值：");
document.writeln("你的輸入是："+(parseFloat(val)+parseFloat(val2)));

   接着看下例：

var num1 = window.prompt("請輸入第一個數：");
var num2 = window.prompt("請輸入第二個數：");
num1 = parseFloat(num1);
num2 = parseFloat(num2);
if(num1 > num2) {
    window.alert("num1 > num2");
} else if(num1 < num2) {
    window.alert("num1 < num2");
} else {
    window.alert("num1 = num2");
}

   邏輯運算符

   用於判斷邏輯關係的運算符。&&與、||或、!非。

   注意：在邏輯運算中，0、""、false、null、undefined、NaN均表示false，其餘均爲真！

   &&(短路與)：

   if(邏輯表達式1 && 邏輯表達式2) { }

   若是邏輯表達式1爲true，則js引擎繼續執行邏輯表達式2；若是邏輯表達式1爲false，則不會執行邏輯表達式2。

   ||或

   if(邏輯表達式1 || 邏輯表達式2 || ...) { }

   只要有一個邏輯表達式爲true，整個表達式都爲true。

   在js中||究竟返回什麼值?

   結論：||將返回第一個不爲false那個值(對象亦可)，或者是返回最後一個值(若是所有都是false的話) ，此返回值多數狀況下是布爾值，但也可能返回的是一個對象。

   例，

var a = 0;
var b = "";
var d = false;
var c = a || b || d;
window.alert(c);//返回false
window.alert(c+"類型"+typeof c);

   也可返回一個對象，以下：

var a = 0;
var b = "";
var d = false;
var obj = new Object();
var c = a || d || b || obj;//返回一個[object Object](對象)
window.alert(c);
window.alert(c+"類型"+typeof c);

   !非

   if(!邏輯表達式) { }

   若是邏輯表達式爲true則取false；若是邏輯表達式爲false則取true。

   位運算和移位運算，其規範和java一致。以下例：

var a = -4 >> 2;
//-4 原碼 10000000 00000100(取反) ---> 反碼 11111111 11111011(+1) ---> 補碼 11111111 11111100(計算機中存儲的-4) 
//補碼 11111111 11111100(右移2位) ---> 1111111111 111111(計算機中存儲的-1)
//1111111111 111111(-1) ---> 反碼 11111111 11111110(取反) ---> 10000000 00000001(-1)
window.alert(a);//返回-1

   js基本語法--三大流程控制

   一、順序控制

   二、分支控制

   讓程序有選擇的執行，分支控制有三種：①單分支②雙分支③多分支。

   單分支語法：if(條件表達式){執行語句;}

   雙分支語法：if(條件表達式){執行語句;}else{執行語句;}

   多分支語法：if(條件表達式1){語句;}else if(條件表達式2){語句;}else{語句;}

   舉例：若是男，男廁所，女，女廁所，不然不上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var sex=window.prompt("請輸入性別：");
        if(sex=="男") {//字符串比較也用」==」
            window.alert("上男廁所");
        } else if(sex=="女") {
            window.alert("上女廁所");
        } else if(sex == "女") {
            window.alert("woman ok");
        } else {
            window.alert("不許上廁所");
        }
    </script>
</head>
<body>
    
</body>
</html>

   注意：

  1. 字符串比較也用」==」。

  2. 強調：一旦找到一個知足條件的入口，執行完畢後，就直接結束整個多分支。

   多分支：

switch(條件表達式) {
    case 常量1: 語句; break;
    case 常量2: 語句; break;
    ...
    default: 語句; break;
}

   表達式能夠是js支持的全部數據類型，以下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var obj = new Object();

        var a = new Object();
        switch(a) {
            case "890":
                window.alert("890");
                break;//break 跳出整個switch
            case 90:
                window.alert("90");
                break;
            case null:
                window.alert("null");
                break;
            case a://匹配本身(一個變量)
                window.alert("a");
                break;
            default:
                window.alert("沒有匹配的值");
                break;
        }
        window.alert("end...");
    </script>
</head>
<body>
    
</body>
</html>

   結論：

  1. js的switch語句數據類型能夠是js支持的任何類型(數組和對象除外)
  2. case後面的數據類型能夠是任何類型(數組和對象除外)
  3. break跳出整個switch
  4. 若是沒有匹配則執行default  

   小測試：

   一、下例代碼依次輸出什麼?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var flag = 1;
        switch(flag) {
            default:
                window.alert("默認");
            case 'a':
                window.alert("今天星期一");
            case 'b':
                window.alert("今天星期二");
        }
    </script>
</head>
<body>
    
</body>
</html>

   答：依次彈出"默認"、"今天星期一"、"今天星期二"對話框。

   二、下例代碼依次輸出什麼?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var flag = 1.1;
        switch(flag) {
            default:
                window.alert("默認");
            case 'a':
                window.alert("今天星期一");
            case 'b':
                window.alert("今天星期二");
            case 1.1:
                window.alert("1.1");
        }
    </script>
</head>
<body>
    
</body>
</html>

   答：只彈出"1.1"的對話框。

   三、循環控制

   循環控制有三種，同Java，在此不贅述。

   練習：

   一、請編寫一個程序，能夠接收一個整數n，一、計算1+2+...n的值。

   核心代碼：

var n = window.prompt("請輸入一個整數：");
n = parseInt(n);
var result = 0;
for(var i = 1; i <= n; i++) {
    result+=i;
}
document.writeln("結果是："+result);

   二、請編寫一個程序，能夠接收一個整數n，計算1!+2!+...+n!的值。

   核心代碼：

var res = 0;
var temp = 1;
for(var i = 1; i <= n; i++) {
    for(var j = 1; j <= i; j++) {
        temp *= j;
    }
    res += temp;
    temp = 1;
}
document.writeln("結果是："+res);

   在ie中進行js調試

   在ie8中經過開發人員工具，就能夠進行js的調試工做。

   請注意：首先要在IE-工具-internet選項-高級中取消「禁止腳本調試」。

  1. F11：一句一句的執行，若是遇到函數，則跳入函數中，再一句一句執行；
  2. F10：按過程(函數)執行，當遇到一個函數時，f10就把整個函數看成一個語句執行，而不跳入函數執行。
  3. Shift+f11：從一個函數跳出。
  4. 局部變量：能夠看到變量的變化狀況。
  5. 斷點：能夠看斷點狀況。

   使用firebug能夠在firefox中調試js(???)

   js代碼發生錯誤，如何定位其錯誤？

  1. 能夠經過程序員的經驗來判斷

  2. window.alert()來輸出信息

  3. 使用firebug的調試用具 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程