谷哥的小弟學前端(10)——JavaScript基礎知識（1）

時間 2019-11-10

原文原文鏈接

探索Android軟鍵盤的疑難雜症
 深刻探討Android異步精髓Handler
具體解釋Android主流框架不可或缺的基石
 站在源代碼的肩膀上全解Scroller工做機制javascript

Android多分辨率適配框架（1）— 核心基礎
 Android多分辨率適配框架（2）— 原理剖析
 Android多分辨率適配框架（3）— 使用指南html

版權聲明

本文原創做者：谷哥的小弟
做者博客地址：http://blog.csdn.net/lfdfhl

JavaScript簡單介紹

初識JavaScript

JavaScript是一種網頁編程技術，其功能強大，實現簡單方便，入門簡單，即便是程序設計新手也可以高速地使用JavaScript進行簡單的編程。編程
JavaScript是一種基於對象和事件驅動。並具備安全性能的腳本語言。腳本語言簡單理解就是在client的瀏覽器就可以互動響應處理程序的語言。而不需要server的處理和響應，固然JavaScript也可以作到與server的交互響應數組
JavaScript可以被嵌入到HTML文件裏，不需要通過Webserver就可以對用戶操做做出響應，使網頁更好地與用戶交互。下降用戶等待時間。提高用戶體驗瀏覽器
歸納地講：JavaScript是一門執行在瀏覽器的腳本編程語言安全

JavaScript的組成

ECMAScript：JavaScript的語法標準
DOM：JavaScript操做網頁上元素的API
BOM：JavaScript操做瀏覽器的部分功能的API

JavaScript的特色

簡單易用
可以使用文本編輯工具編寫。僅僅需瀏覽器就可執行程序
解釋執行
程序執行前不編譯。而是在程序的執行過程當中逐行進行解釋
基於對象
不只可以建立對象,也能使用現有的對象
跨平臺特性
支持絕大多數瀏覽器。可在多平臺下執行(如Windows、Linux、Mac、Android、iOS)

JavaScript的書寫位置

JavaScript有兩種常見的寫法，分別介紹例如如下markdown

第一種：內嵌式寫法框架

<!DOCTYPE html>
<!-- 本文做者：谷哥的小弟 -->
<!-- 博客地址：http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
      <title>JS的寫法</title>
      <script type="text/javascript"> //此處爲JS代碼 </script>  
    </head>

    <body>

    </body>

</html>

將<script></script>置於<head></head>中
在<script></script>標籤內寫JavaScript的相關代碼
請以分號」;」結束每一行JavaScript代碼
推薦將<script></script>置於<html></html>以後

另一種：外鏈式寫法異步

<!DOCTYPE html>
<!-- 本文做者：谷哥的小弟 -->
<!-- 博客地址：http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>JS的寫法</title>
      <script type="text/javascript" src="test.js"> </script>  
    </head>

    <body>

    </body>

</html>

將JavaScript相關代碼寫在.js文件裏
請以分號」;」結束每一行JavaScript代碼
利用<script></script>的src屬性連接.js文件
爲提升瀏覽器的解析效率，儘可能將多個js文件合併成一個js

JavaScript之Hello World

嗯哼，咱們來體驗一把JavaScript

利用alert( )彈出信息

<!DOCTYPE html>
<!-- 本文做者：谷哥的小弟 -->
<!-- 博客地址：http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>Hello World</title>
    </head>

    <body>

    </body>

</html>

<script type="text/javascript"> alert("Hello World"); </script>

執行後，效果例如如下圖所看到的：

在此。利用alert( )在網頁中彈出提示消息。

利用confirm( )顯示確認對話框

confirm("您真的要關閉此網頁麼？");

執行後。效果例如如下圖所看到的：

在此，利用confirm( )顯示一個帶有指定消息和肯定及取消button的對話框。

利用prompt( )接收用戶輸入

prompt("請輸入您的會員卡號");

執行後，效果例如如下圖所看到的：

在此。利用prompt( )接收用戶的輸入信息。

利用console.log( )輸出日誌

console.log("This is log message");

執行後，效果例如如下圖所看到的：

在此，利用console.log( )輸出日誌進行代碼的調試

利用document.write( )向輸出流寫信息

document.write("你們好<br>我是谷哥的小弟");

執行後。效果例如如下圖所看到的：

