javaweb(3)：JavaScript

来源:https://www.cnblogs.com/liuhui0308/archive/2019/10/17/11681712.html
-Advertisement-
Play Games

1. JavaScript的概述 1.1 什麼是JavaScript JavaScript是web上一種功能強大的編程語言，用於開發互動式的web頁面。它不需要進行編譯，而是直接嵌入在HTML頁面中，由瀏覽器執行。 JavaScript被設計用來向HTML頁面添加交互行為。 JavaScript是一 ...


1. JavaScript的概述

1.1 什麼是JavaScript

JavaScript是web上一種功能強大的編程語言，用於開發互動式的web頁面。它不需要進行編譯，而是直接嵌入在HTML頁面中，由瀏覽器執行。

JavaScript被設計用來向HTML頁面添加交互行為。

JavaScript是一種腳本語言(腳本語言是一種輕量級的編程語言)。

JavaScript由數行可執行電腦代碼組成。

JavaScript通常被直接嵌入HTML頁面。

JavaScript是一種解釋性語言(就是說，代碼執行不進行預編譯)。

JavaScript的組成：

核心（ECMAScript）

文檔對象模型（DOM）

瀏覽器對象模型（BOM）

 

ECMAScript：語法，語句.

BOM：瀏覽器對象.

DOM：Document Object Model.操作文檔中的元素和內容.

1.2 JavaScript的作用

使用JavaScript添加頁面動畫效果，提供用戶操作體驗。主要應用有：嵌入動態文本於HTML頁面、對瀏覽器事件作出相應、讀寫HTML元素、驗證提交數據、檢測訪客的瀏覽器信息等。

1.3 JavaScript的引入

在HTML文件中引入JavaScript有兩種方式，一種是在HTML文檔直接嵌入JavaScript腳本，稱為內嵌式，另一種是連接外部JavaScript腳本文件，稱為外鏈式。對他們的具體講解如下：

(1)內嵌式，在HTML文檔中，通過<script>標簽引入，如下

<script type="text/javascript">
           //此處為JavaScript代碼
</script>

(2)外聯式，在HTML文檔中，通過<script src="">標簽引入.js文件，如下：

<script src="1.js" type="text/javascript" charset="UTF-8"></script>

2. 基本語法

2.1 變數

(1)在使用JavaScript時，需要遵循以下命名規範：

必須以字母或下劃線開頭，中間可以是數字、字元或下劃線

變數名不能包含空格等符號

不能使用JavaScript關鍵字作為變數名，如：function

JavaScript嚴格區分大小寫。　

(2)變數的聲明

var 變數名;    /JavaScript變數可以不聲明，直接使用，預設值：undefined

(3)變數的賦值

var 變數名 = 值;    //JavaScript變數是弱類型，及同一個變數可以存放不同類型的數據

2.2 數據類型

【基本類型】

Undefined，Undefined類型只有一個值，即undefined。當聲明的變數未初始化時，該變數的預設值是undefined。

Null，只有一個專用值null，表示空，一個占位符。值undefined實際上是從值null派生來的，因此ECMAScript把它們定義為相等的。

alert(null == undefined); //輸出 "true"，儘管這兩個值相等，但它們的含義不同。

　　Boolean，有兩個值true和false

　　Number，表示任意數字

