dya50 javascript

時間  2019-11-29
標籤 dya50 dya javascript 欄目 JavaScript 简体版
原文   原文鏈接

01-JAVAscript 簡介：javascript

　　HTML： 從語義的角度，描述頁面結構。html

　　CSS：從審美的角度，描述樣式（美化頁面）java

　　JavaScript:從交互的角度，描述行爲（提高用戶體驗）python

 

 

 

Java中須要定義以下變量：es6

    int a;
    float a;
    double a;
    String a;
    boolean a;

而JavaScript中，只用定義一個變量：編程

   var a;
  • JavaScript不用關心其餘的一些事情（好比內存的釋放、指針等），更關心本身的業務。

 

 

 

JavaScript是前臺語言

 

 

JavaScript的組成

JavaScript基礎分爲三個部分：數組

  • ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。瀏覽器

  • DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。dom

  • BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。模塊化

 

 

JavaScript的特色

（1）簡單易用：可使用任何文本編輯工具編寫，只須要瀏覽器就能夠執行程序。

（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。

（3）基於對象：內置大量現成對象，編寫少許程序能夠完成目標

 

第一個JavaScript代碼：

代碼格式：

<script type = 'text/javascript'>
</script>

 

alert語句(警告彈出框)：

<script type = 'text/javascript'>

　　alert('Json')

</script>

 

語法規則：

　　1.JavaScript對換行、縮進、空格不敏感。 # 可是每一條語句末尾末尾都要加上分號。雖然分分號不是必須加的，可是爲了程序從此要壓宿，若是不加分號壓縮以後將不能運行。

　　

　　2.全部的符號，都要是英文的，好比括號、引號、分號、

 

　　3.JavaScript的註釋：

　　　　單行註釋：

//  我是註釋

　　　　多行註釋：

/*
    多行註釋1
    多行註釋2
*/

備註：咱們經常使用的sublime中：  

　　單行註釋的快捷鍵： ctrl+/

　　多行註釋的快捷鍵： ctrl +shift+ /

 

JavaScript:

　　彈出警告框：alert('')

　　控制檯輸出： console.log('')

　　用戶輸出：prompt('今每天氣好嗎？')

代碼示例：

<script type = 'text/javascript'>
    alert('是否確認提交？')
    var a = prompt('今天星期幾？')；
    console.log(a);
</script>

注意：prompt()語句中，用戶無論輸入什麼內容，都是字符串。

alert和prompt的區別：

alert('Are You Ok ?');

var a = prompt('請輸入一個數字')；

 

常量： 數字、字符串。

1.alet(886);

2.字符串必需要加上引號（單、雙無所謂）

 

變量的定義：

var a = 1;

var 是'variant' 變量的縮寫。後面必定要用一個空格和變量名割開。

　　——定義變量：var是一個關鍵字，用來定義變量。

　　——變量的賦值：等號表賦值，把右邊的值賦給左邊的變量

　

注意：在JavaScript中：永遠都是用var來定義變量

<script type = 'text/javascript'>
    var a = 1;
    console.log(a);
</script>

 

 

JavaScript: (變量命名規範)：

　　變量命名：只能由英文、數字、字母、下劃線、$符號構成，且不能以數字開頭、不能是JavaScript的保留字（關鍵字）；

 

JavaScript中的關鍵字：

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

 

JavaScript中的一些常見數據類型：

 

數值型 : number<script type = 'text/javascript'>

    var a = 100;
    console.log(typeof a);

</script>

 

typeof() 表示 「獲取變量類型」 ：

格式： typeof 變量

在JavaScript中，只要是數，就是數值類型的（number）.不管正負、浮點數（小數）、等都是number類型的。

 

字符串類型：string

var a = 'abcde';

　　var b = '路飛'；

　　var c = '123123';

　　var c = '索隆'；

　　var e = '';   //空字符串

　　console.log(typeof a);

　　console.log(typeof b);

　　console.log(typeof c);

