JavaScript進階

阿新 • • 發佈：2018-02-26

練習 -m char limit 頁面刷新 myarray 說明支持 element

數據賦值方法

var myarray = new Array(66,80,90,77,59);//創建數組同時賦值
var myarray = [66,80,90,77,59];//直接輸入一個數組（稱 “字面量數組”）

先創建數據，然後根據索引賦值：

var myarr = new Array(3)
myarr[0] = 88;
myarr[1] = 90;
myarr[2] = 68;

向數組增加一個新元素

只需使用下一個未用的索引，任何時刻可以不斷向數組增加新元素。
myarray[5]=88; //使用一個新索引，為數組增加一個新元素

查看長度:myarray.length;

swith多選擇語句:註意必須加上break語句

//周一、二學習理念知識，周三、四到企業實踐，周五總結經驗，周六、日休息和娛樂
<script type="text/JavaScript">
var myweek =3;//myweek表示星期幾變量
switch(myweek)
    {
     case 1:
     case 2:
     document.write("學習理念知識");
     break;
     case 3:
     case 4:
     document.write("到企業實踐");
     break;
     case 5:
     document.write("總結經驗");
     case 6:
     case 7:
     document.write("周六、日休息和娛樂");
    }
</script>

for語句

# 基本語法:
for(初始化變量;循環條件;循環叠代)
{     
    循環語句 
 }

# 示例:
<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值；循環條件；循環後條件值更新
{   document.write("取出第"+num+"個球<br />");
}
</script>

while循環

# 語法結構
while(判斷條件)
{
    循環語句
 }

# 示例
<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //條件判斷
{
  document.write("取出第"+num+"個球<br />");
  num=num+1;  //條件值更新
}
</script>

Do...while循環

do while結構的基本原理和while結構是基本相同的，但是它保證循環體至少被執行一次。

# 語法：
do
{
    循環語句
 }
while(判斷條件)

# 示例：
<script type="text/javascript">
   num= 1;
   do
   {
     document.write("數值為:" +  num+"<br />");
     num++; //更新條件
   }
   while (num<=5)
</script>

循環的方式：

var mynum =new Array(70,80,66,90,50,100,89);//定義數組mynum並賦值
var i;
# 1. 利用for循環遍歷: for(i=0;i<mynum.length;i++)
# 2. 利用while循環: while(i<mynum.length){i=i+1;}


# 實戰練習：

要求：
在一個大學的編程選修課班裏，我們得到了一組參加該班級的學生數據，分別是姓名、性別、年齡和年級，接下來呢，我們要利用JavaScript的知識挑出其中所有是大一的女生的的名字哦。

參考代碼：
<script type="text/javascript">
var infos = [
    [‘小A‘,‘女‘,21,‘大一‘],  [‘小B‘,‘男‘,23,‘大三‘],
    [‘小C‘,‘男‘,24,‘大四‘],  [‘小D‘,‘女‘,21,‘大一‘],
    [‘小E‘,‘女‘,22,‘大四‘],  [‘小F‘,‘男‘,21,‘大一‘],
    [‘小G‘,‘女‘,22,‘大二‘],  [‘小H‘,‘女‘,20,‘大三‘],
    [‘小I‘,‘女‘,20,‘大一‘],  [‘小J‘,‘男‘,20,‘大三‘]
    ];

 //第一次篩選，找出都是大一的信息
 var i = 0;
 while(i<infos.length){
     if(infos[i][3] == "大一"){
         if(infos[i][1]=="女"){
             document.write("性別"+infos[i][0]+"<br>");
         }
     }
     i++;
 }
</script>

函數補充

1. 可以傳入參數
function add3(x, y, z){
      sum = x + y +z;
      document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
    }
    add3(5, 8, 3);

事件

主要事件列表：
技術分享圖片

