javaWeb核心技術第三篇之JavaScript第一篇

来源:https://www.cnblogs.com/haizai/archive/2019/08/11/11335825.html
-Advertisement-
Play Games

- 概述 - JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言 - 作用:給頁面添加動態效果,校驗用戶信息等. - 入門案例 - js和html的整合 - 方式1:內聯式 "通過<script></script>標簽實現,在標簽體中編寫js代碼即可" - 方式2:外聯式... ...


- 概述
  - JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言
  - 作用:給頁面添加動態效果,校驗用戶信息等.
- 入門案例
  - js和html的整合
    - 方式1:內聯式
      "通過<script></script>標簽實現,在標簽體中編寫js代碼即可"
    - 方式2:外聯式
      "編寫外部的js文件,通過srcipt標簽的src屬性引入即可"
    - 註意事項:
      "     script標簽可以放在頁面的任何位置,一般放在head中
            一個頁面可以有多個srcipt標簽
            script標簽一旦使用了src屬性,它的標簽體就會失效"
- 組成部分
  - ECMAScript:核心語法
    - 變數聲明
      - 格式:  var 變數名稱 = 初始化賦值;
      - 註意事項:
        - var可以省略,但是不建議省略
        - 末尾的分號也可以省略,但是不建議
    - 數據類型
      - 原始類型(5種)
        - Undefined:undefined
        - Null:null
        - Number:一切數字
        - String:一切被引號引起來的字元串
        - Boolean: true 或 false
        - 運算符typeof
          "用來判斷給定值的數據的所屬類型  例如: typeof age;"
      - 引用類型:javaScript第二天內容
    - 運算符
      - 等性運算符
        - ==   !=
          "判斷數值"
        - ===    !==
          "判斷數值和類型"
      - 關係運算符
        - >  <  >=  <=
      - 邏輯運算符
        - &&  ||   !
        - 非空對象 非0數字 非空字元串 都為true 其他為false
    - 語句
      "幾乎和java一樣"
      - if  ...   else  ...
      - for(){}方式
    - 函數
      "用來完成指定操作的代碼片段,在java中叫方法,在js中叫函數"
      - 方式1: 普通函數
        " function 函數名稱(參數列表){
             ... 
        }"
      - 方式2(匿名函數): 
        "var 函數名稱 = function(參數列表){
            ...
        }"
      - 函數返回值:在函數中直接使用return返回結果即可
      - 註意事項:參數列表中的參數可以不寫類型
    - 事件
      "具體的某件事情"
      - 單擊事件: onclick
        "單擊滑鼠時觸發"
      - 表單提交事件: onsubmit
        "提交form表單時觸發"
      - 頁面載入成功事件: onload
        "當頁面載入完畢後觸發"
    - 事件和事件源的綁定
      - 方式1:綁定事件
        " 實現方式:通過標簽的事件屬性 
         例如:<xxx onclick="函數名(參數列表)"></xxx>"
      - 方式2:派發事件
        "    實現方式:獲取標簽對象(元素)
                    對象.事件名稱=function(){}"
      - 使用步驟:
        - 1.確定事件
        - 2.編寫函數
          - 獲取元素
          - 處理元素
  - BOM(瀏覽器對象模型):操作瀏覽器
    - window 視窗
      - 常用屬性
        "通過它獲取其他的四個對象
        eg:window.history  == history
        註意:使用window的對象或屬性時,window可以省略不寫"
      - 常用方法
        - 定時器
          - var 定時器id = setInterval()  設置周期執行定時器
            - 格式1:setInterval(函數名稱,毫秒值);
              "周期執行,每隔多少毫秒執行一次指定函數"
              - 註意:每個定時器都會返回一個定時器id,定時器id主要用在清除定時器時.
            - 格式2:setInterval("函數名稱(參數列表)",毫秒值);
              - "周期執行,每隔多少毫秒執行一次指定函數 可傳遞參數"
          - clearInterval() 清除周期執行定時器
            - 使用方式:clearInterval(定時器id)
              "作用:將正在使用的定時器清除"
          - setTimeout()  單次執行定時器
            - 格式1:setTimeout(函數名稱,毫秒值);
              "單次執行,多少毫秒後執行指定函數,只執行一次"
            - 格式2:setTimeout("函數名稱(參數列表)",毫秒值);
              "單次執行,多少毫秒後執行指定函數,只執行一次  可傳遞參數"
            - 註意:每個定時器都會返回一個定時器id,定時器id主要用在清除定時器時.
          - clearTimeout()
            - 使用方式:clearTimeout(定時器id)
        - 警告框
          - alert();
        - 對話框
          - prompt();
            "可以傳入兩個參數,第一個為提示信息,第二個為預設值"
        - 確認框
          - confirm();
            "可以傳入一個參數,為確認信息"
        - 擴展
          - 打開  open(url);
          - 關閉  colse();
    - history 歷史
      - 常用方法
        - forward();  下一個頁面
        - back();   返回上一個頁面
        - go(Number);   ★
          - go(number);   向後跳轉幾個頁面
          - go(-number);   向前跳轉幾個頁面
    - location 連接  ★★
      - 常用屬性
        - href
          - location.href;   得到當前頁面的路徑
          - location.href=url;  跳向指定的頁面
    - navigator 瞭解
    - screen 瞭解
  - DOM(文檔對象模型):操作文檔 (明天內容)
    - 獲取一個元素(標簽)對象
      - var obj = document.getElementById("id值");
        "通過id獲取一個標簽對象"
      - 獲取對象中的value值
        "通過對象的value屬性    對象.value;"