　　String，字元串由雙引號(")或單引號(')聲明的。JavaScript沒有字元類型

對變數或值調用typeof運算符將返回下列值之一：

undefined-如果變數是Undefined類型的

boolean-如果變數是Boolean類型的

number-如果變數是Number類型的

string-如果變數是String類型的

object-如果變數是一種引用類型或Null類型的

 

【引用類型】

引用類型通常叫做類（class），也就是說，遇到引用值，所處理的就是對象。

JavaScript是基於對象而不是面向對象。對象類型的預設值是null。

JavaScript提供眾多預定義引用類型（內置對象）。

2.3 運算符

JavaScript運算符與java運算符基本一致。可以看我的java基礎隨筆

2.4 基本操作

alert()：向頁面中彈出一個提示框！！

innerHTML：向頁面的某個元素中寫一段內容，將原有的東西覆蓋

document.write()：向頁面中寫內容

2.5 js中函數的編寫方式：

函數：實現一定功能的代碼塊，類似與java中的方法。關鍵字function，函數名自定義。

        <script type="text/javascript">
        
            //方式1：聲明函數
            function demo01(){
                alert("案例1");
            }
            //方式1：調用函數
            demo01();
            
            //方式2：聲明匿名函數
            var demo02 = function(){
                alert("案例2");
            };
            //方式2：調用函數
            demo02();
        
        </script>

3. 案例：輪播圖

3.1 定時器setInterval

window.setInterval(code,millisec) 按照指定的周期(間隔)來執行函數或代碼片段。    
　　參數1：code必須。執行的函數名或執行的代碼字元串。
　　參數2：millisec必須。時間間隔，單位：毫秒。
    返回值：一個可以傳遞給window.clearinIerval()從而取消對code的周期性執行的值。
    例如：
        方式1：函數名，      setInterval(show , 100);
        方式2：函數字元串， setInterval(""show() , 100);

window對象提供都是全局函數，調用函數時window可以省略。

window.setInterval()等效setInterval()

3.2 案例實現

步驟1：為輪播圖img標簽添加id屬性

<div style="width: 100%;">
       <img id="imgId" src="img/1.jpg" width="100%"/>
</div>

步驟2：編寫js代碼，頁面載入觸髮指定函數

<script type="text/javascript">
　　//載入成功啟動監聽器，5秒執行一次
　　window.onload = function(){
　　　　setInterval(changeImage , 2000)
　　　　}
　　　//在3張照片之間切換
　　　var num = 1;
　　　function changeImage(){
　　　　　　if(num >= 3){
　　　　　　　　　　num = 1;
　　　　　　　　}
　　　     var imageobj = document.getElementById("imgId");
　　　   　imageobj.src = "img/"+ num++ +".jpg"
　　　}

</script>

4. 案例：定時彈廣告

4.1 定時器：setTimeout

setTimeout()在指定的毫秒數後調用函數或執行代碼片段。

setTimeout(code,millisec)
       code 必需。要調用的函數或要執行的代碼字元串。
       millisec 必需。在執行代碼前需等待的毫秒數。

setInterval() 以指定周期執行函數或代碼片段。

clearInterval() 取消由setInterval()設置的timeout。

clearTimeout() 取消由setTimeout()方法設置的timeout。

4.2 JavaScript樣式獲得或修改

獲得或設置樣式

obj.style.屬性     獲得指定"屬性"的值。
obj.style.屬性=值    給指定的"屬性"設置內容。
如果屬性由多個單詞使用"-"連接，需要將"-"刪除，並將後一個單詞首字母大寫。
例如：background-color 需要改成 backgroundColor

實例：

<div id="divId" style="height: 100px;width: 100px;margin: 10px;padding: 20px;background-color: red;">小灰灰</div>
<script type="text/javascript">
            //1 獲得div對象
            var divObj = document.getElementById("divId");
            //2 獲得高度
            // divObj.style.height 數據為"100px"
            // 使用parseInt() , 將字元串"100px"轉換成數字"100"
            var height = window.parseInt(divObj.style.height);
            //3 將原始高度翻倍，再設置給div。
            divObj.style.height = height * 2 + "px";
</script>

 

4.3 案例實現

步驟1：在頁面中，添加廣告位div，並設置頁面載入事件

<body onload="init()">
        <!-- 整體的DIV -->
        <div>
            <!-- 定時彈出廣告的div -->
            <div id="divAd" style="width: 99%;display: none;">
                <img src="img/1.jpg" width="100%"/>
            </div>
        </div>
    </body>

步驟2：編程JS實現

<!-- 在html頁面中引入js文件 -->
       <script src="js/ad.js">
           
       </script>

ad.js代碼

var time;
function init(){
    //設置定時操作
    time = setInterval("showAd()",5000);
}

function showAd(){
    //獲得div元素
    var divAd = document.getElementById("divAd");
    divAd.style.display = "block";
    //清除之前的定時操作
    clearInterval(time);
    //重新設置一個定時：5秒鐘隱藏
    time = setInterval("hideAd()",5000);
}

function hideAd(){
    //獲得div元素
    var divAd = document.getElementById("divAd");
    divAd.style.display = "none";
    clearInterval(time);
}

5. BOM（Browse Object Mode）

5.1 Browse 對象

DOM Window

DOM Navigator

DOM Screen

DOM History

DOM Location

5.2 BOM:Window對象

方法：定時器

setInterval()：按照指定的周期(以毫秒計)來調用函數或計算表達式。

clearInterval()：取消由setInterval() 設置的timeout。

setTimeout()：在指定的毫秒數後調用函數或計算表達式。

clearTimeout()：取消由setTimeout() 方法設置的timeou。

方法：消息框

alert():顯示帶有一段消息和一個確認按鈕的警告框。

confirm()：顯示帶有一段消息以及確認按鈕和取消按鈕的確認框。

prompt()：xian's可提示用戶輸入的提示框。

Window尺寸

1) IE9 (含，及以上)，Chrome、 Firefox 等其他瀏覽器獲得方式
       windowinnerHeight -瀏覽器視窗的內部高度