在此，利用document.write( )向輸出流寫信息。輸出信息可以是純文本也可包括HTML標籤

JavaScript的變量

變量的定義

經過var關鍵字定義聲明變量。比方:

var name;

在此定義。一個變量叫name

變量的賦值

經過」=」爲變量賦值，比方：

var name;
name=」谷哥的小弟」

固然。也可以在定義變量的同一時候爲其賦值，比方：

var name=」谷哥的小弟」;

變量的命名規範

變量名中不能含有空格
請注意JavaScript嚴格區分字母大寫和小寫。因此var A和var a是不一樣的變量
請勿使用純數字或者以數字開頭定義變量
不建議使用漢字定義變量
請勿使用純特殊字符定義變量
請勿使用特殊字符開頭(「_」除外)定義變量
請勿使用關鍵字定義變量。比方var、try、void 等
不建議使用保留字定義變量；比方byte、char、import等

JavaScript的數據類型

JavaScript的數據類型可以分爲簡單數據類型和複雜數據類型這兩大類。
在實際開發中可以使用typeof(var)推斷變量的數據類型。

簡單數據類型
- number 數字類型
- string 字符串類型
- boolean 布爾類型
- undefined 變量未初始化
複雜數據類型
- Array 數組
- Object 對象

現在，對以上數據類型具體介紹例如如下

簡單數據類型——number

把數字(比方小數、正數、負數)賦值給變量，那麼該變量的數據類型就是數字類型(number)。

數字類型(number)不但可以表示常見的十進制數字還可以表示十六進制，八進制的數字。

請看例如如下演示樣例：

<script type="text/javascript"> var num1=9527;//十進制 var num2=0x22;//十六進制 var num3=0124;//八進制 document.write("num1="+num1+",num2="+num2+",num3="+num3); </script>

結果爲:

num1=9527,num2=34,num3=84

簡單數據類型——string

用雙引號或者單引號包括起來的變量都是字符串類型。

請看例如如下演示樣例：

<script type="text/javascript"> var str1="谷哥的小弟"; var str2='有心課堂'; document.write("str1="+str1+",str2="+str2); </script>

結果爲:

str1=谷哥的小弟,str2=有心課堂

簡單數據類型——boolean

常用boolean類型數據表示真與假。

當中：
true表示真，相應的數字是1
false表示假，相應的數字是0

請看例如如下演示樣例：

<script type="text/javascript"> var b1=true; var b2=false; document.write("b1="+b1+",b2="+b2); </script>

結果爲:

b1=true,b2=false

簡單數據類型——undefined

undefined表示定義了變量但未對其初始化。

比方：

<script type="text/javascript"> var username; document.write("username的類型是:"+typeof(username)); </script>

結果爲：

username的類型是:undefined

此處，儘管聲明瞭變量username但未對其初始化，此時username的類型是undefined

複雜數據類型——Array

JavaScript的Array可以包括隨意數據類型，並經過索引來訪問每個元素。並可經過length屬性取得Array的長度

請看例如如下演示樣例：

<script type="text/javascript"> var arr=[1,"hello",true,9527]; var len=arr.length; document.write("len="+len+",arr[1]="+arr[1]+",arr[2]="+arr[2]); </script>

結果爲:

len=4,arr[1]=hello,arr[2]=true

在此對Array僅做很easy的介紹。咱們會在隨後的博客中對它做進一步的瞭解和學習

複雜數據類型——Object

JavaScript的Object用於描寫敘述對象。它是一種由若干鍵值對組成的無序的集合數據類型

請看例如如下演示樣例：

<script type="text/javascript"> var cheer = { name:"陳綺貞", birth:1975, gender:"女", height:168 }; document.write("name="+cheer.name+",height="+cheer.height); </script>

結果爲:

name=陳綺貞,height=168

請注意，假設給變量賦值null。那麼該變量也是Object類型的；好比：

<script type="text/javascript"> var username=null; document.write("username的類型是:"+typeof(username)); </script>

結果爲:

username的類型是:object

在此對Object僅做很easy的介紹。咱們會在隨後的博客中對它做進一步的瞭解和學習

JavaScript的強制數據類型轉換

1 將number轉換成string

可利用String(var)和var.toString()這兩種方式將number轉換成string

請看例如如下演示樣例：

