web前端之JavaScript有什么用

小編給大家分享一下web前端之JavaScript有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、網頁空間、營銷軟件、網站建設、梁溪網站維護、網站推廣。

一、JavaScript介紹

1、一個完整的 JavaScript 實現(xiàn)是由以下 3 個不同部分組成的：

（1）核心（ECMAScript）

（2）文檔對象模型（DOM） Document object model (整合js，css，html)

（3）瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

2、特點

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。

JavaScript 很容易學習。

二、JavaScript引入方式及規(guī)范

1、引入方式

（1）Script標簽內寫代碼

（2）引入額外的JS文件

2、規(guī)范

// 單行注釋

/*

這是多行注釋

*/

JavaScript中的語句要以分號（;）為結束符

3、變量聲明

（1）JavaScript的變量名可以使用_，數(shù)字，字母，$組成，不能以數(shù)字開頭。

（2）聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Myname";var age = 18;

注意：

變量名是區(qū)分大小寫的。

推薦使用駝峰式命名規(guī)則。

保留字不能用做變量名。

（3）保留字

abstract             boolean             byte

char                   class                   const

debugger          double              enum

export               extends             final

float                  goto                  implements

import              int                      interface

long                 native                 package

private             protected           public

short                static                  super

synchronized    throws              transient

volatile

（4）

alert("hello");     //彈窗里面顯示hello

console.log(123);     //使用F12查看Console的內容是123，使用typeof在Console里面查看數(shù)據(jù)類型為"number"

三、JavaScript數(shù)據(jù)類型

1、JavaScript擁有動態(tài)類型

var x;                    // 此時x是undefinedvar x = 1;             // 此時x是數(shù)字var x = "Ele";      // 此時x是字符串

2、數(shù)字類型

JavaScript不區(qū)分整型和浮點型，就只有一種數(shù)字類型。

還有一種NaN，表示不是一個數(shù)字（Not a Number）。

常用方法：

parseInt("123")         // 返回123parseInt("ABC")         // 返回NaN,NaN屬性是代表非數(shù)字值的特殊值。該屬性用于指示某個值不是數(shù)字。parseFloat("123.456")  // 返回123.456

3、字符串

var a = "Hello";var b = "world";var c = a + b;console.log(c);         // 使用F12查看Console的內容是Helloworld

（1）常用方法：

.length                 返回長度

.trim()                    移除空白

.trimLeft()             移除左邊的空白

.trimRight()            移除右邊的空白

.charAt(n)                返回第n個字符

.concat(value, ...)        拼接

.indexOf(substring, start)子序列位置

.substring(from, to)    根據(jù)索引獲取子序列

.slice(start, end)        切片

.toLowerCase()         小寫

.toUpperCase()         大寫

.split(delimiter, limit) 分割

（2）substirng()和silce()特點

string.slice(start, stop)和string.substring(start, stop)：

兩者的相同點：

如果start等于end，返回空字符串

如果stop參數(shù)省略，則取到字符串末

如果某個參數(shù)超過string的長度，這個參數(shù)會被替換為string的長度

substirng()的特點：

如果 start > stop ，start和stop將被交換

如果參數(shù)是負數(shù)或者不是數(shù)字，將會被0替換

silce()的特點：

如果 start > stop 不會交換兩者

如果start小于0，則切割從字符串末尾往前數(shù)的第abs(start)個的字符開始(包括該位置的字符)

如果stop小于0，則切割在從字符串末尾往前數(shù)的第abs(stop)個字符結束(不包含該位置字符)

4、布爾類型

var a = true;var b = false;""(空字符串)、0、null、undefined、NaN都是false。

5、數(shù)組

類似于Python中的列表。

var a = [123, "ABC"];console.log(a[1]);              // 輸出"ABC"

（1）常用方法：

.length                        數(shù)組的大小

.push(ele)                    尾部追加元素

.pop()                        獲取尾部的元素

.unshift(ele)                頭部插入元素

.shift()                    頭部移除元素

.slice(start, end)            切片

.reverse()                    反轉

.join(seq)                    將數(shù)組元素連接成字符串

.concat(val, ...)            連接數(shù)組

.sort()                        排序

（2）sort方法

對一組數(shù)字類型的數(shù)組排序時，會把里面的元素轉為字符串然后比較，對其進行逐個字符比較，所以不能真實反映元素的大小

解決方法：function sortNumber(a,b) {          // 根據(jù)上面的規(guī)則自行實現(xiàn)一個排序函數(shù)
  return a - b}stringObj.sort(sortNumber)          // 調用sort方法時將定義好的排序函數(shù)傳入即可。

（3）遍歷數(shù)組中的元素

