JavaScript--總結一（變數+資料型別+運算子）-有解無憂

JavaScript是什么？

是一門腳本語言（不需要編譯,直接執行）

是一門解釋性語言

是一門動態型別的語言

是一門基于物件的語言

JavaScript分為三個部分

1.ECMAScript 標準----js的基本語法

2.DOM---Document Object Model 檔案物件模型（一套操作頁面元素的API）

DOM可以把HTML看作是檔案樹，通過DOM提供的API對樹上的節點進行操作

3.BOM---Browser Object Model 瀏覽器物件模型（一套操作瀏覽器功能的API）

通過BOM操作瀏覽器視窗，比如（彈出框，控制瀏覽器跳轉，獲取解析度等）

JavaScript和HTML、CSS的區別

1、HTML：提供網頁的結構，提供網頁中的內容

2、CSS：用來美化網頁

3、JavaScript：可以用來控制網頁內容，給網頁增加動態的效果

JavaScript的書寫位置

1.寫在行內

<input type="button" value="https://www.cnblogs.com/xiao-tian530/archive/2020/12/27/按鈕" onclick="alert('Hello World')" />

2.寫在script標簽中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

3.寫在外部js檔案中，在頁面引入

<script src="https://www.cnblogs.com/xiao-tian530/archive/2020/12/27/main.js"></script>

js代碼需要注意的問題

在一對javascript標簽的代碼中有錯誤的代碼時，那么在錯誤代碼后的js代碼都不會執行

如果第一對Script中有錯誤的代碼，不會影響后面的Script標簽中的js代碼執行

script的標簽中可以寫什么內容 type="text/javascript"是標準寫法或者寫language="JavaScript"都可以但是,目前在我們的html頁面中,type和language都可以省略,原因:html是遵循h5的標準如果script標簽是引入外部js檔案的作用,那么這對標簽中不要寫任何的js代碼,如果要寫,重新寫一對script標簽,里面寫代碼變數什么是變數？變數是計算機記憶體中存盤資料的識別符號，根據變數名稱可以獲取記憶體中存盤的資料為什么使用變數？使用變數可以方便的獲取或者修改記憶體中的資料 js中存盤資料使用變數的方式（名字，值---資料） js中宣告變數都用var---存盤資料，資料應該有對應的資料型別 js中的字串型別的值都用雙引號或者單引號變數---作用，存盤資料或者操作資料 變數宣告（有var，有變數名字，沒有值）

var age;

變數初始化（有var ，有變數名字，有值）

var age;
age = 18;

同時宣告多個變數

var age, name, sex;
age = 10;
name = 'zs';

同時宣告多個變數并且賦值

var age = 10, name = 'zs';

變數的命名規則和規范

規則--必須遵守的，不遵守會出現報錯

由字母、數字、下劃線、$符號組成，不能以數字開頭

不能用關鍵字和保留字，例如for、while，

區分大小寫

規范--建議遵守，不遵守不會報錯

變數名必須有意義

遵守駝峰命名法，首字母小寫，后面單詞的首字母大寫

資料型別

字面量

在源代碼中一個固定值的表示法

數值的字面量：8，9，0

字串字面量：“前端”，“小田”

布爾字面量：true，false

js中簡單資料型別

Number: 數值字面量，數值的固定值的表示法，數字型別（整數和小數）數值判斷：

NaN: not a number NaN與和任何值都不相等，包括它本身 is NaN: is not a number 注意：不要用小數驗證小數不要使用NaN判斷是不是NaN,應該使用is NaN
var num;
   console.log(num+10==NaN);//---false
   num+10不是一個數字  NaN  倆個不是數字的值無法判斷相等

如何驗證這個結果是不是NaN，應該使用isNaN()//
使用isNaN()驗證是一個數字時，結果為false
使用isNaN()驗證不是一個數字時，結果為true
需要表示十進制：正常數字需要表示八進制：以0開頭需要表示十六進制：0x開頭

String： 字串型別（值一般都是單引號或者雙引號括起來的）轉義符：

字串的長度：使用length屬性可以獲取字串的長度

字串的拼接：使用+連接倆邊只要有一個是字串，那么+就是字串拼接功能

