WEB01_Day04(中)-JavaScript概述、JS語法、JS控制頁面元素內容

阿新 • • 發佈：2021-08-15

一、JavaScript概述

1.1 定義

　　JavaScript簡稱(JS)，當前它是一個指令碼語言，負責給前端頁面新增動態效果。

1.2 特徵

弱型別語言，宣告變數不需要指定對應的資料型別
指令碼語言，不需要像Java程式碼一樣編譯，通過瀏覽器進行解析執行
互動性強，可以單獨理解成它是一個語言，可以巢狀在html中進行使用
面向物件程式設計的語言，和Java中的面向物件程式設計思想相似
安全性高，JavaScript語言只能訪問瀏覽器內部的資料，而外部的資料，像磁碟中的資料內容無法訪問

1.3 JS使用

內聯：可以在標籤的事件中新增js程式碼邏輯，當事件觸發的時候進行執行js的程式碼邏輯

例如：<input type="button" value="普通按鈕" onclick="alert('內聯引入')">

內部：在html頁面中新增<script></script>，在標籤內部進行書寫相關邏輯的js程式碼

<script type="text/javascript">
    alert('內部引入');
</script>

外部：單獨新建js檔案，在js檔案中進行書寫相關邏輯的js程式碼，然後在html頁面中通過script的src屬性進行引用外部js的檔案路徑位置

1.4 案例測試

js01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js引入使用案例</title>

</head>
<body>
  <!-- JS內聯方式引入 -->
  <input type="button" value="普通按鈕" onclick="alert('內聯引入js')">

  <!-- JS內部方式引入  重新整理瀏覽器以後執行當前邏輯-->
  <script type="text/javascript">
    alert("內部引入js");
  </script>
  
  <!-- JS外部方式引入 -->
  <script type="text/javascript" src="test01.js"></script>
</body>
</html>

test01.js

// 單行註釋
/*
 * 多行註釋
 */
alert("外部引入js");

二、JS語法

2.1 變數

var x=10;
var d=3.14;
x=”今天是星期六”;
var p = new Person();
var b = true/false;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>變數</title>
</head>
<body>
  <script type="text/javascript">
    var x = 10;
    var d = 3.14;
    console.log(x);
    console.log(d);
    // js是弱型別語言，可以進行自動識別型別
    x = "今天是星期六，七夕我和大家一起度過";
    console.log(x);
  </script>
</body>
</html>

2.2 資料型別

JavaScript 不分基本資料型別和引用資料型別，統稱物件型別。
數值:number相當於java中所有數值型別的總和
字串:string 可以用單引號或雙引號修飾
布林值: boolean true/false
未定義: undefined 當變數只宣告不賦值型別為undefined

undefined與null是劃等號的，比較的結果為true

自定義物件型別: Hero Airplane Bullet Person Son object
typeof (變數) 獲取變數的型別 typeof(66 + 6) number型別

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>資料型別案例</title>
</head>
<body>
  <script type="text/javascript">
    var a = 99;
    var b = 3.14;
    var c = "JavaScript";
    var d = 'JavaScript';
    // 該變數只宣告，沒有進行初始化，是未定義型別
    var e;
    //建立日期物件
    var date = new Date();

    console.log(typeof(a));
    console.log(typeof(b));
    console.log(typeof(c));
    console.log(typeof(d));
    console.log(typeof(e));
    console.log(typeof(date));
    console.log(date);
    console.log('判斷未定義變數e和null是否相等：' + (e == null));

  </script>
</body>
</html>

測試結果：

number number string string undefined object Sat Aug 14 2021 21:03:31 GMT+0800 (中國標準時間) 判斷未定義變數e和null是否相等：true

2.3 運算子

算術運算子:+-*/%
- 除法運算: 會自動根據結果轉換整數還是小數
- Java: int x = 5; int y=2 x/y=2
- JS: var x=5; var y=2 x/y=2.5;
關係運算符:> < >= <= != == ===
- = =：先統一兩個變數的型別再比較值是否相等 “666”==666 true
- = = =：先比較型別是否相等相等之後再比較值是否相等 “666”===666 false
邏輯運算子:&& || !
賦值運算子:= += -= *= /= %= ++ --
三目運算子:?:

2.4 流程控制語句

分支：

使用 if 來規定要執行的程式碼塊，如果指定條件為 true
使用 else 來規定要執行的程式碼塊，如果相同的條件為 false
使用 else if 來規定要測試的新條件，如果第一個條件為 false
使用 switch 來規定多個被執行的備選程式碼塊

