4.JavaScript

時間  2019-12-15
標籤 4.javascript javascript 欄目 JavaScript 简体版
原文   原文鏈接

1.簡介

JavaScript 是一種輕量級的編程語言，是一種動態類型、弱類型、基於原型的腳本語言。html

JavaScript，一般縮寫爲JS，是一種高級的，解釋執行的編程語言。JavaScript是一門基於原型、函數先行的語言，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持I/O，好比網絡、存儲和圖形等，但這些均可以由它的宿主環境提供支持。git

2.用法

2.1.在 <head> 或者 <body> 的JavaScript

您能夠在 HTML 文檔中放入不限數量的腳本。正則表達式

腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。express

<!-- 頭部插入js-->

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="個人第一個 JavaScript 函數";
}
</script>
</head>

<body>

<h1>個人 Web 頁面</h1>

<p id="demo">一個段落</p>

<button type="button" onclick="myFunction()">點我</button>

</body>
</html>




<!-- body中插入Js -->
<!DOCTYPE html>
<html>
<body>
<h1>個人 Web 頁面</h1>

<p id="demo">一個段落</p>

<button type="button" onclick="myFunction()">點我</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="個人第一個 JavaScript 函數";
}
</script>

</body>
</html>

2.2.外部JS文件

也能夠把腳本保存到外部文件中。外部文件一般包含被多個網頁使用的代碼。外部 JavaScript 文件的文件擴展名是 .js。如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：編程

<!-- 引用外部Js腳本文件 -->
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

⚠️：外部腳本文件中不能再包含<script></script>標籤。數組

3.輸出和註釋

3.1.輸出

JavaScript 能夠經過不一樣的方式來輸出數據：瀏覽器

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法將內容寫到 HTML 文檔中。
  • 使用 innerHTML 寫入到 HTML 元素。
  • 使用 console.log() 寫入到瀏覽器的控制檯。
<!DOCTYPE html> 
<html> 
<body> 
<h1>個人第一個頁面</h1> 
<p>個人第一個段落。</p> 

<script> 
window.alert(5 + 6); 
</script> 

</body> 
</html> 



<!DOCTYPE html> 
<html> 
<body> 

<h1>個人第一個 Web 頁面</h1> 

<p id="demo">個人第一個段落</p> 

<script> 
document.getElementById("demo").innerHTML = "段落已修改。"; 
</script> 

</body> 
</html>



<!DOCTYPE html> 
<html> 
<body> 

<h1>個人第一個 Web 頁面</h1> 

<p id="demo">個人第一個段落</p> 

<script> 
document.getElementById("demo").innerHTML = "段落已修改。"; 
</script> 

</body> 
</html>


<!DOCTYPE html> 
<html> 
<body> 

<h1>個人第一個 Web 頁面</h1> 

<p>個人第一個段落。</p> 

<script> 
document.write(Date()); 
</script> 

</body> 
</html>
JS輸出方式

3.2.註釋

單行註釋以 // 開頭。多行註釋以 /* 開始，以 */ 結尾。網絡

// 輸出標題： 
document.getElementById("myH1").innerHTML="歡迎來到個人主頁";


/* 
下面的這些代碼會輸出 
一個標題和一個段落 
並將表明主頁的開始 
*/ 
document.getElementById("myH1").innerHTML="歡迎來到個人主頁";

4.數據類型

4.1.變量與字面量

變量用於存儲數據值。JavaScript 使用關鍵字 var 來定義變量， 使用等號來爲變量賦值。編程語言

字面量(literals),實際上是常量(values)的一種變現形式。JavaScript中便有數字（Number）字面量，字符串（String）字面量，表達式字面量，數組（Array）字面量，對象（Object）字面量，函數（Function）字面量等。ide

//變量，先定義賦值再使用
var x, length 

x = 5 

length = 6

4.2數據類型

有以下幾種，字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。

//字符串
var carname="Volvo XC60";
var carname='Volvo XC60';

//數字
var x1=34.00;      // 使用小數點來寫
var x2=34;         // 不使用小數點來寫

//Boolean
 var x=true;
 var y=false;

//數組
 var cars=new Array();
 cars[0]="Saab";
 cars[1]="Volvo";
 cars[2]="BMW";


//對象
 var person={firstname:"John", lastname:"Doe", id:5566};

/*Undefined 這個值表示變量不含有值。
能夠經過將變量的值設置爲 null 來清空變量。*/
cars=null;
person=null;

聲明變量類型

聲明新變量時，可使用關鍵詞 "new" 來聲明其類型：

 var carname=new String;
 var x=      new Number;
 var y=      new Boolean;
 var cars=   new Array;
 var person= new Object;

💡JavaScript 變量均爲對象。當您聲明一個變量時，就建立了一個新的對象。

💡JavaScript具備隱含的全局概念，意味着你不聲明的任何變量都會成爲一個全局對象屬性。

4.3.操做對象

