前端三劍客之 JavaScript(基礎知識)

時間 2019-11-22

原文原文鏈接

JavaScript

document.write() 向文檔輸出寫內容

<script>
    document.write("<p>個人第一段 JavaScript</p>");
    </script>

分號；

一般咱們在每條可執行的語句結尾添加分號。
    使用分號的另外一用處是在一行中編寫多條語句。

大小寫：

JavaScript是區分大小寫的

折行

註釋

// 行註釋
    /*  段註釋 */

變量

聲明（建立）： var a   
    聲明的變量不傳值，默認的爲 無 ： undefined 
    
    變量必須以字母開頭
    變量也能以 $ 和 _ 符號開頭（不過咱們不推薦這麼作）
    變量名稱對大小寫敏感（y 和 Y 是不一樣的變量）
    
    一條語句，多個變量 ：
        var name="Gates", age=56, job="CEO";
    
    聲明也可橫跨多行：
        var name="Gates",
            age=56,
            job="CEO";

數據類型

經常使用數據類型

經常使用數據類型
        var x                // x 爲 undefined
        var x = 6;           // x 爲數字
        var x1=34.00;        // 使用小數點來寫的數字類型，也能夠不寫
        var x = "Bill";      // x 爲字符串
    
    極大或極小的數字能夠經過科學（指數）計數法來書寫
        var y=123e5;      // 12300000
        var z=123e-5;     // 0.00123
    
    布爾，區別於Python，true和false都是小寫。
        var x=true
        var y=false
        
    數組  須要 new Array()來定義
        var cars=new Array();
            cars[0]="Audi";
            cars[1]="BMW";
            cars[2]="Volvo";
        或 var cars=["Audi","BMW","Volvo"];
        或 var cars=new Array("Audi","BMW","Volvo");
    
    對象（和python中的類似）  對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔
        var person={firstname:"Bill", lastname:"Gates", id:5566};
        
        對象屬性有兩種尋址方式：
        name=person.lastname;
        name=person["lastname"];

    Undefined 和 Null
        Undefined 這個值表示變量不含有值。
        能夠經過將變量的值設置爲 null 來清空變量。
        
聲明變量類型
    使用關鍵詞 "new" 來聲明其類型
        var carname=new String;
        var x=      new Number;
        var y=      new Boolean;
        var cars=   new Array; //數組
        var person= new Object;

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

字符串(String)

經常使用方法：javascript

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據索引獲取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

對象(Object)

經常使用方法：html

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉
.join(seq)	將數組元素鏈接成字符串
.concat(val, ...)	鏈接數組
.sort()	排序
.forEach()	將數組的每一個元素傳遞給回調函數
.splice()	刪除元素，並向數組添加新元素。
.map()	返回一個數組元素調用函數處理後的值的新數組

forEach()

語法：java

forEach(function(currentValue, index, arr), thisValue)python

參數：json

參數	描述
function(currentValue, index, arr)	必需。數組中每一個元素須要調用的函數。函數參數:參數描述currentValue必需。當前元素index可選。當前元素的索引值。arr可選。當前元素所屬的數組對象。
thisValue	可選。傳遞給函數的值通常用 "this" 值。若是這個參數爲空， "undefined" 會傳遞給 "this" 值

splice()

語法：數組

splice(index,howmany,item1,.....,itemX)函數

參數：post

參數	描述
index	必需。規定從何處添加/刪除元素。該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany	必需。規定應該刪除多少元素。必須是數字，但能夠是 "0"。若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素。
item1, ..., itemX	可選。要添加到數組的新元素

map()

語法：測試

map(function(currentValue,index,arr), thisValue)ui

參數：

參數	描述
function(currentValue, index,arr)	必須。函數，數組中的每一個元素都會執行這個函數函數參數: 參數描述currentValue必須。當前元素的值index可選。當期元素的索引值arr可選。當期元素屬於的數組對象
thisValue	可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"

對象

person=new Object();

    person.firstname="Bill";

    person.lastname="Gates";

    person.age=56;

    person.eyecolor="blue";


屬性和方法

    訪問對象屬性的語法是：

        person.firstname

    訪問對象方法的語法是：

        objectName.methodName()

函數

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 當即執行函數 書寫當即執行的函數，首先先寫兩個括號()()這樣防止書寫混亂
(function(a, b){
  return a + b;
})(1, 2);

補充：

ES6中容許使用「箭頭」（=>）定義函數。

var f = v => v;
// 等同於
var f = function(v){
  return v;
}

若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：

var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;  //這裏的return只能返回一個值，若是想返回多個值須要本身手動給他們包一個數組或對象中
}

函數中的arguments參數

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素1
}

add(1,2)

Date對象

建立Date對象

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

Date對象的方法：

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

運算符

算術運算符

運算符	描述	例子	結果
+	加	x=y+2	x=7
-	減	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求餘數 (保留整數)	x=y%2	x=1
++	累加	x=++y	x=6
--	遞減	x=--y	x=4

賦值運算符

運算符	例子	等價於	結果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

比較運算符

運算符	描述	例子
==	等於	x==8 爲 false
===	全等（值和類型）	x===5 爲 true；x==="5" 爲 false
!=	不等於	x!=8 爲 true
>	大於	x>8 爲 false
<	小於	x<8 爲 true
>=	大於或等於	x>=8 爲 false
<=	小於或等於	x<=8 爲 true

邏輯運算符

運算符	描述	例子
&&	and	(x < 10 && y > 1) 爲 true
\|\|	or	(x==5 \|\| y==5) 爲 false
!	not	!(x==y) 爲 true

流程控制

if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

for - 循環代碼塊必定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件爲 true 時循環指定的代碼塊
do / while - 一樣當指定的條件爲 true 時循環指定的代碼塊

for 循環語法：
        for (語句 1; 語句 2; 語句 3)
          {
          被執行的代碼塊
          }

        語句 1 在循環（代碼塊）開始前執行
        語句 2 定義運行循環（代碼塊）的條件
        語句 3 在循環（代碼塊）已被執行以後執行
    實例：
        for (var i=0;i<cars.length;i++)
        {
        document.write(cars[i] + "<br>");
        }
for/in 循環
    實例：
        var person={fname:"John",lname:"Doe",age:25};

        for (x in person)
          {
          txt=txt + person[x];
          }

while

語法：
    while (條件)
  {
  須要執行的代碼
  }
實例：
    while (i<5)
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }

do/while 循環
語法：
    do
  {
  須要執行的代碼
  }
    while (條件);
實例：
    do
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }
    while (i<5);

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
        x
10

測試和捕捉異常

try
  {
  //在這裏運行代碼
  }
catch(err)
  {
  //在這裏處理錯誤
  }

表單驗證

被 JavaScript 驗證的這些典型的表單數據有：
    用戶是否已填寫表單中的必填項目？
    用戶輸入的郵件地址是否合法？
    用戶是否已輸入合法的日期？
    用戶是否在數據域 (numeric field) 中輸入了文本？

必填（或必選）項目

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 驗證

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>