回顧:
    javaScript:直譯式的腳本語言,直接嵌入html使用即可
    js和html整合:
        方式1:內聯式
            通過script標簽實現,直接在標簽體中編寫js代碼即可
        方式2:外聯式(首先要編寫外部的js文件,尾碼名以*.js結尾)
            通過script標簽的src屬性實現
    js組成部分:
        ECMAScript:核心語法
            變數聲明
                var 變數名稱 = 初始化值;
            數據類型
                原始類型:(5種)
                    Undefined: undefined   var age;
                    Number:
                    String:
                    Null: null
                    Boolean:
                    
                    typeof 對象;
                引用類型:
            運算符
                等性運算符:
                    == !=
                    === !==
                關係運算符:
                    > < >= <=
                邏輯運算符:
                    && || !
                    
                    "abc" || false
                    "abc" || "123"
                    
                    "abc" && "123"
                    "abc" && false
            語句
                if("123"){}
                for(){}
            函數
                方式1:普通函數
                    function 函數名(){}
                方式2:匿名函數
                    var 函數名 = function (參數,參數){}
                調用函數:
                    函數名(參數,參數);
                返回值:
                    return 返回值;
            事件
                onclick:單擊事件
                onsubmit:表單提交事件
                onload:頁面載入成功事件
                
            事件和事件源綁定
                方式1:綁定事件
                    通過標簽的事件屬性
                    <xxx onclick = "func()"></xxx>
                方式2:派發事件
                    a.獲取事件源(獲取標簽對象)
                        var 對象 = document.getElementById("id");
                    b.給事件源派發事件
                        對象.事件名稱 = function(){
                            ....
                        }
        BOM:操作瀏覽器
            window:視窗
                屬性:
                    通過window獲取其他的四個對象即可.使用window的屬性或方法的時候window可以省略不寫
                方法:
                    定時器:
                        周期執行:
                            var interId = setInterval();
                                setInterval("函數名稱()",毫秒值);
                                setInterval(函數名稱,毫秒值);
                            clearInterval(id);
                        單次執行:    
                            var timeId = setTimeout();
                                
                            clearTimeout(id);
                    警告框:
                    對話框:
                    確認框:
                    打開和關閉:
            history:歷史
                方法:
                    forward();
                    back();
                    go(number);
            location:連接 ★★
                屬性:
                    href
                        location.href;
                        location.href = url;
        DOM:操作文檔
            var 對象 = document.getElementById("id");
            對象.屬性名稱; 獲取
            對象.屬性名稱 = 值; 設置