對象擁有屬性和方法，而對屬性和方法的訪問都是經過對象.屬性或對象.方法來實現的。

String對象

//字符串（String）使用長度屬性length來計算字符串的長度
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
document.write(txt.length);

//字符串使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置
var str="Hello world, welcome to the universe."; 
var n=str.indexOf("welcome");

//match()函數用來查找字符串中特定的字符，而且若是找到的話，則返回這個字符
var str="Hello world!"; 
document.write(str.match("world") + "<br>"); 

//replace() 方法在字符串中用某些字符替換另外一些字符。
str="Please visit Microsoft!" 
var n=str.replace("Microsoft","w3cschool"); 

//字符串大小寫轉換使用函數 toUpperCase() / toLowerCase()
var txt="Hello World!";       // String 
var txt1=txt.toUpperCase();   // txt1 is txt converted to upper 
var txt2=txt.toLowerCase();   // txt2 is txt converted to lower

//字符串使用string>split()函數轉爲數組
txt="a,b,c,d,e"   // String 
txt.split(",");   // Split on commas 
txt.split(" ");   // Split on spaces 
txt.split("|");   // Split on pipe 

//Javascript 中可使用反斜線（\）插入特殊符號，轉義

Date（日期） 對象

//建立Date對象
var today = new Date()        
var d1 = new Date("October 13, 1975 11:13:00")        
var d2 = new Date(79,5,24)        
var d3 = new Date(79,5,24,11,33,0)

//獲取日期
var myDate=new Date();        
myDate.getFullYear()

//設置日期
var myDate=new Date();        
myDate.setFullYear(2010,0,14);

Array（數組） 對象

//建立數組對象
var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW");

var myCars=["Saab","Volvo","BMW"];

//訪問數組
 var name=myCars[0];
 myCars[0]="Opel";

var x=myCars.length             // the number of elements in myCars
var y=myCars.indexOf("Volvo")   // the index position of "Volvo"

//刪除最後一個元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

//刪除第一個元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]；
fruits.shift();

//數組的末尾添加新的元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("tomato");

//添加第一個元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]；
fruits.unshift("tomato");

//反序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

//排序字母順序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

//數組轉爲字符串
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();

對象（字典）

>dic = {'k1':'v1','k2':'v2'};
<Object {k1: "v1", k2: "v2"}
//有兩種方式訪問對象屬性，一個是點操做符(.)，一個是中括號操做符([])。

var testObj = {
"hat": "ballcap",
"shirt": "jersey",
"shoes": "cleats"
};

var hatValue = testObj.hat;
var hatValue = testObj["hat"];//中括號操做符的另外一個使用方式是用變量來訪問一個屬性,而點不行。


//更新對象屬性,添加相似
var  testObj.hat = "cowboyhat";
var  testObj["hat"] = "cowboyhat";

//刪除
delete testObj.hat；
delete testObj["hat"]；

// 檢查對象屬性
var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top");// true
myObj.hasOwnProperty("middle"); // false

JSON對象

JavaScript Object Notation 簡稱 JSON，它也有一個嵌套的 formarts 的數組/字典對象。

var ourMusic = [
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
"formats": [ 
"CD", 
"Cassette", 
"LP" ],
"gold": true
}
];
//獲取屬性
var myStorage = {
"car": {
"inside": {
"glove box": "maps",
"passenger seat": "crumbs"
 },
"outside": {
"trunk": "jack"
}
}
};


var gloveBoxContents = myStorage.car.inside["glove box"]; 

//獲取JSON數組值
var myPlants = [
{ 
type: "flowers",
list: [
"rose",
"tulip",
"dandelion"
]
},
{
type: "trees",
list: [
"fir",
"pine",
"birch"
]
}
];

var secondTree = myPlants[1].list[1];

//

正則RegExp對象

Regular expressions 正則表達式被用來根據某種匹配模式來尋找strings中的某些單詞。

//使用正則表達式選取數值
var testString = "There are 3 cats but 4 dogs.";

var expression = /\d+/g;    // \d 匹配字符數字，+匹配更多，g是'global'的簡寫，意思是容許這個正則表達式 找到全部的匹配而不是僅僅找到第一個匹配

// This code counts the matches of expression in testString
var digitCount = testString.match(expression).length;//testString.match(expression）返回的是匹配結果的數組形式，.length返回匹配到的數目




//空白字符有 " " (空格符)、\r (回車符)、\n (換行符)、\t (製表符) 和 \f (換頁符)

var testString = "How many spaces are there in this sentence?";

var expression = /\s+/g;// \s 選取句子中的全部空白字符

// This code counts the matches of expression in testString
var spaceCount = testString.match(expression).length;




//\s 匹配任何空白字符，\S 匹配任何非空白字符。大寫匹配小寫的相反內容
var testString = "How many spaces are there in this sentence?";

var expression = /\s+/g;// \s 選取句子中的全部非空白字符

// This code counts the matches of expression in testString
var spaceCount = testString.match(expression).length;
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程