Web前端— JavaScript篇(一)

1、簡述JavaScript

今天我學習了這個語言,最讓我驚訝的是它竟然是僅僅花費了十天就創造出來的一門語言。
JavaScript(簡稱“JS”) 是一種具有函數優先的輕量級,解釋型或即時編譯型的編程語言。雖然它是作爲開發Web頁面的腳本語言而出名的,但是它也被用到了很多非瀏覽器環境中,JavaScript 基於原型編程、多範式的動態腳本語言,並且支持面向對象、命令式和聲明式(如函數式編程)風格。
JavaScript在1995年由Netscape公司的Brendan Eich,在網景導航者瀏覽器上首次設計實現而成。因爲Netscape與Sun合作,Netscape管理層希望它外觀看起來像Java,因此取名爲JavaScript。但實際上它的語法風格與Self及Scheme較爲接近。
JavaScript的標準是ECMAScript 。截至 2012 年,所有瀏覽器都完整的支持ECMAScript 5.1,舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日,ECMA國際組織發佈了ECMAScript 的第六版,該版本正式名稱爲 ECMAScript 2015,但通常被稱爲ECMAScript 6 或者ES6

嚴格檢查格式

在編寫JavaScript代碼之前要將IDEA的設置成如下所示:
IEDA 需要設置支持ES6語法
‘use strict’; 嚴格檢查模式,預防JavaScript的隨意性導致產生的一些問題
必須寫在JavaScript的第一行!
局部變量建議都使用 let 去定義
在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict';
        // 全局變量
        let i = 1;
        // ES6   let
        
    </script>

</head>
<body>

</body>
</html>

2、JavaScript的引入語法

1、內部標籤

<script>
    //......
</script>

實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script標籤內,寫Javascript代碼-->
    <script>
       alert('hello,world');
    </script>

</head>
<body>

<!--這裏也可以存放-->
</body>
</html>

在這裏插入圖片描述
2、外部引入方式

abc.js

//。。。

test.html

<script src="abc.js"></script>

測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

   
    <!--外部引入-->
    <!--注意:script標籤必須成對出現-->
    <script src="js/abc.js"></script>
</head>
<body>

<!--這裏也可以存放-->
</body>
</html>

在這裏插入圖片描述

3、JavaScript的基本語法

JavaScript在很大程度上和JavaSE相似。所以很大的降低了我們的學習的成本。
注意

  • JavaScript嚴格區分大小寫!
  • 定義變量 變量類型 變量名 = 變量值;
  • console.log(score) 在瀏覽器的控制檯打印變量!相當於Java中的 System.out.println();
  • 瀏覽器必備調試須知:認識每個是什麼意思。
    在這裏插入圖片描述
<!--JavaScript嚴格區分大小寫!-->
<script>
    // 1. 定義變量    變量類型  變量名  = 變量值;
    var score = 71;
    // alert(num);
    // 2. 條件控制
    if (score>60 && score<70){
        alert("60~70")
    }else if(score>70 && score<80){
        alert("70~80")
    }else{
        alert("other")
    }

    //console.log(score) 在瀏覽器的控制檯打印變量! System.out.println();
    /*
        * asdasdasd
        * */

</script>

4、JavaScript的數據類型

值類型(基本類型):字符串(String)、數字(Number)、布爾(Boolean)、對空(Null)、未定義(Undefined)、Symbol。

引用數據類型:對象(Object)、數組(Array)、函數(Function)。
注意:Symbol 是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。

  • 字符串
    字符串可以是引號中的任意文本。您可以使用單引號或雙引號;
    實例:
var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引號,只要不匹配包圍字符串的引號即可:
實例:

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
  • 數字(Number)
    js不區分小數和整數,Number
123 //整數123
123.1 // 浮點數123.1
1.123e3 //科學計數法
-99    //複數
NaN    // not  a  number
Infinity //表示無限大
  • 布爾值
    布爾(邏輯)只能有兩個值:true 或 false。
var x=true;
var y=false;
  • null 和 undefined
    null 空
    undefined 未定義
  • 邏輯運算
&&   兩個都爲真,結果爲真

||   一個爲真,結果爲真
 
!    真即假,假即真
  • 比較運算符!!!!重要!
=
==  等於(類型不一樣,值一樣,也會判斷爲true)
===   絕對等於(類型一樣,值一樣,結果true)

注意這是一個JS的缺陷,堅持不要使用 == 比較
須知:

  • NaN===NaN ,這個與所有的數值都不相等,包括自己
  • 只能通過 isNaN(NaN) 來判斷這個數是否是 NaN
    在這裏插入圖片描述
  • 浮點數問題:
console.log((1/3) === (1-2/3))

儘量避免使用浮點數進行運算,存在精度問題!

Math.abs(1/3-(1-2/3))<0.00000001
  • 數組
    Java的數值必須是相同類型的對象~,JS中不需要這樣!
//保證代碼的可讀性,儘量使用 []
var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,4,5,'hello');

在這裏插入圖片描述
注意:取數組下標:如果越界了,就會出現

undefined
  • 對象
    對象是大括號,數組是中括號~~

每個屬性之間使用逗號隔開,最後一個不需要添加

var person = {
    name: "haha",
    age: 3,
    tags: ['js','java','web','...']
}

在這裏插入圖片描述
取對象的值:
在這裏插入圖片描述

  • 聲明變量類型
    當聲明新變量時,可以使用關鍵詞 “new” 來聲明其類型:
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

注意:JavaScript 變量均爲對象。當您聲明一個變量時,就創建了一個新的對象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章