　　console.log((typeof d);

　　console.log(typeof e);

 

鍵盤上的+多是連字符，也多是數字的加號。以下：

   console.log("我" + "愛" + "你");   //連字符，把三個獨立的漢字，鏈接在一塊兒了
    console.log("我+愛+你");           //原樣輸出
    console.log(1+2+3);             //輸出6

總結：若是加號兩邊都是數值，此時是加。不然，就是連字符（用來鏈接字符串）。

 

變量值的傳遞（賦值）：

　　a = b;

 

        var a = "3";
        var b = 2;
        console.log(a-b);

效果：（注意，字符串 - 數值 = 數值）

 

變量格式轉換：

　　字符串轉數字：

　　　parseInt()

<script type = 'text/javascript'>
    var a = '2r24rwfdsf'
    var b = parseInt(a);
</script>

 

parseInt()還具備如下特性：

（1）帶有自動淨化的功能；只保留字符串最開頭的數字，後面的中文自動消失。例如：

console.log(parseInt("2018你真帥！！");

（2）自動帶有截斷小數的功能：取整，不四捨五入。

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
 var a = parseInt(5.8 + 4.7);
 console.log(a);

 

 

三、數據類型：

 

數據類型包括：基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。

當咱們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值仍是引用類型值

1.基本數據類型

  • number
複製代碼 
var a = 123;
//typeof 檢查當前變量是什麼數據類型
console.log(typeof a)
//特殊狀況
var a1 = 5/0;
console.log(typeof e1) //Infinity 無限大. number類型
複製代碼
  • string
var str  = '123'
console.log(typeof str)

 

  • boolean
var b1 = false;
console.log(typeof b1)

 

  • null
var c1 = null;//空對象. object
console.log(c1)

 

  • undefined
var d1;
//表示變量未定義
console.log(typeof d1)

2.引用數據類型

  • Function
  • Object
  • Arrray
  • String
  • Date

　　

04-運算符

 

js中的運算符跟python中的運算符有點相似，但也有不一樣。所謂運算,在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。

1.賦值運算符

以var x = 12,y=5來演示示例|

 

2.算數運算符

var a = 5,b=2

3.比較運算符

var x = 5;

4.特殊狀況

字符串拼接+字符串運算 特殊狀況。python中有拼接字符串中更簡便的辦法，其實在js中也有，你們能夠百度引擎搜索es6模板字符串。（擴展）

複製代碼 
var  firstName  = '趙';
var lastName = '森';
var name = '伊拉克';
var am = '美軍';
// 字符串拼接
var str = "2003年3月20日,"+name+"戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，"+am+"又一次取得的大規模壓倒性軍事勝利。"
var fullStr = str;
console.log(fullStr)

var fullName = firstName +" "+ lastName;
console.log(fullName)
複製代碼 
// 不能對字符串進行+運算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1-a2) //12
var b1 = 'one';
var b2  = 'two';

// NaN. ==== not a number 是number類型
console.log(typeof(b1*b2))

　　

 

05-數據類型轉換

 

語言中咱們的數據類型有不少，在某個頁面中展現的數據類型也不一樣，好比說電話號碼我就要求number的類型，而輸入姓名的時候就要求string類型的。那麼在適當的狀況下咱們能夠將數據類型進行轉換。

1.將數值類型轉換成字符串類型

隱式轉換

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隱式轉換
console.log(typeof n3);

強制類型轉換

複製代碼 
// 強制類型轉換String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())
複製代碼

 

2.將字符串類型轉換成數值類型

複製代碼 
var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2)

// parseInt()能夠解析一個字符串 而且返回一個整數
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
複製代碼

3.任何數據類型均可以轉換爲boolean類型

複製代碼 
var b1 = '123';
var b2 = 0;
var b3 = -123

var b4 = Infinity; 
var b5 = NaN;

var b6; //undefined
var b7 = null;

// 非0既真
console.log(Boolean(b7))

 

06-流程控制

 

1.if 、if-else、if-else if-else

var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃雞成功，大吉大利')
}
alert('alex');//下面的代碼還會執行
複製代碼 
var ji  = 20;
if(ji>=20){
    console.log('恭喜你，吃雞成功，大吉大利')
}else{
    console.log('很遺憾 下次繼續努力')

}
複製代碼
複製代碼 
if (true) {
   //執行操做
}else if(true){
    //知足條件執行            
}else if(true){
   //知足條件執行        
}else{
  //知足條件執行
}
複製代碼 
注意：瀏覽器解析代碼的順序 是從上往下執行，從左往右

2.邏輯與&&、邏輯或||