<script type="text/javascript"> var age=18; var pai=3.14; document.write("age本來的數據類型是:"+typeof(age)+"<br>"); document.write("pai本來的數據類型是:"+typeof(pai)+"<br>"); age=String(age); pai=pai.toString(pai); document.write("age現在的數據類型是:"+typeof(age)+"<br>"); document.write("pai現在的數據類型是:"+typeof(pai)+"<br>"); </script>

結果爲：

age本來的數據類型是:number
pai本來的數據類型是:number
age現在的數據類型是:string
pai現在的數據類型是:string

2 將string轉換成number

可利用Number(var)和parseInt(var)以及parseFloat(var)將string轉換成number

請看例如如下演示樣例：

<script type="text/javascript"> var pai1="3.1415"; document.write("轉換前pai1="+pai1+",數據類型是"+typeof(pai1)+"<br>"); var pai2="3.14159"; document.write("轉換前pai2="+pai2+",數據類型是"+typeof(pai2)+"<br>"); var pai3="3.141596"; document.write("轉換前pai3="+pai3+",數據類型是"+typeof(pai3)+"<br>"); pai1=Number(pai1); document.write("轉換後pai1="+pai1+",數據類型是"+typeof(pai1)+"<br>"); pai2=parseInt(pai2); document.write("轉換後pai2="+pai2+",數據類型是"+typeof(pai2)+"<br>"); pai3=parseFloat(pai3); document.write("轉換後pai3="+pai3+",數據類型是"+typeof(pai3)+"<br>"); </script>

結果爲：

轉換前pai1=3.1415,數據類型是string
轉換前pai2=3.14159,數據類型是string
轉換前pai3=3.141596,數據類型是string
轉換後pai1=3.1415,數據類型是number
轉換後pai2=3,數據類型是number
轉換後pai3=3.141596,數據類型是number

請注意：

利用Number(var)將string轉換成number，最後的結果爲原數據
利用parseInt(var)將string轉換成number。最後的結果爲原數據的整數部分
利用parseFloat(var)將string轉換成number，最後的結果爲原數據

3 將其餘數據類型轉換爲boolean

可利用Boolean(var)將其餘數據類型轉換爲boolean

請看例如如下演示樣例：

<script type="text/javascript"> var age=18; document.write("轉換前age="+age+",數據類型是"+typeof(age)+"<br>"); var user="谷哥的小弟"; document.write("轉換前user="+user+",數據類型是"+typeof(user)+"<br>"); var zero=0; document.write("轉換前zero="+zero+",數據類型是"+typeof(zero)+"<br>"); age=Boolean(age); document.write("轉換後age="+age+",數據類型是"+typeof(age)+"<br>"); user=Boolean(user); document.write("轉換後user="+user+",數據類型是"+typeof(user)+"<br>"); zero=Boolean(zero); document.write("轉換後zero="+zero+",數據類型是"+typeof(zero)+"<br>"); </script>

結果爲：

轉換前age=18,數據類型是number
轉換前user=谷哥的小弟,數據類型是string
轉換前zero=0,數據類型是number
轉換後age=true,數據類型是boolean
轉換後user=true,數據類型是boolean
轉換後zero=false,數據類型是boolean

請注意：

可利用Boolean(var)可將數字0轉換爲false
可利用Boolean(var)將其餘數據類型強制轉換爲true

JavaScript的算術運算符

關於JavaScript的算術運算符。請參見下表：

JavaScript的賦值運算符

關於JavaScript的賦值運算符。請參見下表：

JavaScript的比較運算符

JavaScript中常用的比較運算符有 >、<、>=、<=
比較運算符最後的結果爲：true或false

請看例如如下演示樣例：

<script type="text/javascript"> var num1=9527; var num2=9528; var result=num1>num2; document.write("比較結果爲："+result); </script>

結果爲:

比較結果爲：false

JavaScript的邏輯運算符

在此介紹JavaScript中三種常見的邏輯運算符：或運算符號||和且運算符號&&以及非運算符!；開發中可運用這三種邏輯運算符對兩個boolean類型的變量進行運算。

1 、或運算符號||

倘若兩個boolean類型的變量，當中一個爲true，那麼||運算的結果爲true
倘若兩個boolean類型的變量，當中一個爲false。那麼||運算的結果爲true
倘若兩個boolean類型的變量，兩個均爲false，那麼||運算的結果爲false

2 、且運算符號&&