迴圈：

for - 多次遍歷程式碼塊
for/in - 遍歷物件屬性
while - 當指定條件為 true 時迴圈一段程式碼塊
do/while - 當指定條件為 true 時迴圈一段程式碼塊

2.5 方法

常用的四種方法:

無參無返回值 2. 無參有返回值 3. 有參無返回值 4. 有參有返回值

三種宣告方法的方式:

function 方法名(引數列表){方法體}

var 方法名 = function(引數列表){方法體}

var 方法名 = new Function(“引數1”，“引數2”，“方法體”);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>方法案例</title>
</head>
<body>
  <input type="button" value="呼叫fn1方法" onclick="fn1()">
  <input type="button" value="呼叫fn5方法" onclick="fn3(6,8)">
  <script type="text/javascript">
    var width = 100;
    var height = 35;
    console.log('方式一的方法定義');
    /* 
     * 無參無返回值方法
     * 方法定義完以後，需要呼叫才可以執行方法中的邏輯
     */
    function fn1 () {
      console.log("無參無返回值方法計算的面積值為：" + (width * height));
     }
    //呼叫無參無返回值fn1方法
    //fn1();
    console.log('-------------------------------------------------------------')
    
    /*
     * 無參有返回值方法
     */
    function fn2 () {
      var s = width * height;
      return s;
     }
    //呼叫無參有返回值fn2方法
    console.log(fn2());
    console.log('-------------------------------------------------------------')

    /*
     * 有參無返回值方法
     * 引數不需要指定型別(弱型別語言)
     */
    function fn3 (w , h) {
      console.log(w * h);
     }
    //呼叫有參無返回值方法
    fn3(width,height);

    console.log('-------------------------------------------------------------')
    /*
     * 有參有返回值方法
     */
    function fn4 (w , h) {
      return w * h;
     }
    console.log(fn4(width,height));
    console.log('-------------------------------------------------------------')

    console.log('方式二的方法定義');
    var fn5 = function(w , h) {
      return w * h;
     }
    console.log(fn5(width,height));

    console.log('方式三的方法定義');
    var fn6 = new Function("w" , "h" ,"return w * h");
    console.log(fn6(width,height));

  </script>
</body>
</html>

三、JS控制頁面元素內容

3.1 獲得頁面元素

通過id獲取頁面中的元素物件

var d = document.getElementById(“id”);
給div設定文字

d.innerText=”abc”;
給文字框設定文字

i.value=”abc”;

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>獲取頁面元素案例</title>
</head>
<body>
   <div id="div1">男同胞們加油脫單啊！！！</div>
   <input type="text" id="txt" value="今天是星期六">
   <input type="button" value="賦值按鈕" onclick="fn1()">

   <script type="text/javascript">
     // 獲取div元素，通過js所提供的方式進行獲取
     var d1 = document.getElementById("div1");
     console.log(d1.innerText);
     d1.innerText = "女同胞們要給男同胞們機會脫單！！！";

     // 獲取input元素，通過js所提供的方式進行獲取
     var inp = document.getElementById("txt");
     console.log(inp.value);
     inp.value = "明天是星期日";

     /*
     根據使用者在輸入框中輸入的內容，
     進行更改div顯示的文字內容
     */
     function fn1 () {
       // var d1 = document.getElementById("div1");
       // var inp = document.getElementById("txt");
       /*
       谷歌瀏覽器可以省略上面兩行程式碼，
       通過標籤元素的id呼叫innerText或者value
       */
       div1.innerText = txt.value;
      
     }

   </script>
</body>
</html>

3.2 練習

計算平方數

計算器

猜數字

WEB01_Day04(中)-JavaScript概述、JS語法、JS控制頁面元素內容

一、JavaScript概述 1.1 定義　　JavaScript簡稱(JS)，當前它是一個指令碼語言，負責給前端頁面新增動態效果。

00、Vue概述、HelloWorld程式、Mustache語法、v-html、v-on:click、v-for、v-bind動態繫結屬性、v-bind語法糖）

目錄1、Vue的概述和HelloWorld的使用2、模板語法2.1、插值操作2.2、v-bind指令的使用

JavaScript（一）變數、基本語法、資料型別、呈現資料的三種方法、匯入指令碼、運算子、指令碼迴圈生成、型別轉換、函式呼叫、事件驅動機制

　　什麼是JAVASCRIPT：　　JAVASCRIPT是網景(NetScape)公司推出的基於面向物件和事件驅動機制，緩解伺服器端壓力的客戶端指令碼語言

