JavaScript入門基礎

牛哄哄的柯南發表於2020-11-06
JavaScript

JavaScript入門基礎

概述

JavaScript是世界上最流行的指令碼語言，是一種執行在瀏覽器中的解釋型的程式語言，能夠實現跨平臺、跨瀏覽器。雖然只是十多天時間的產物，並且有很多的缺陷和陷阱，但也造就了JavaScript的靈活和強大。隨著Node.js的興起，JavaScript已經從單純實現前端互動，發展到可以全棧實現整個應用。尤其是在移動網際網路蓬勃發展以及應用追求極致使用者體驗的今天，JavaScript更是必須要重視和掌握的。

變數的宣告

使用var關鍵字進行變數的宣告，宣告的同時也可以進行賦值。變數的宣告只能有一次，但賦值可以有多次。如果只宣告變數，但是變數沒有被賦值，此時變數的值為undefined。

JavaScript變數的型別取決於右側的物件。

樣例程式碼：

var variable_name1 = 5;
var variable_name2 = 5.3;
var variable_name3 = false;
var variable_name4 = 'zhangsan';

變數的作用域

JavaScript沒有塊級作用域

java：

if(true) {
    int a = 1;
}
System.out.println(a); // 編譯錯誤，超出作用域

javascript：

if(true){
    var a = 1;
}
console.log(a); // 輸出1 ，JavaScript沒有塊級作用域

基本資料型別

Number型別

Number型別包含整數和浮點數（浮點數數值必須包含一個小數點，且小數點後面至少有一位數字）兩種值。

String型別

單引號或雙引號擴起來的字符集合。

Boolean型別

該型別只有兩個值，true和false。

Undefined型別

只有一個值，即undefined值。使用var宣告瞭變數，但未給變數初始化值，那麼這個變數的值就是undefined。

Null型別

Null型別被看做空物件指標，Null型別也是空的物件引用。

三大引用型別

Object型別

我們看到的大多數型別值都是Object型別的例項，建立Object例項的方式有兩種。

第一種是使用new操作符後跟Object建構函式，如下所示

var person = new Object();

person.name = "Micheal";

person.age = 24;

第二種方式是使用物件字面量表示法，如下所示

var person = {

　　name : "Micheal",

　　age : 24

};

alert(person.name);

Array型別

陣列的每一項可以用來儲存任何型別的資料，也就是說，可以用陣列的第一個位置來儲存字串，第二個位置儲存數值，第三個位置儲存物件…另外，陣列的大小是可以動態調整的。

建立陣列的基本方式有兩種

第一種是使用Array建構函式，如下所示

var colors = new Array("red","blue","yellow");

第二種是使用陣列字面量表示法，如下所示

var colors = ["red","blue","yellow"];

Function型別

每個函式都是Function型別的例項，而且都與其他引用型別一樣具有屬性和方法。函式通常是使用函式宣告語法定義的，如下所示

function sum(num1,num2){

　　return num1 + num2;

};

這和使用函式表示式定義函式的方式相差無幾。

var sum = function (num1,num2){
　　return num1 + num2;
};

var result = sum(5,8); alert(result);

typeof 操作符

由於js中的變數是弱型別的，所以它提供了一種檢測當前變數的資料型別的方法，也就是typeof關鍵字。

typeof 123　　 //Number

typeof 'abc'　　//String

typeof true //Boolean

typeof undefined //Undefined

typeof null //Object

typeof { } //Object

typeof [ ] //Object

js編寫的位置

1.將JS程式碼編寫到script標籤中：
<script > 寫這裡</script>
2.還可以將JS程式碼編寫到外部的js檔案中，然後通過script標籤來引入外部的檔案
3.可以將JS程式碼編寫到標籤的指定屬性中（不推薦使用）

樣例程式碼：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <!--可以將JS程式碼編寫到script標籤中-->  
        <!--<script type="text/javascript">  

            alert("hello");  

        </script>-->  

        <!--  
            還可以將JS程式碼編寫到外部的js檔案中，然後通過script標籤來引入外部的檔案  
            將JS程式碼編寫到外部檔案中，可以在不同的頁面中引入相同的JS程式碼，  
                方便後期的維護，並且寫在外部檔案中可以使用瀏覽器的快取，加快訪問速度提高使用者體驗  

            如果使用script來引入外部檔案，則它就不能在編寫任何的JS程式碼了  ，  
                如果還需要編寫則需要建立一個新的script標籤  
        -->  

        <script type="text/javascript" src="js/script.js"></script>  
        <script type="text/javascript">  
            alert("我是內部的JS程式碼");  
        </script>  
    </head>  
    <body>  


        <!-- 
            將JS程式碼編寫到標籤的屬性中，屬於結構與行為耦合，不方便後期的維護，不推薦使用 
        -->  

        <!-- 
            可以將JS程式碼編寫到標籤的指定屬性中 
        -->  
        <button onclick="alert('點完的效果');">點這裡</button>  

        <!-- 
            可以將JS程式碼編寫到超連結的href中 
        -->  
        <a href="javascript:alert('第二個效果');">再點這裡</a>  
        <br /><br />  

    </body>  
</html>

效果動態圖：
在這裡插入圖片描述

js的三種輸出方式

/*  
 控制瀏覽器彈出一個提示框  
 */  
alert("Hello JavaScript");  

/*  
  控制瀏覽器在頁面中輸出一個內容  
  document.write()向body中寫一個內容  
 */  
document.write("牛哄哄的柯南");  

/*  
  向控制檯輸出一個內容  
  */  
console.log("Keafmd");

樣例程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/*  
			 控制瀏覽器彈出一個提示框  
			 */  
			alert("Hello JavaScript");  
			
			/*  
			  控制瀏覽器在頁面中輸出一個內容  
			  document.write()向body中寫一個內容  
			 */  
			document.write("牛哄哄的柯南");  
			
			/*  
			  向控制檯輸出一個內容  
			  */  
			console.log("Keafmd");
		</script>
	</body>
</html>

效果截圖：

瀏覽器彈出一個提示框↓

在這裡插入圖片描述

瀏覽器在頁面中輸出一個內容↓

在這裡插入圖片描述

向控制檯輸出一個內容↓
控制檯調出步驟：網頁右鍵-檢查-選擇Console

在這裡插入圖片描述
寫作不易，如果看完對你有幫助，感謝點贊支援！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
在這裡插入圖片描述

加油！

共同努力！

Keafmd

相關文章