倘若兩個boolean類型的變量。當中一個爲true。那麼&&運算的結果爲false
倘若兩個boolean類型的變量，兩個均爲true，那麼&&運算的結果爲true
倘若兩個boolean類型的變量，兩個均爲false。那麼&&運算的結果爲false

3 、非運算符號!

倘若一個boolean類型的變量，其值爲false ,那麼!運算後結果爲true
倘若一個boolean類型的變量，其值爲true ,那麼!運算後結果爲false

JavaScript的等號=運算符

在此介紹JavaScript中與等號=相關的常用運算符

1 、=運算符

利用=運算符進行賦值操做
請看例如如下演示樣例：

var age=18;

在此利用=運算符爲變量age賦值

2 、==運算符

利用==運算符推斷兩個變量是否一樣。請注意，該運算符僅僅推斷兩個變量的內容是否一樣而與兩個變量的數據類型無關。

請看例如如下演示樣例：

<script type="text/javascript"> var num1=9527; var num2="9527"; document.write("num1="+num1+",數據類型是"+typeof(num1)+"<br>"); document.write("num2="+num2+",數據類型是"+typeof(num2)+"<br>"); var result=(num1==num2); document.write("比較的結果result="+result+"<br>"); </script>

結果爲：

num1=9527,數據類型是number
num2=9527,數據類型是string
比較的結果result=true

3 、===運算符

利用===運算符推斷兩個變量是否一樣。請注意，該運算符不但推斷兩個變量的內容是否一樣而且也推斷兩個變量的數據類型是否一樣。

請看例如如下演示樣例：

<script type="text/javascript"> var num1=9527; var num2="9527"; var num3=9527; document.write("num1="+num1+",數據類型是"+typeof(num1)+"<br>"); document.write("num2="+num2+",數據類型是"+typeof(num2)+"<br>"); document.write("num3="+num3+",數據類型是"+typeof(num3)+"<br>"); var result1=(num1==num2); document.write("比較的結果result1="+result1+"<br>"); var result2=(num1===num3); document.write("比較的結果result2="+result2+"<br>"); var result3=(num1===num2); document.write("比較的結果result3="+result3+"<br>"); </script>

結果爲：

num1=9527,數據類型是number
num2=9527,數據類型是string
num3=9527,數據類型是number
比較的結果result1=true
比較的結果result2=true
比較的結果result3=false

4 、!=運算符

利用!=運算符推斷兩個變量是否不一樣樣。

請注意，該運算符僅僅推斷兩個變量的內容是否不一樣樣而與兩個變量的數據類型無關。

請看例如如下演示樣例：

<script type="text/javascript"> var num1=9527; var num2="9527"; document.write("num1="+num1+",數據類型是"+typeof(num1)+"<br>"); document.write("num2="+num2+",數據類型是"+typeof(num2)+"<br>"); var result=(num1!=num2); document.write("比較的結果result="+result+"<br>"); </script>

結果爲：

num1=9527,數據類型是number
num2=9527,數據類型是string
比較的結果result=false

5 、!==運算符

利用!==運算符推斷兩個變量是否不一樣樣。

請注意。該運算符不但推斷兩個變量的內容是否不一樣樣而且也推斷兩個變量的數據類型是否不一樣樣。倘若兩個變量的內容同樣而且數據類型也同樣。那麼!==的結果爲false；其他狀況下爲true

請看例如如下演示樣例：

<script type="text/javascript"> var num1=9527; var num2="9527"; var num3="1234"; var num4=9527; document.write("num1="+num1+",數據類型是"+typeof(num1)+"<br>"); document.write("num2="+num2+",數據類型是"+typeof(num2)+"<br>"); document.write("num3="+num3+",數據類型是"+typeof(num3)+"<br>"); document.write("num4="+num4+",數據類型是"+typeof(num4)+"<br>"); var result1=(num1!==num2); document.write("比較的結果result1="+result1+"<br>"); var result2=(num1!==num3); document.write("比較的結果result2="+result2+"<br>"); var result3=(num2!==num3); document.write("比較的結果result3="+result3+"<br>"); var result4=(num1!==num4); document.write("比較的結果result4="+result4+"<br>"); </script>

結果爲：

num1=9527,數據類型是number num2=9527,數據類型是string num3=1234,數據類型是string num4=9527,數據類型是number 比較的結果result1=true 比較的結果result2=true 比較的結果result3=true 比較的結果result4=false