var a = [10, 20, 30, 40];for (var i=0;i
6、null和undefined
null表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數(shù)無明確的返回值時，返回的也是undefined。
null表示變量的值是空，undefined則表示只聲明了變量，但還沒有賦值。
7、類型查詢
typeof "abc"            // "string"typeof null              // "object"typeof true              // "boolean"typeof 123               // "number"typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數(shù)，也不是一個語句。
對變量或值調用 typeof 運算符將返回下列值之一：
        undefined - 如果變量是 Undefined 類型的
        boolean - 如果變量是 Boolean 類型的
        number - 如果變量是 Number 類型的
        string - 如果變量是 String 類型的
        object - 如果變量是一種引用類型或 Null 類型的
四、運算符
1、算數(shù)運算符
+ - * / % ++ --
2、比較運算符
> >= < <= != == === !==
注意：
        1 == “1”            // true（弱等于）
        1 === "1"            // false（強等于）
強等于： == = 既判斷值相不相等還判斷類型相不相等
弱等于： == 只判斷值相不相等
3、邏輯運算符
&& || !
4、賦值運算符
= += -= *= /=
五、流程控制
1、if-else
var a = 10;if (a > 5){
  console.log("yes");}else {
  console.log("no");}
2、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");}
3、switch
var day = new Date().getDay();switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
  case 2:
  console.log("Tuesday");
  break;
  case 3:
  console.log("Wednesday");
  break;
  case 4:
  console.log("Thursday");
  break;
  case 5:
  console.log("Friday");
  break;
  case 6:
  console.log("Saturday");
  break;default:
  console.log("Not is it");}
4、for
for (var i=0;i<10;i++) {
  console.log(i);}
5、while
var i = 0;while (i < 10) {
  console.log(i);
  i++;}
6、三元運算
var a = 1;var b = 2;var c = a > b ? a : b
對應python中的三元運算：
a=10b=20n=[x if a>b else b]print n
六、函數(shù)
1、函數(shù)定義
（1）普通函數(shù)定義
function f1() {
  console.log("Hello world!");
}
（2）帶參數(shù)的函數(shù)
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);}
傳的參數(shù)和所需要的參數(shù)個數(shù)不符時不會報錯：
        如果傳的參數(shù)多余需要的，就只保留需要的，其余參數(shù)無效
        如果傳的參數(shù)少于需要的，沒有傳的參數(shù)返回undefined
（3）帶返回值的函數(shù)
function sum(a, b){
  return a + b;}sum(1, 2);  // 調用函數(shù)
（4）匿名函數(shù)方式
var sum = function(a, b){
  return a + b;}sum(1, 2);
（5）立即執(zhí)行函數(shù)
(function(a, b){
  return a + b;})(1, 2);
2、arguments
function add(a,b){
  console.log(a+b);                //輸出3
  console.log(arguments.length);       //輸出2}add(1,2)
3、函數(shù)的全局變量和局部變量
局部變量：
在JavaScript函數(shù)內部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內部訪問它（該變量的作用域是函數(shù)內部）。只要函數(shù)運行完畢，本地變量就會被刪除。
全局變量：
在函數(shù)外聲明的變量是全局變量，網頁上的所有腳本和函數(shù)都能訪問它。
變量生存周期：
JavaScript變量的生命期從它們被聲明的時間開始。局部變量會在函數(shù)運行以后被刪除。全局變量會在頁面關閉后被刪除。
4、作用域
首先在函數(shù)內部查找變量，找不到則到外層函數(shù)查找，逐步找到最外層。
（1）作用域示例一：
var city = "BeiJing";function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();}f();  //輸出結果是ShenZhen
函數(shù)分定義階段和執(zhí)行階段
f()---->找到定義的函數(shù)執(zhí)行---->遇到inner()---->找到定義的inner()函數(shù)執(zhí)行---->var city = "ShenZhen"---->結果返回ShenZhen
（2）作用域示例二：
var city = "BeiJing";function Bar() {
  console.log(city);}function f() {
  var city = "ShangHai";
  return Bar;}var ret = f();ret();  // 打印結果是BeiJing
