百度前端學院第17到18天和第16天的作業

  • 2019 年 10 月 19 日
  • 筆記

終於學JavaScript了!

數組的相關參數

數組shift刪除第一個元素,pop刪除最後一個元素,返回的都是刪除的元素,unshift在開頭增加一個元素,push在結尾增加元素,splice用於刪除和修改,slice用於切片.
***

數據類型轉換

一元的 + 運算符可用於把變數轉換為數字:如果無法轉換變數,則仍會成為數字,但是值為 NaN(Not a number):

constructor

"Bill".constructor                 // 返回 "function String()  { [native code] }"  (3.14).constructor                 // 返回 "function Number()  { [native code] }"  false.constructor                  // 返回 "function Boolean() { [native code] }"  [1,2,3,4].constructor              // 返回 "function Array()   { [native code] }"  {name:'Bill', age:62}.constructor  // 返回" function Object()  { [native code] }"  new Date().constructor             // 返回 "function Date()    { [native code] }"  function () {}.constructor         // 返回 "function Function(){ [native code] }"

可以檢查對象是否是數組函數:

function isArray(myArray) {      return myArray.constructor === Array;  }

可以在文本字元串中使用反斜杠對程式碼行進行換行。

const 關鍵字用來聲明 JavaScript中的常量(與變數相對,不可修改,但同樣是用於存儲資訊的"容器"。),常量的值不能通過重新賦值來改變,並且不能重新聲明。

就算變數定義的是數組格式,typeof返回的數據類型還是 object :

數組和對象都是object

if for switch while

if

switch

如果 default不是 switch 程式碼塊中最後一個case,請記得用 break 結束默認case

for

for (語句 1; 語句 2; 語句 3/*第三個語句是不需要;的*/) {       要執行的程式碼塊  }

語句 1 在循環(程式碼塊)開始之前執行。

語句 2 定義運行循環(程式碼塊)的條件。

語句 3 會在循環(程式碼塊)每次被執行後執行。

通常,您會使用語句 1 來初始化循環中所使用的的變數(i = 0)。

但情況並不總是這樣,JavaScript 不會在意。語句 1 是可選的。

您可以在語句 1 中初始化多個值(由逗號分隔):

for循環的語句1可以有多個,用,分割

for (i = 0, len = cars.length, text = ""; i < len; i++) {      text += cars[i] + "<br>";  }

for-in 循環遍歷的是對象的屬性,而不是數組的索引。因此, for-in 遍歷的對象便不局限於數組,還可以遍歷對象。

語句1和語句3都是可以省略的,語句2也是可選的。

正則表達式

// constructor轉換  c="1111";  a=c.constructor===Array;  console.log(a);  // false  // 使用search返回地址  var a="HELLO world";  b=a.search("wo");  console.log(b);  // 6  // 使用replace用於修改  b=a.replace("hello","你好");  console.log(b);  b = a.replace(/hello/i,"nihao");  console.log(b);  // 返回nihao world  // text用來搜索字元串返回true或者別的。  c=/e/i.test("hello world");  console.log(c);  // "hello world"裡面有e所以返回true;  console.log(typeof(true));  // exec它通過指定的模式(pattern)搜索字元串,並返回已找到的文本。如果未找到匹配,則返回 null。  console.log(/e/i.exec("hllo woefr"));  // 返回e  console.log(typeof(/e/i.exec("hellofregt")));  // 返回object

異常

function jj(){      var jieguo=document.getElementById("jieguo");      jieguo.innerHTML="nihao";      var input=document.getElementById("input").value;      try{          if(isNaN(input)) throw "不是數字";          if(input=="") throw "是空的";          input=Number(input);          if(input<5) throw "太小";          if(input>10) throw "太大";      }      catch(err){          jieguo.innerHTML="輸入:"+err;      }      finally{          document.getElementById("input").value="";      }  }