倆邊如果都是資料，那么就是算數功能

Boolean：布爾型別（值只有倆個，true（真1），false（假0）） Undefined：未定義，值只有一個：undefined

什么情況下結果為undefined？變數宣告了，沒有賦值函式沒有明確回傳值，如果接受了，結果是undefined 如果一個變數的結果是undefined和一個數字進行計算，結果:NaN,不是一個數字，也沒有意義

Null： 空型別，值只有一個：null，一個物件指向為空，此時可以賦值為null（變數的值如果想為null，必須手動設定）

復雜資料型別

Object: 物件如何獲取變數的資料型別？ typeof 變數名 typeof(變數名)

var age = 18;
console.log(typeof age);  // 'number'
console.log(typeof(age));

資料型別轉化

如何使用谷歌瀏覽器，快速的查看資料型別？

字串的顏色是黑色的，數值型別是藍色的，布爾型別也是藍色的，undefined和null是灰色的

其他型別轉字串型別

.toString();

var num = 5;
console.log(num.toString());

String();

如果變數是有意義--呼叫.toString()使用轉換

如果變數沒有意義--使用String()轉化

   var num2;//值為undefined，無意義
   console.log(num2.toString());
   var num3=null;
   console.log(num3.toString());//以上會報錯

    這個可以
   var num2;
   console.log(String(num2));
   var num3=null;
   console.log(String(num3));

其他型別轉數值型別

Number();轉數字

Number()可以把任何值轉化成數值，如果要轉換的字串中有一個不是數值的字符，回傳NaN

parseInt();轉整數

var num1 = parseInt("12.3abc");  // 回傳12，如果第一個字符是數字會決議知道遇到非數字結束
var num2 = parseInt("abc123");   // 回傳NaN，如果第一個字符不是數字或者符號就回傳NaN

parse Float();轉小數

parseFloat()把字串轉換成浮點數
parseFloat()和parseInt非常相似，不同之處在與
parseFloat會決議第一個. 遇到第二個.或者非數字結束
如果決議的內容里只有整數，決議成整數

+，-0等運算

var str = '500';
console.log(+str); // 取正
console.log(-str); // 取負
console.log(str - 0);

其他型別轉化為布爾型別

Boolean()

0 ''(空字串) null undefined NaN 會轉換成false 其它都會轉換成true

運算子

一些符號---用來計算

算數運算子：+ - * / %

算數運算子運算式：由算數運算子連接起來的運算式

一元運算子 ++ --

只有一個運算元的運算子 ++ --

++ 自身加一

-- 自身減一

總結 前置++：先加1，后參與運算

后置++：先參與運算，后加1

上面兩個理解后，下面兩個自通

前置-- ：先減1，后參與運算

后置-- ：先參與運算，后減1

說明：var num=1; ++num之后num的值為2，++num的值2

num++之后的num值為2，num++的值為1

二元運算子:

這個運算子需要兩個運算元就可以運算

三元運算子:

運算式1 ? 運算式2 : 運算式3
是對if……else陳述句的一種簡化寫法

復合運算子: += -= *= /= %=

復合運算運算式：由復合運算子連接起來的運算式

關系運算子：> < >= <= ==不嚴格的 ===嚴格！=不嚴格的不等，！==嚴格的不等

關系運算運算式：由關系運算子連接起來的運算式

關系運算運算式的結果是布爾型別

邏輯運算子：

&&：與倆個運算元同時為true，結果為true，否則都是false

|| : 或倆個運算元有一個為true，結果為true，否則為false

！: 非取反

賦值運算子

= += -= *= /+ %=

例如：
var num = 0;
num += 5;    //相當于  num = num + 5;

運算子的優先級

優先級從高到底
1. () 優先級最高
2. 一元運算子 ++ -- !
3. 算數運算子先* / % 后 + -
4. 關系運算子 > >= < <=
5. 相等運算子 == != === !==
6. 邏輯運算子先&& 后||
7. 賦值運算子

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/241805.html

標籤：其他

上一篇：Checkbox復選框實作全選和全不選功能

下一篇：關于rem布局使用多倍圖的問題