　　windowinnerWidth-瀏覽器視窗的內部寬度

2) Internet Explorer8、7、6、5

      document.documentElement.clientHeight

　  document.documentElement.clientWidth

　　或者
      document.body.clientHeight

      document. body.clientW idth

相容所有瀏覽器的JS實現方案：

var w=window.innerWidth
      || document.documentElement.clientWidth
　　　 || document.body.clientWidth;

var h=window.innerHeight
      || document.documentElement.clientHeight
　　　 || document.body.clientHeight;

5.3 BOM：Location對象

href屬性：設置或返回完整的URL。

hash：設置或返回從井號(#) 開始的URL (錨)。

host：設置或返回主機名和當前URL 的埠號。

hostname：設置或返回當前URL 的主機名。

href：設置或返回完整的URL。

pathname：設置或返回當前URL的路徑部分。

port：設置或返回當前URL 的埠號。

protocol：設置或返回當前URL的協議。

search：設置或返回從問號(?) 開始的URL (查詢部分)。

<script type="text/javascript">
　　function change () f
　　　　location.href = "http: / /www. ithe ima. com" ;
　　)
</script>

<input type="button"' value="5ft"onclick="change()"/>

5.4 BOM：History對象

go()方法：跳轉到指定頁面

go(-1)：載入前一個鏈接，等效back()

go(1)：載入後一個鏈接，等效forward()

 

back():載入history 列表中的前一個URL。

forward():載入history 列表中的下一個URL。

go():載入history 列表中的某個具體頁面。

6. JS操作HTML、事件

6.1 標簽體內容：innerHTML

innerHTML-HTML元素的內部文本

獲得：document.getElementById("divId").innerHTML
設置：document.getElementById("divId").innerHTML = "...."

6.2 獲得指定的id的值

提供函數val(objId)獲得指定id屬性對應元素value的值

/**
 * 獲得二指定元素value屬性的值
 * 例如：var loginName = val("loginnameId");
 */
function val (objId) f
    return document.getElementById(objId).value;
)

6.3 錯誤提示

當標簽沒有驗證通過時，給出提示信息。如果校驗通過隱藏錯誤提示信息

/**
 * 2.1 顯示錯誤提示信息 
 * 例如：showTip("loginnameIdMsg","用戶名不能為空");
 */
function showTip(errObjId, text ) {
        //獲得錯誤提示對象，並設置和顯示
        var showObj = document.getElementById(errObjId) ;
        showObj.innerHTML = text;
        showObj.style.display = "block" ;
}
/**
 * 2.2 顯示錯誤提示信息 
 */
function hideTip() (
        var showObj = document . getEl ementById (errObjId) ;
        showObj.innerHTML = "";
        showObj.style.display = "none";
}

6.4 獲得焦點

/**
 * 3 獲得焦點
 */
function focus (objId) {
        //指定標簽獲得焦點
        document。getElementById(objId).focus();
}

6.5 事件總結

常見事件：

onload：某個頁面或圖像被完成載入

onsubmit：提交按鈕被點擊

onclick：滑鼠點擊某個對象

ondblclick：滑鼠雙擊某個對象

onblur：元素失去焦點

onfocus：元素獲得焦點

onchange：用戶改變域的內容

onkeydown：某個鍵盤的鍵被按下

onkeypress：某個鍵盤的鍵被按下或按住

onkeyup：某個鍵盤的鍵被鬆開

onmousedown：某個滑鼠按鍵被按下

onmouseup：某個滑鼠按鍵被鬆開

onmouseover：滑鼠被移到某元素之上

onmouseout：滑鼠從某元素移開

onmousemove：滑鼠被移動

event屬性：

clientX：返回當事件被觸發時，滑鼠指針的水平坐標。

clientY：返回當事件被觸發時，滑鼠指針的垂直坐標。

keyCode：返回當事件被觸發時，鍵盤輸入ASCII碼。

event方法：

preventDefault()：阻止瀏覽器預設行為

stopPropagation()：阻止事件的傳播

阻止瀏覽器預設行為