ret()---->f(）---->執(zhí)行函數(shù)f(）---->return Bar---->執(zhí)行Bar()---->Bar()內沒有聲明city---->找函數(shù)外聲明的city---->結果返回BeiJing
（3）作用域示例三：
var city = "BeiJing";function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;}var ret = f();ret();       //輸出結果是ShangHai
ret()---->f(）---->執(zhí)行函數(shù)f(）---->return inner---->執(zhí)行inner()---->inner()內沒有聲明city---->閉包函數(shù)找函數(shù)外聲明的city---->結果返回ShangHai
七、詞法分析
當函數(shù)調用的前一瞬間，會先形成一個激活對象：Avtive Object（AO），并會分析以下3個方面：
1:函數(shù)參數(shù)，如果有，則將此參數(shù)賦值給AO，且值為undefined。如果沒有，則不做任何操作。
2:函數(shù)局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，并且值為undefined。
3:函數(shù)聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。
示例一：
var age = 18;function foo(){
  console.log(age);             //AO.age=undefined,結果是undefined
  var age = 22;
  console.log(age);            //結果是22}foo();
示例二：
var age = 18;function foo(){
  console.log(age);            // 結果是 function age(){
                                               console.log("呵呵");
                                         }
  var age = 22;
  console.log(age);             //結果是22
  function age(){
    console.log("呵呵");
  }
  console.log(age);             //結果是22}foo();? age(){
    console.log("呵呵");
  }
詞法分析過程：
1、分析參數(shù)，有一個參數(shù)，形成一個 AO.age=undefine;
2、分析變量聲明，有一個 var age, 發(fā)現(xiàn) AO 上面已經有一個 AO.age，因此不做任何處理
3、分析函數(shù)聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};
最終，AO上的屬性只有一個age，并且值為一個函數(shù)聲明
執(zhí)行過程：
1、執(zhí)行第一個 console.log(age) 時，此時的 AO.age 是一個函數(shù)，所以第一個輸出的一個函數(shù)
2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，所以在第二個輸出的是 2
3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了
八、內置對象和方法
JavaScript中的所有事物都是對象：字符串、數(shù)字、數(shù)組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數(shù)據(jù)。
我們在學習基本數(shù)據(jù)類型的時候已經帶大家了解了，JavaScript中的Number對象、String對象、Array對象等。
注意var s1 = "abc"和var s2 = new String("abc")的區(qū)別：typeof s1 --> string而 typeof s2 --> Object
1、自定義對象
類似于（某方面類似）Python中的字典數(shù)據(jù)類型
var a = {"name": "Alex", "age": 18};console.log(a.name);console.log(a["age"]);遍歷對象中的內容：var a = {"name": "Alex", "age": 18};for (var i in a){
  console.log(i, a[i]);}創(chuàng)建對象：var person = new Object();     // 創(chuàng)建一個person對象person.name = "Alex";         // person對象的name屬性person.age = 18;               // person對象的age屬性
2、Date對象
（1）創(chuàng)建Date對象
//方法1：不指定參數(shù)var d1 = new Date();console.log(d1.toLocaleString());      //2018/3/18 下午2:32:35//方法2：參數(shù)為日期字符串var d2 = new Date("2004/3/20 11:12");console.log(d2.toLocaleString());      //2004/3/20 上午11:12:00var d3 = new Date("04/03/20 11:12");console.log(d3.toLocaleString());      //2020/4/3 上午11:12:00//方法3：參數(shù)為毫秒數(shù)var d3 = new Date(5000);console.log(d3.toLocaleString());      //1970/1/1 上午8:00:05console.log(d3.toUTCString());         //Thu, 01 Jan 1970 00:00:05 GMT//方法4：參數(shù)為年月日小時分鐘秒毫秒var d4 = new Date(2004,2,20,11,12,0,300);console.log(d4.toLocaleString());  //毫秒并不直接顯示2004/3/20 上午11:12:00
（2）Date對象的方法：
var d = new Date();
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完整年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(shù)(從1970/1/1午夜)
3、JSON對象（重要內容）
var str1 = '{"name": "Alex", "age": 18}';var obj1 = {"name": "Alex", "age": 18};var obj = JSON.parse(str1);                   // JSON字符串轉換成對象var str = JSON.stringify(obj1);              // 對象轉換成JSON字符串
4、RegExp對象（重要內容）
（1）創(chuàng)建正則對象方式1
         參數(shù)1 正則表達式(不能有空格)
         參數(shù)2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)
用戶名只能是英文字母、數(shù)字和_，并且首字母必須是英文字母。長度最短不能少于6位 最長不能超過12位。
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");     // 創(chuàng)建RegExp對象方式（逗號后面不要加空格）var s1 = "bc123";//RegExp對象的test方法，測試一個字符串是否符合對應的正則規(guī)則，返回值是true或false。reg1.test(s1);                                  // true
（2）創(chuàng)建方式2
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;reg2.test(s1);                                  // trueString對象與正則結合的4個方法var s2 = "hello world";s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換
注意事項1：
如果regExpObject帶有全局標志g，test()函數(shù)不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。
當找到一個匹配時，test()函數(shù)會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。
當再次執(zhí)行test()函數(shù)時，將會從該索引位置處開始查找，從而找到下一個匹配。
因此，當我們使用test()函數(shù)執(zhí)行了一次匹配之后，如果想要重新使用test()函數(shù)從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。
如果test()函數(shù)再也找不到可以匹配的文本時，該函數(shù)會自動把regExpObject.lastIndex屬性重置為 0。
var reg3 = /foo/g;// 此時 regex.lastIndex=0reg3.test('foo'); // 返回true// 此時 regex.lastIndex=3reg3.test('foo'); // 返回false// 所以我們在使用test()方法校驗一個字符串是否完全匹配時，不推薦添加全局匹配模式g。var reg4 = /^undefined$/;reg4.test();                  // 返回truereg4.test(undefined);         // 返回truereg4.test("undefined");     // 返回true
5、Math對象
abs(x)      返回數(shù)的絕對值。
exp(x)      返回 e 的指數(shù)。
floor(x)    對數(shù)進行下舍入。
log(x)      返回數(shù)的自然對數(shù)（底為e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數(shù)。
round(x)    把數(shù)四舍五入為最接近的整數(shù)。
sin(x)      返回數(shù)的正弦。
sqrt(x)     返回數(shù)的平方根。
tan(x)      返回角的正切。
以上是“web前端之JavaScript有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            網站名稱：web前端之JavaScript有什么用            

            分享路徑：http://m.jiaotiyi.com/article/pohojj.html