鼠標單擊事件( onclick ）

<script type="text/javascript">
  function openwin(){
     window.open(‘http://www.imooc.com‘,‘_blank‘,‘height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no‘);}
</script>
</head>
<body>
  <form>
    <input name="點擊我" type="button" value="點擊我" onclick="openwin()"/>
  </form>
</body>

鼠標經過事件
鼠標經過事件，當鼠標移到一個對象上時，該對象就觸發onmouseover事件，並執行onmouseover事件調用的程序。

# 示例代碼
<script type="text/javascript">
    function message(){
      confirm("請輸入密碼後，再單擊確定!"); }
</script>
</head>
<body>
<form>
密碼:<input name="password" type="password" >
<input name="確定" type="button" value="確定" onmouseover="message()"/>
</form>
</body>

鼠標移開事件（onmouseout）
鼠標移開事件，當鼠標移開當前對象時，執行onmouseout調用的程序。

<script type="text/javascript">
  function message(){
    alert("不要移開，點擊後進行慕課網!"); }
</script>
</head>
<body>
<form>
  <a href="http://www.imooc.com" onmouseout="message()">點擊我</a>
</form>

光標聚焦事件（onfocus）
當網頁中的對象獲得聚點時，執行onfocus調用的程序就會被執行。

  <script type="text/javascript">
    function message(){
      alert("請選擇，您現在的職業！");
    }
  </script>
</head>
<body>
請選擇您的職業：<br>
  <form>
    <select name="career" onfocus="message()"> 
      <option>學生</option> 
      <option>教師</option> 
      <option>工程師</option> 
      <option>演員</option> 
      <option>會計</option> 
    </select> 
  </form>

失焦事件（onblur）
onblur事件與onfocus是相對事件，當光標離開當前獲得聚焦對象的時候，觸發onblur事件，同時執行被調用的程序。

<form>
   用戶:<input name="username" type="text" value="請輸入用戶名！" onblur="message()">
   密碼:<input name="password" type="text" value="請輸入密碼！" >
</form>

內容選中事件（onselect）
選中事件，當文本框或者文本域中的文字被選中時，觸發onselect事件，同時調用的程序就會被執行。

<script type="text/javascript">
  function message(){
    alert("您觸發了選中事件！"); }
</script>    
</head>
<body>

<form>
個人簡介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">請寫入個人簡介，不少於200字！</textarea>
</form>

文本框內容改變事件（onchange）
通過改變文本框的內容來觸發onchange事件，同時執行被調用的程序。

<script type="text/javascript">
  function message(){
    alert("您改變了文本內容！"); }
</script>    
</head>
<body>
  <form>
  個人簡介：<br>
   <textarea name="summary" cols="60" rows="5" onchange="message()">請寫入個人簡介，不少於200字！</textarea>
  </form>

加載事件（onload）
事件會在頁面加載完成後，立即發生，同時執行被調用的程序。
卸載事件（onunload）
當用戶退出頁面時（頁面關閉、頁面刷新等），觸發onUnload事件，同時執行被調用的程序。
註意：不同瀏覽器對onunload事件支持不同。

綜合練習
實現一個計算器功能，簡單的四則運算。

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>
     <meta charset="utf8">
  <script type="text/javascript">

   //使用switch判斷語句
   // function count() {
   //     var num1 = parseInt(document.getElementById("txt1").value);
   //     var num2 = parseInt(document.getElementById("txt2").value);
   //     var operator = document.getElementById("select").value;
   //     var result;
   //     switch (operator){
   //         case "+":
   //             result=num1+num2;
   //             break;
   //         case "-":
   //             result=num1-num2;
   //             break;
   //         case "*":
   //             result=num1*num2;
   //             break;
   //         case ‘/‘:
   //             result=num1/num2
   //     }
   //     document.getElementById(‘fruit‘).value=result;
   // }

   //使用else if語句
    function count() {
        var num1 = parseInt(document.getElementById("txt1").value);
        var num2 = parseInt(document.getElementById("txt2").value);
        var operator = document.getElementById("select").value;
        var result;
        if(operator=="+"){result=num1+num2}
        else if(operator=="-"){result=num1-num2}
        else if(operator=="*"){result=num1*num2}
        else if(operator=="/"){result=num1/num2}
        // alert(result);
        document.getElementById(‘fruit‘).value=result
    }

  </script>
 </head>
 <body>
   <input type=‘text‘ id=‘txt1‘ />
   <select id=‘select‘>
        <option value=‘+‘>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type=‘text‘ id=‘txt2‘ />
   <input type=‘button‘ value=‘ = ‘ onclick="count()"/>
   <input type=‘text‘ id=‘fruit‘ />
 </body>
</html>

js對象

Date 日期對象
- 定義一個對象：var Udate=new Date();,註意：使用關鍵字new，Date()的首字母必須大寫;
- 自定義初始值： var d = new Date(2012, 10, 1); //2012年10月1日,var d = new Date(‘Oct 1, 2012‘); //2012年10月1日;
- Date對象中處理時間和日期的常用方法：

返回/設置年份方法

var mydate=new Date();//當前時間2014年3月6日
document.write(mydate+"<br>");//輸出當前時間
document.write(mydate.getFullYear()+"<br>");//輸出當前年份
mydate.setFullYear(81); //設置年份
document.write(mydate+"<br>"); //輸出年份被設定為 0081年。

返回星期方法
getDay() 返回星期，返回的是0-6的數字，0 表示星期天。如果要返回相對應“星期”，通過數組完成，代碼如下:

<script type="text/javascript">
    var mydate=new Date();//定義日期對象
    var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //定義數組對象,給每個數組項賦值
    var mynum=mydate.getDay();//返回值存儲在變量mynum中
    document.write(mydate.getDay());//輸出getDay()獲取值
    document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>

返回/設置時間方法
get/setTime() 返回/設置時間，單位毫秒數，計算從 1970 年 1 月 1 日零時到日期對象所指的日期的毫秒數。

<script type="text/javascript">
  var mydate=new Date();
  document.write("當前時間："+mydate+"<br>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推遲一小時時間：" + mydate);
</script>

String 字符串對象

var mystr="Hello world!";
var mynum=mystr.toUpperCase();\\還有轉成小寫方法toLowerCase()

返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。
語法：stringObject.charAt(index);
返回指定的字符串首次出現的位置
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
語法: stringObject.indexOf(substring, startpos);
字符串分割split()
split() 方法將字符串分割為字符串數組，並返回此數組。
語法: stringObject.split(separator,limit)
參數說明：
提取字符串substring()
substring() 方法用於提取字符串中介於兩個指定下標之間的字符。
語法: stringObject.substring(startPos,stopPos)
註意： 1. 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的所有字符，其長度為 stop 減start。
提取指定數目的字符substr()
substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。
語法: stringObject.substr(startPos,length);

Math對象
Math對象，提供對數據的數學計算。

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

向上取整ceil()
ceil() 方法可對一個數進行向上取整。
語法： Math.ceil(x);

<script type="text/javascript">
    document.write(Math.ceil(0.8) + "<br />")
    document.write(Math.ceil(6.3) + "<br />")
    document.write(Math.ceil(5) + "<br />")
    document.write(Math.ceil(3.5) + "<br />")
    document.write(Math.ceil(-5.1) + "<br />")
    document.write(Math.ceil(-5.9))
</script>

向下取整floor()
floor() 方法可對一個數進行向下取整。
語法: Math.floor(x);

<script type="text/javascript">
    document.write(Math.floor(0.8)+ "<br>")
    document.write(Math.floor(6.3)+ "<br>")
    document.write(Math.floor(5)+ "<br>")
    document.write(Math.floor(3.5)+ "<br>")
    document.write(Math.floor(-5.1)+ "<br>")
    document.write(Math.floor(-5.9))
</script>

四舍五入round()
round() 方法可把一個數字四舍五入為最接近的整數。

<script type="text/javascript">
    document.write(Math.round(1.6)+ "<br>");
    document.write(Math.round(2.5)+ "<br>");
    document.write(Math.round(0.49)+ "<br>");
    document.write(Math.round(-6.4)+ "<br>");
    document.write(Math.round(-6.6));
</script>

隨機數 random()
random() 方法可返回介於 0 ~ 1（大於或等於 0 但小於 1 )之間的一個隨機數。

<script type="text/javascript">
  document.write(Math.random());
</script>

# 獲取0-10之間的隨機數
<script type="text/javascript">
  document.write((Math.random())*10);
</script>

Array 數組對象介紹
- 數組對象是一個對象的集合，裏邊的對象可以是不同類型的。數組的每一個成員對象都有一個“下標”，用來表示它在數組中的位置，是從零開始的。
- 數組定義的方法：
  1. 定義了一個空數組: var 數組名= new Array();
  2. 定義時指定有n個空元素的數組：var 數組名 =new Array(n);
  3. 定義數組的時候，直接初始化數據：var 數組名 = [<元素1>, <元素2>, <元素3>...];
- 數組元素使用：數組名[下標] = 值; 註意: 數組的下標用方括號括起來，從0開始。
- 數組屬性：length 用法：<數組對象>.length；返回：數組的長度，即數組裏有多少個元素。它等於數組裏最後一個元素的下標加一。
數組方法：
1. 數組連接concat():
  - concat() 方法用於連接兩個或多個數組。此方法返回一個新數組，不改變原來的數組。
  - 語法: arrayObject.concat(array1,array2,...,arrayN);
2. 指定分隔符連接數組元素join()
  - join()方法用於把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
  - 語法: arrayObject.join(分隔符); 若未指定分隔符，默認使用逗號分隔；
3. 顛倒數組元素順序reverse()
  - 作用: reverse() 方法用於顛倒數組中元素的順序。
  - 語法: arrayObject.reverse();
  - 註意: 該方法會改變原來的數組，而不會創建新的數組。
4. 選定元素slice()
  - slice() 方法可從已有的數組中返回選定的元素。
  - 語法: arrayObject.slice(start,end);
  - 參數說明：
  - 該方法並不會修改數組，而是返回一個子數組。
  1. 數組排序sort()
  - sort()方法使數組中的元素按照一定的順序排列。
  - 語法: arrayObject.sort(排序方法函數)
  - 如果不指定<方法函數>，則按unicode碼順序排列。
  - 排序示例代碼：
```
<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”該成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>
```

JavaScript進階

分針網——每日分享：JavaScript進階(四)js字符串轉換成數字的三種方法

加入職業技能圈 q群：272292492 更多文章：www.f-z.cn 在js讀取文本框或者其它表單數據的時候獲得的值是字符串類型的,例如兩個文本框a和b,如果獲得a的value值為11,b的value值為9 ,那麽a.valu

JavaScript進階之常用字符串方法總結

com lastindex 作用 ng2 slice index bstr 屬性和方法 script 前面三篇文章簡單的把JavaScript基礎內容過了一遍，我們已經可以用JavaScript寫一些簡單的代碼了。今天主要總結一下JavaScript中String對象中自

編程挑戰JavaScript進階篇（慕課網題目）

align mar setattr 家居 back 技術分享 meta lock cor 編程挑戰現在利用之前我們學過的JavaScript知識，實現選項卡切換的效果。效果圖: 文字素材: 房產： 275萬購昌平鄰鐵三居總價20萬買一居 200萬內

javascript進階之路1

kobject 回顧只有一個變量創建方式驗證 spa 你知道問題路漫漫其修遠兮，吾將禿了頭依然不見大明湖畔的夏雨荷。當年我還是個javascript小白，項目經理分下來一個驗證表單功能的任務，內容不多，僅需要驗證用戶名、郵箱、密碼等。我一看so easy，於

JavaScript進階

練習 -m char limit 頁面刷新 myarray 說明支持 element 數據賦值方法 var myarray = new Array(66,80,90,77,59);//創建數組同時賦值 var myarray = [66,80,90,77,59];//直

JavaScript 進階

方法出現指定 sta bubuko pan 字符 span substring 字符串方法 ① charAt() 方法可返回指定位置的字符 ② indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置 ③ split() 方法將字符串分割為字符串數組，並

【JavaScript進階】深入理解JavaScript中ES6的Promise的作用並實現一個自己的Promise

1.Promise的基本使用 1 // 需求分析：封裝一個方法用於讀取檔案路徑，返回檔案內容 2 3 const fs = require('fs'); 4 const path = require('path'); 5 6 7 /** 8 * 把一個回

JavaScript進階（四）form表單校驗

前言本章將學習表單的校驗，作為一個前面學習的總結！方法 1.概念我們知道，在學習HTML的時候，我們做了一個非常醜陋的表單，裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的，沒有加任何的校驗。也就是說正常情況下我們需

JavaScript進階（三）document物件及HTML元素操作

前言本章將學習document物件以及其操作html元素的相關知識，本章知識尤為重要！方法 1.概念嚴格的意義上來將，document物件是window物件的一個屬性，瀏覽器對外提供的支援js的用來操作HTML文件的一個物件，此物件

JavaScript進階（二）window物件

前言本章學習JS的window物件的相關知識方法特別的,window物件不用new，直接進行使用即可，類似Math的使用方式，window關鍵字可以省略不寫。一、框

JavaScript進階（一）JS事件機制

前言做了這麼久的鋪墊，終於迎來了新的篇章，該章介紹JS中的事件機制方法 1.概念我們知道，JS是參與網頁互動的一門指令碼語言，之前所說的都是JS的基本概念，那麼怎麼來進行互動呢！那就需要JS的事件機制來進行控制了，如按鈕的點選事件觸

前端入門18-JavaScript進階之作用域鏈

宣告本系列文章內容全部梳理自以下幾個來源：《JavaScript權威指南》 MDN web docs Github:smyhvae/web Github:goddyZhao/Translation/JavaScript 作為一個前端小白，入門跟著這幾個來源學習，感謝作者的分享，

前端入門20-JavaScript進階之非同步回撥的執行時機

Javascript——進階(事件、陣列操作、字串操作、定時器)

目錄事件屬性陣列字串操作定時器封閉函式事件屬性引數描述 onclick 滑鼠點選事件 onmouseover 滑鼠移入標籤，觸發行為 onmouseout 滑鼠移出標籤，觸發行為陣列操作方法建立 arr

JavaScript進階——JSON、AJAX

一、JSON 1. json字串必須使用雙引號 2. json物件要求給key值加雙引號，而JavaScript物件字面量不需要 3. 解析：json物件轉換為JavaScript物件序列化：JavaScript物件轉換為json物件二、AJAX

JavaScript進階——作用域

一、變數複製 1. 基本型別建立一個新值，然後把該值複製到為新變數分配的位置上 2. 引用型別與基本型別相同，都會將儲存的值複製一份放到新變數分配的空間中。不同的是，這個值本質上是一個指標，所以經過複製操作後，兩個變數實際上指向了同一個物件。因此，改變其中一個

JavaScript進階九 JS實現本地文件上傳至阿裏雲服務器

ive -s 腳本字符 length sunny 美化寫入文件 asc JS實現本地文件上傳至阿裏雲服務器前言在前面的博客《 JavaScript進階(八)JS實現圖片預覽並導入服務器功能》(點擊查看詳情)中，實現了JS將本地圖片文件預覽並上傳至阿裏雲

JavaScript進階九 JS實現本地檔案上傳至阿里雲伺服器

JS實現本地檔案上傳至阿里雲伺服器前言在前面的部落格《 JavaScript進階(八)JS實現圖片預覽並匯入伺服器功能》(點選檢視詳情)中，實現了JS將本地圖片檔案預覽並上傳至阿里雲伺服器的操作。這次需要實現將本地打包好的檔案上傳至阿里雲伺

javascript進階一

4/24/2018 8:31:55 AMJavaScript晨測：1. 簡述CSS樣式表的使用方式。 2. 簡述你知道的CSS選擇器： 3. CSS中margin和padding的區別？ 4. 行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可

JavaScript進階(三) 值傳遞和引用傳遞

從C語言開始有時候講一些細節或是底層的東西，我喜歡用C語言來講，因為用C更方便來描述記憶體裡面的東西。先舉一個例子,swap函式，相信有一些程式設計經驗的人都見識過，宣告如下，函式體我就不寫了，各位腦補一下。 void swap1(int a, int b); void

JavaScript進階

數據賦值方法

函數補充

事件

js對象

相關推薦