複製代碼 
//1.模擬  若是總分 >400 而且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
if(sum>400 && math>90){
    console.log('清華大學錄入成功')
}else{
    alert('高考失利')
}
複製代碼
複製代碼 
//2.模擬 若是總分>400 或者你英語大於85 被複旦大學錄入
//邏輯或  只有有一個條件成立的時候 才成立
if(sum>500 || english>85){
    alert('被複旦大學錄入')
}else{
    alert('高考又失利了')
}

複製代碼

3.switch

複製代碼 
var gameScore = 'better';

switch(gameScore){

//case表示一個條件 知足這個條件就會走進來 遇到break跳出。break終止循環。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃雞成功')
    break;

    default:
    console.log('很遺憾')

}
複製代碼

4.while循環

循環三步走：

1.初始化循環變量

2.判斷循環條件

3.更新循環變量

複製代碼 
var i = 1; //初始化循環變量

while(i<=9){ //判斷循環條件
    console.log(i);
    i = i+1; //更新循環條件
}
複製代碼

練習：將1-100全部是2的倍數在控制檯中打印。使用while循環

5.do_while

 

複製代碼 
//無論有沒有知足while中的條件do裏面的代碼都會走一次
var i = 3;//初始化循環變量
do{

    console.log(i)
    i++;//更新循環條件

}while (i<10) //判斷循環條件
複製代碼

6.for循環

for(var i = 1;i<=10;i++){
     console.log(i)
 }

課堂練習：

複製代碼 
for(var i = 1;i<=100;i++){
    if(i%2==0){
        //是偶數
        console.log(i)
    }
}
複製代碼

1-100之間全部數之和

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j
}
console.log(sum)

雙重fo循環

複製代碼 
for(var i=1;i<=3;i++){
            
 　　for(var j=0;j<6;j++){
        document.write('*')
    }
            
   document.write('<br>')
 }
複製代碼

 

小做業：

1.在瀏覽器中輸出直角三角形

複製代碼 
　　　　　　　　　 *  
                ** 
                ***
                ****
                *****
                ******
複製代碼

代碼：

複製代碼 
for(var i=1;i<=6;i++){
   for(var j=1;j<=i;j++){
      　　document.write("*")；
   }
                
     document.write('<br>')；
}
複製代碼

2.在瀏覽器中輸出

複製代碼 
          *  
         ***  
        ***** 
       ******* 
      ********* 
     ***********
複製代碼

代碼：

複製代碼 
          for(var i=1;i<=6;i++){ //行數
                
                //控制咱們的空格數
                for(var s=i;s<6;s++){
                    document.write('&nbsp;')
                }
            

                for(var j=1;j<=2*i-1;j++){
                    document.write('*')
                }
                document.write('<br>')
                
            }

 

 

 

07-經常使用內置對象

 

所謂內置對象就是ECMAScript提供出來的一些對象，咱們知道對象都是有相應的屬性和方法

數組Array

1.數組的建立方式

  • 字面量方式建立（推薦你們使用這種方式，簡單粗暴）
var colors = ['red','color','yellow'];
  • 使用構造函數（後面會講）的方式建立 使用new關鍵詞對構造函數進行建立對象
  var colors2 = new Array();

2.數組的賦值

var arr = [];
//經過下標進行一一賦值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'

3.數組的經常使用方法

3.1 數組的合併 concat()

var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
        
var newCity = north.concat(south);
console.log(newCity)

 

3.2 join() 將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串

var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0

3.3 將數組轉換成字符串 toString()

var score = [98,78,76,100,0];
//toString() 直接轉換爲字符串  每一個元素之間使用逗號隔開
           
var str = score.toString();
console.log(str);//98,78,76,100,0

3.4 slice(start,end); 返回數組的一段，左閉右開

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]

3.5 pop 移除數組的最後一個元素

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.pop();
console.log(newArr);//返回值是‘趙六’

3.6 push() 向數組最後添加一個元素

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.push('小馬哥');
console.log(newArr);// 返回值是5；

3.7 reverse() 翻轉數組

var names = ['alex','xiaoma','tanhuang','angle'];
       
//4.反轉數組
names.reverse();
console.log(names);

3.8 sort對數組排序

var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

 3.9 判斷是否爲數組：isArray()

 布爾類型值 = Array.isArray(被檢測的值) ;

 

4.字符串String