作業程式碼1 實現加減乘除

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title>IFE ECMAScript</title>  </head>  <body>      <input id="first-number" type="number" value="0" placeholder="第一個數字">      <input id="second-number" type="number" value="0" placeholder="第二個數字">      <button id="add-btn" onclick="jia()">加</button>      <button id="minus-btn" onclick="jian()">減</button>      <button id="times-btn" onclick="chen()">乘</button>      <button id="divide-btn" onclick="chu()">除</button>      <p id="result">運算結果</p>      <script>          function jia(){              try{                  one=document.getElementById("first-number").value;                  two=document.getElementById("second-number").value;                  // if(isNaN(one)) throw "不是數字";                  // if(isNaN(two)) throw "不是數字";                  console.log("原始"+typeof(one)+one);                  one=parseFloat(one);                  two=parseFloat(two);                  if(isNaN(one)) throw "不是數字";                  if(isNaN(two)) throw "不是數字";                  console.log("結果"+typeof(one)+one)                  result=one+two;                  document.getElementById("result").innerHTML="運算結果:"+result;              }              catch(err){                  console.log("輸入"+err);              }            }          function jian(){              one=document.getElementById("first-number").value;              two=document.getElementById("second-number").value;              console.log("原始"+typeof(one)+one);              one=parseFloat(one);              two=parseFloat(two);              console.log("結果"+typeof(one)+one)              result=one-two;              document.getElementById("result").innerHTML="運算結果:"+result;          }          function chen(){              one=document.getElementById("first-number").value;              two=document.getElementById("second-number").value;              console.log("原始"+typeof(one)+one);              one=parseFloat(one);              two=parseFloat(two);              console.log("結果"+typeof(one)+one)              result=one*two;              document.getElementById("result").innerHTML="運算結果:"+result;          }          function chu(){              one=document.getElementById("first-number").value;              two=document.getElementById("second-number").value;              console.log("原始"+typeof(one)+one);              one=parseFloat(one);              two=parseFloat(two);              console.log("結果"+typeof(one)+one)              result=one/two;              document.getElementById("result").innerHTML="運算結果:"+result;          }      </script>  </body>  </html>

作業程式碼2 實現轉換2進位

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title>IFE ECMAScript</title>      <style>          input{              width: 200px;          }      </style>  </head>  <body>          <input id="dec-number" type="number" placeholder="輸入一個十進位非負整數">          <input id="bin-bit" type="number" placeholder="輸入轉化後二進位數字位數">          <button id="trans-btn" onclick="jj()">轉化為二進位</button>          <p id="result">運算結果</p>  <script>    function dec2bin(decNumber) {      // 在這裡實現你的轉化方法,注意需要判斷輸入必須為一個非負整數      try{          console.log(decNumber);          if (decNumber<=0||decNumber.constructor!=Number) throw "輸入必須為一個非負整數";          var z=decNumber;          var a=""          for(var i=0;;i++){              y=z%2;              a=String(y)+a;             if(z==1){                  break;              }              z=parseInt(z/2);          }          a=Number(a);          return a;      }      catch(err){          document.getElementById("result").innerHTML=err;      }  }  // console.log(typeof(c))  // console.log(c)  // 實現黨點擊轉化按鈕時,將輸入的十進位數字轉化為二進位,並顯示在result的p標籤內  // Some codeing  function jj(){      var c=Number(document.getElementById("dec-number").value);      d=dec2bin(c);      // d=new Number(d);      weishu=document.getElementById("bin-bit").value;      weishu=Number(weishu);      long=String(d).length      console.log(long);      console.log(weishu);      if(weishu>=long){          x=weishu-long;          for(var i=0;i<x;i++){              d="0"+String(d);              // d=Number(d);          }      }else{          d="位數過小,請重新輸入,最小位數為:"+long;          console.log(typeof(d));      }      document.getElementById("result").innerHTML=d;  }        </script>  </body>  </html>

轉換2進位預覽

加減乘除預覽
自己打的一些東西

var c=12;  var day  console.log(typeof(c))  if (c!="12"){      console.log("yes")  }else if (c=='12'){      console.log("完全相等")  }  else{      console.log("no")  }  c= new Date()  console.log(new Date().getDay())  switch(new Date().getDay()){      // case 0:      //     day ="星期天";      //     break;      // case 2:      //     day ="星期2";      //     break;      // case 3:      //     day = "星期3";      //     break;      // default:      //     day="未設置";      //     // break;      case 0:  day = "星期天";  break;  case 1:  day = "星期一";   break;  case 2:  day = "星期二";   break;  case 3:  day = "星期三";   break;  }  console.log("今天是"+day);  switch (new Date().getDay()) {  case 0:  day = "星期天";  break;  case 1:  day = "星期一";   break;  case 2:  day = "星期二";   break;  case 3:  day = "星期三";   break;  // case 4:  //     day = "星期四";  //      break;  // case 5:  //     day = "星期五";  //      break;  // case 6:  //     day = "星期六";  }  console.log("今天是"+day);  var c=["html","css","python","java"] ,d="",i;  for(i=0;i<c.length;i++){  d+=c[i]+"t";  }  console.log(d);  var text="123";  for(i=0;i<c.length;i++){  text+=c[i]+"n";  }  console.log(text)  var x;  for (x in c){  console.log("star")  console.log(c[x]);  }  function zixing(){  var b=1;  for(i=0,c=1;i<100;i++){  // console.log("typeof(c)= "+typeof(c));  // console.log("c="+c);  b=1+i;  document.write(b);  document.write("<br>");  // console.log(typeof(b));  }  }  var i=null;  i=0;  while (i<10){  i++;  console.log(i)  if(i===3){  break;  }  }  var i=null;  i=0;  do{  console.log(i);  i++;  if(i===3){  console.log("hello");  // continue;  break;  }  console.log("執行完畢")  }  while(i<10);  console.log("stt")  console.log(i);  i=0;  var list=["hello","world","welcome","to","china"]  biaoqian:{  console.log(list[i]+"n");  console.log(list[3]+"n");  i++;  console.log(list[i]+"n");  break biaoqian;  console.log("after break");  }  console.log("111".constructor)  // var a="111";  // document.getElementById("id").innerHTML=lz(a);  // function lz(sh){  //     return sh.constructor === String;  // }  var fruits = ["Banana", "Orange", "Apple", "Mango"];  document.getElementById("qq").innerHTML = isArray(fruits);    function isArray(myArray) {  return myArray.constructor === Array;  }  var d=["11","123",["12",'1']];  console.log(d.length);  // c=d.join("*")  d.pop();  d.push("增加");  console.log(d);  d.shift();  console.log(d);  d=null;  d=["hello","world","nihao"];  c=d.shift();  console.log(c+"n"+d);  c=d.unshift(["11","11"]);  console.log(c+"n"+d);  console.log(d[0]);  // 通過splice刪除或增加元素;  d.splice(0,1,"xin");  console.log(d);  // concat用來鏈接元素  dd=["新","元","素"];  console.log(d.concat(dd));  c="111";  console.log(c.length);  // slice()用於切出。  e=dd.slice(1,2);  console.log(e);  var b= new Date();  console.log(b);  console.log("11");  console.log(typeof(b));  bb=b.toDateString();  console.log(bb);  console.log(typeof(bb));  b=b.getDate();  console.log(b);  console.log(typeof(b));  // constructor轉換  c="1111";  a=c.constructor===Array;  console.log(a);  // false  // 使用search返回地址  var a="HELLO world";  b=a.search("wo");  console.log(b);  // 6  // 使用replace用於修改  b=a.replace("hello","你好");  console.log(b);  b = a.replace(/hello/i,"nihao");  console.log(b);  // 返回nihao world  // text用來搜索字元串返回true或者別的。  c=/e/i.test("hello world");  console.log(c);  // "hello world"裡面有e所以返回true;  console.log(typeof(true));  // exec它通過指定的模式(pattern)搜索字元串,並返回已找到的文本。如果未找到匹配,則返回 null。  console.log(/e/i.exec("hllo woefr"));  // 返回e  console.log(typeof(/e/i.exec("hellofregt")));  // 返回object  function jj(){      var jieguo=document.getElementById("jieguo");      jieguo.innerHTML="nihao";      var input=document.getElementById("input").value;      try{          if(isNaN(input)) throw "不是數字";          if(input=="") throw "是空的";          input=Number(input);          if(input<5) throw "太小";          if(input>10) throw "太大";      }      catch(err){          jieguo.innerHTML="輸入:"+err;      }      finally{          document.getElementById("input").value="";      }  }