/////////////////////////////////
案例1-完善表單校驗
    需求分析:
        當表單提交的時候,校驗表單中的用戶名和密碼是否符合格式,如果不符合,則在相應的輸入框後面填寫提示信息且不允許表單提交,
        反之可以提交
    技術分析:
        事件
        正則表達式:
        DOM對象:
///////////////////////////
    DOM:
        操作value屬性
            獲取value屬性的值:
                獲取一個標簽對象:
                    var 標簽對象 = document.getElementById();
                獲取value屬性的值:
                    標簽對象.value;
            設置value屬性的值:
                獲取一個標簽對象:
                    var 標簽對象 = document.getElementById();
                設置value屬性的值
                    標簽對象.value = 值;
        操作標簽體:
            獲取標簽體內容:
                獲取一個標簽對象:
                    var 標簽對象 = document.getElementById();
                獲取標簽體的內容:
                    標簽對象.innerHTML;
            設置標簽體內容:
                獲取一個標簽對象:
                    var 標簽對象 = document.getElementById();
                設置標簽體的內容:
                    標簽對象.innerHTML = "<xxx>值</xxx>";
    正則表達式:
        1.編寫正則表達式
            用戶名：var zz = /^[a-z0-9_-]{3,16}$/;
            密碼：var zz = /^[a-z0-9_-]{6,18}$/;
            校驗為空: /^\s*$/
        2.校驗
            var str = "123";
            zz.test(str);        Boolean
///////////////////////
    步驟分析:
        1.確定事件(表單提交事件)
            <form onsubmit="retrun checkForm()"></form>
            <form id="formId"></form>
        2.編寫checkForm函數
            function checkForm(){
                //0/設置全局開關
                var flag = true;
                //a.獲取用戶名和密碼輸入框對象
                    var 對象 = document.getElementById("id");
                //b.獲取用戶名和密碼的值
                    var val = 對象.value;
                //c.編寫正則表達式
                    
                //d.校驗
                    if(zz.test(val)){
                        //校驗不通過
                        給對應的span標簽中填寫提示信息
                        flag = false;
                    }else{
                        //校驗通過
                        給對應的span標簽中填寫提示信息
                    }
                //e.返回值
                return flag;
                    
            }
        
案例2-表格各行換色
    需求分析:
        當頁面載入成功後,給表格的奇數行和偶數行添加不同的背景顏色
    技術分析:
        事件
        DOM:
    //////////////////////
        步驟分析:
            1.確定事件(頁面載入成功事件)
                onload = function(){
                    
                }
            2.編寫匿名函數
                a.獲取當前頁面所有行對象
                    var trObjArr = document.getElementsByTagName("tr");
                b.遍曆數組對象,給計數行和偶數行添加不同的背景顏色
                    for(var i=0;i<trObjArr.length;i++){
                        if(i%2==0){
                            trObjArr[i].style.backgroundColor = "顏色";
                        }else{
                            trObjArr[i].style.backgroundColor = "顏色";
                        }
                    }
        
案例3-覆選框全選和全不選
    需求分析:
        當點擊頭部的覆選框的時候,要使其他覆選框的狀態和頭部的保持一致.
    技術分析:
        單擊事件
        DOM
        操作元素的checked屬性
    /////////////////////////////
    步驟分析:
        1.確定事件(單擊事件)
            給頭部的覆選框添加單擊事件
        2.編寫函數
            a.獲取頭部覆選框狀態
                對象.checked;
            b.獲取其他的覆選框對象
            c.遍歷其他的覆選框對象數組,分別給每一個覆選框對象設置checked屬性