<a href="http://www.baidu.com" onclick="one() ">百度</a><br/>
<a href="http://www.taobao.com" onclick=" return two() ">淘寶</a><br/>
<script type="text/javascript">
        function one () {
                alert("我之後，百度官網継銕彷向") ;
            }
        function two (event) {
                alert("我之後，淘寶不再坊向") ; 
                //方式1:
                //return false;
                //方式2：
                var event = event || window. event ;
                event.preventDefault () ;
            }
</ script>

阻止事件的傳播

<!-- 區域1 -->
<div id="e1" style-"width:200px ; height: 200px; background-color: #f00;">

      <div id="e2" style= "width: 100px ; height: 100px; background-color: #0f0;"></div>
</div>
<hr />

<!-- 區域2 -->

<div id="e3" style="width:200px ; height: 200px; background-color: #f00;">
      <div id="e4" style="width: 100px ; height: 100px; background-color: #0f0;"></div>
</div>

<script type-"text/javascript">

      var el = document.getElementById("e1");
      var e2 = document.getElementById("e2");
      var e3 = document.getElementById("e3");
      var e4 = document.getElementById("e4") ;
      //設置“區域1”事件
      el,onclick.function() {
          alert("e1") ;
      }

      e2,onclick.function() {
          alert("e2, 同時el也觸發");
      }
      //設置“區域2”事件
      e3.onclick = function() {
          alert ("e3");
      }
      e4.onclick = function (event) {
          alert("e4, e3不觸發");
          var event = event || window.event;
          event.stopPropagation();
      }
</script>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • opencv——常見的操作
    一 圖像閾值處理 準備一張灰度圖像 閾值處理通常是設定一個閾值，讓圖片的所有像素點的值與其比較做出一系列的操作。 在opencv常用的閾值處理函數有五種，分別是THRESH_BINARY、THRESH_BINARY_INV、THRESH_TRUNC、THRESH_TOZERO、THRESH_TOZE ...
  • 分享Python知識的第三天
    python第一節 1.變數 變數，是用於在記憶體中存放程式數據的容器 電腦的核心為“計算”，計算便需要數據源，數據源要存在記憶體中方便使用，這時就要用到變數，比如把某人嗎名字，年齡等信息存在記憶體中，就需要設置“變數名=值”，例如 之後需要取用的時候，直接調用變數名 1.1變數的定義規則 1. 變數名 ...
  • Thymeleaf常用語法：條件判斷 if、switch case
    if語句 條件判斷使用th:if，它會判斷表達式是否成立，表達式的結果支持boolean、number、character、String及其他類型。 滿足下麵情況下，if語句成立： (1) 表達式的結果是數字且不是0 (2) 表達式的結果是字元串且不是false、off、no、0 (3) ... ...
  • python-day02
    占位符 %s 字元串 %d 整型 %f 浮點型 判斷變數名是不是數字 if 變數名.isdigit(): for...else 和 while...else 當for迴圈與while迴圈正常退出時，則執行else里的語句，非正常退出時（比如break）,則不執行else里的語句 列表 格式 列表名 ...
  • Java之路---Day03
    2019-10-17-21:18:33 方法 定義格式: public static void 方法名稱() { 方法體 } 完整格式： 修飾符 返回值類型 方法名稱（參數類型 參數名稱，...）{ 方法體 return 返回值; } 修飾符：現階段的固定寫法，public. static 返回值類 ...
  • [PHP] PHP-FPM的access日誌error日誌和slow日誌
    PHP-FPM的錯誤日誌建議打開，這樣可以看到PHP的錯誤信息：一般是這個配置路徑 /etc/php/7.3/fpm/pool.d/www.conf，日誌目錄如果需要自己建立PHP目錄，一定要把許可權賦給www-data用戶，否則沒有創建目錄的許可權，就無法記錄日誌chown www-data:www- ...
  • Java描述設計模式(14)：解釋器模式
    本文源碼： "GitHub·點這裡" || "GitEE·點這裡" 一、解釋器模式 1、基礎概念 解釋器模式是對象的行為模式。給定一個語言之後，解釋器模式可以定義出其文法的一種表示，並同時提供一個解釋器。客戶端可以使用這個解釋器來解釋這個語言中的表達式。 2、模式圖解 3、核心角色 (1)、抽象表達 ...
  • 圖像處理_Image
    1. 安裝 輸入 pip install PIL報錯： ERROR: Could not find a version that satisfies the requirement PIL (from versions: none) ERROR: No matching distribution f ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類