字符串方法

 

4.1 chartAt() 返回指定索引的位置的字符

var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l

4.2 concat 返回字符串值，表示兩個或多個字符串的拼接

var str1 = 'al';
var str2  = 'ex';
console.log(str1.concat(str2,str2));//alexex

4.3 replace(a,b) 將字符串a替換成字符串b

var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755

4.4 indexof() 查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣

var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

4.5 slice(start，end) 左閉右開 分割字符串

var str = '小馬哥';
console.log(str.slice(1,2));//馬

4.6 split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度

var  str =  '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.split('a'));//["個人天呢,", "是嘛,你在說什麼呢?", "哈哈哈"]

4.7 substr(statr,end) 左閉右開

var  str =  '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.substr(0,4));//個人天呢

4.8 toLowerCase()轉小寫

var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage

4.9 toUpperCase()轉大寫

var str = 'xiaomage';
console.log(str.toUpperCase());

特別：

//1.將number類型轉換成字符串類型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四捨五入
var newNum = num.toFixed(2)
console.log(newNum)

5.Date日期對象

建立日期對象只有構造函數一種方式,使用new關鍵字

//建立了一個date對象
var myDate = new Date();

複製代碼 
//建立日期對象
var myDate=new Date();
        
//獲取一個月中的某一天
console.log(myDate.getDate());

//返回本地時間
console.log(myDate().toLocaleString());//2018/5/27 下午10:36:23
複製代碼

 注意： 是‘toLocaleString’  是  locale 而不是 local 

 

6.Math 內置對象

經常使用內置對象

 6.1 Math.ceil() 向上取整，'天花板函數'

var x = 1.234;
//天花板函數  表示大於等於 x，而且與它最接近的整數是2
var a = Math.ceil(x);
console.log(a);//2

6.2 Math.floor 向下取整，'地板函數'

var x = 1.234;
// 小於等於 x，而且與它最接近的整數 1
var b = Math.floor(x);
console.log(b);//1

6.3 求兩個數的最大值和最小值

//求 兩個數的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2

6.4 隨機數 Math.random()

var ran = Math.random();
console.log(ran);[0,1)

若是讓你取100-200之間的隨機數，怎麼作？

背過公式：min - max之間的隨機數： min+Math.random()*(max-min)

 

 

函數：就是將一些語句進行封裝，而後經過調用的形式，執行這些語句。

函數的做用：

  • 將大量重複的語句寫在函數裏，之後須要這些語句的時候，能夠直接調用函數，避免重複勞動。

  • 簡化編程，讓編程模塊化。

複製代碼 
  console.log("hello world");
    sayHello();     //調用函數
    //定義函數：
    function sayHello(){
        console.log("hello");
        console.log("hello world");
    }
複製代碼

第一步：函數的定義

函數定義的語法：

 function 函數名字(){

    }

解釋以下：

  • function：是一個關鍵字。中文是「函數」、「功能」。

  • 函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。

  • 參數：後面有一對小括號，裏面是放參數用的。

  • 大括號裏面，是這個函數的語句。

第二步：函數的調用

函數調用的語法：

 函數名字();

函數的參數：形參和實參

函數的參數包括形參和實參

注意：實際參數和形式參數的個數，要相同。

例子：

複製代碼 
        sum(3,4);
        sum("3",4);
        sum("Hello","World");

        //函數：求和
        function sum(a, b) {
            console.log(a + b);
        }
複製代碼

函數的返回值

例子：

複製代碼 
       console.log(sum(3, 4));

        //函數：求和
        function sum(a, b) {
            return a + b;
        }

 

09-僞數組 arguments

 

arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。

（1）返回函數實參的個數：arguments.length

例子：

複製代碼 
    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b,c) {
        console.log(arguments);
        console.log(fn.length);         //獲取形參的個數
        console.log(arguments.length);  //獲取實參的個數

        console.log("----------------");
    }
複製代碼

結果：

（2）之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：

複製代碼 
    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //將實參的第一個數改成99
        arguments.push(8);  //此方法不經過，由於沒法增長元素
    }
複製代碼

清空數組的幾種方式：

   var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：刪除數組中全部項目
    array.length = 0;     //方式1：length屬性能夠賦值，在其它語言中length是隻讀
    array = [];           //方式3：推薦
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程