案例4-省市二級聯動
    需求分析:
        當省份的下拉選改變的時候,根據選中的省份查詢其所對應的市,將所對應的市,展示到市的下拉選中.
    技術分析:
        改變事件
        數組
        Dom操作
    /////////////////////
    步驟分析:
        1.確定事件(改變事件)
            給省份的下拉選添加改變事件
        2.編寫changePro函數
            function changePro(){
                a.獲取選中省份所對應的市數組(value)
                    var cityArr = arr[value];
                b.獲取市的下拉選對象
                    var cityObj = document.getElementById("cityId");
                
                c.遍歷市數組,將每一個市拼成option追加到市的下拉選中
                    cityObj.innerHTML += "";
                    
            }

 


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

-Advertisement-
Play Games
更多相關文章
  • MySql || 快速創建100w條記錄
    平時每個開發者都會討論數據量大時，sql的優化問題。但是並不是每個人都會有100w的數據量可以用來實戰，那麼今天我們就自己動手，模擬一個100w數據量的表。 創建原理 其實創建的方法有很多，有快的也有慢的。本博客中寫的當然不是最快的那個，但確實是比較好操作和理解的。那麼我先來說明一下它的原理：它是利 ...
  • Ubuntu安裝MySql5.7
    一、安裝與刪除 安裝 sudo apt-get update #更新源 sudo apt-get install mysql-server #安裝mysql 刪除 sudo apt-get autoremove mysql-\* --purge (彈出提示框，是否刪除數據（刪除後數據就沒了，註意備份 ...
  • FloatingActionButton動態更換背景色
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/186 FloatingActionButton 動態更換背景色 最近碰到了個需求場景，需要動態切換FloatingActionButton的背景色 先看下xm ...
  • 詳解JS與Jquery獲得的對象的區別與聯繫
    世上無難事只怕有心人，敲代碼也一樣只要你用心去搞懂一件事，即使一個小小的用法對你以後也會有很大的作用； 項目雖然趕得緊但是有些問題百度找完答案解決之後，也要自己梳理一遍做到心領神會！！！今天就直接來上周遇到的情況： 就是使用JS中的類似：documnet.getelementbyid('')方法與$ ...
  • JavaScript數組方法大全（第一篇）
    數組方法大全（第一篇） 註意：第一次寫博客有點小緊張，如有錯誤歡迎指出，如有雷同純屬巧合，本次總結參考書籍JavaScript權威指南，有興趣的小伙伴可以去翻閱一下哦 join()方法 該方法是將數組內的所有元素轉化為字元串並拼接在一起，最後返回生成的字元串。可以指定一個可選的字元串，來分隔數組得各 ...
  • HBuilderX使用Vant組件庫
    HBuilderX使用Vant組件庫 HBuilderX是一款由國人開發的開發工具，其官網稱其為輕如編輯器、強如IDE的合體版本。但是官方的社區中關於Vant組件的安裝大多都是針對微信小程式開發安裝Vant Weapp，鄙人嘗試了各種方法，經歷各種錯誤後終於成功安裝vant組件庫，在這裡分享一下使用 ...
  • manifest.json 解析--手機web app開發筆記（三-2)
    四、SDK配置和模塊許可權配置 SDK 就是 Software Development Kit 的縮寫，中文意思就是“軟體開發工具包”，也就是輔助開發某一類軟體的相關文檔、範例和工具的集合都可以叫做“SDK”。HbuilderX的SDK配置可視化界面中SDK有地圖、登錄鑒權、支付、推送、分享、語音識別 ...
  • javaWeb核心技術第四篇之Javascript第二篇事件和正則表達式
    - 事件 - 表單提交(掌握) "onsubmit" - 單擊事件(掌握) "onclick" - 頁面載入成功事件(掌握) "onload" - 焦點事件:(掌握) - 獲取焦點 "onfocus" - 失去焦點 "onblur" - 表單事件(瞭解) - ondblclick 雙擊事件 ... ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類