AtguiguVue【P1-P10】初識vue、模板語法、資料繫結、el和data的兩種寫法、vue中的MVVM模型

尚矽谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通_嗶哩嗶哩_bilibili 1、初識vue <!DOCTYPE html>

8、Python語法之流程控制

一引子流程控制即控制流程，具體指控制程式的執行流程，而程式的執行流程分為三種結構：順序結構（之前我們寫的程式碼都是順序結構）、分支結構（用到if判斷）、迴圈結構（用到while與for）

在QTableWidget中，如何釋放使用setCellWidget新增的控制元件元素

技術標籤：QT 本部落格對應的QT版本：Qt 5.12.2 1 使用setCellWidget新增的控制元件元素，如何釋放

【《你不知道的JS（中卷②）》】一、非同步：現在與未來

一、非同步：現在與未來：如何表達和控制持續一段時間的程式行為，是使用類似JS這樣的語言程式設計時，很重要但常常被誤解的一點。

JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

這是一組非常容易弄混的引數，都是描述某個盒子元素的寬度、高度以及上或左的距離偏移量。

淺談JavaScript中等號、雙等號、三等號的區別

一個等號是賦值操作，==先轉換型別再比較，===先判斷型別，如果不是同一型別直接為false。

JS中函式的本質，定義、呼叫，以及函式的引數和返回值

要用面向物件的方式去程式設計，而不要用面向過程的方式去程式設計物件是各種型別的資料的集合，可以是數字、字串、陣列、函式、物件……

JS中使用正則表示式封裝的一些常用的格式驗證的方法-是否外部url、是否小寫、郵箱格式、是否字元、是否陣列

場景在vue頁面中需要對一些變數或者屬性進行判斷等。所以講這些js方法抽離出來一個公共的驗證的方法。

JS中陣列、物件、物件陣列、陣列物件的遍歷方法

1 <!DOCTYPE html> 2 <html> 3<head> 4<meta charset=\"utf-8\"> 5<title></title>

Axure高階教程：做一個能在Axure中引用html、css、js等程式碼的控制元件

今天要講高階一點的教程，如何在Axure中使用html、html5、css、javascript、jQuery、AJAX等程式碼？

day_01 java概述、基礎語法

文章目錄 Java概述java語言Java語言發展史Java跨平臺原理JVM JRE和JDK的關係常用DOS命令開啟命令提示符視窗常用命令

淺談vue中index.html、main.js、App.vue、index.js之前的關係以及載入過程

引自：https://blog.csdn.net/qq_34182808/article/details/86690193 前序承接上一遍“通過webpack構建vue專案”構建的專案檔案，簡單闡述一下當我們構建完成後，vue專案中的index.html、main.js、App.vue、index.

[記錄] JavaScript 中的事件(Event物件、事件源物件、事件流、事件繫結)【轉發】

event物件:什麼是event物件：用來獲取事件的詳細資訊。(如：鍵盤的狀態、滑鼠的位置、滑鼠按鈕的狀態)event物件瀏覽器相容問題：

JS中根據身份證號獲取年齡、出生日期

//獲取年齡function GetAge(身份證號) { varstrBirthday = \"\";if (len == 18)//18位身份證號{strBirthday= 身份證號.substr(6, 4) + \"/\" + 身份證號.substr(10, 2) + \"/\" + 身份證號.substr(12, 2);}if (len

JS中禁止物件屬性擴充套件、密封物件、凍結物件

物件常量屬性概念：將屬性的writable和configurable設定為false； //將屬性的writable和configurable設定為false

Java學習筆記：基礎語法01—Java概述、資料型別、變數、識別符號、型別轉換

1. Java概述 1.1 Java語言發展史（瞭解）語言：人與人交流溝通的表達方式計算機語言：人與計算機之間進行資訊交流溝通的一種特殊語言

【C++語法】C++中cout精度、域寬、填充字元等的設定

C++中cout精度、域寬、填充字元等的設定 #include <iostream> #include <iomanip>

WEB01_Day04(中)-JavaScript概述、JS語法、JS控制頁面元素內容

一、JavaScript概述

1.1 定義

1.2 特徵

1.3 JS使用

1.4 案例測試

二、JS語法

2.1 變數

2.2 資料型別

2.3 運算子

2.4 流程控制語句

2.5 方法

三、JS控制頁面元素內容

3.1 獲得頁面元素

3.2 練習

相關推薦