JavaScript 網頁腳本語言 由淺入深

来源:https://www.cnblogs.com/lsy131479/archive/2018/04/06/8728863.html
-Advertisement-
Play Games

1）基礎 學習目的： 1. 客戶端表單驗證 2. 頁面動態效果 3. jQuery的基礎 什麼是JavaScript？ 一種描述性語言，也是一種基於對象和事件驅動的，並具有安全性能的腳本語言 javaScript是一種基於對象和事件驅動的,並具有安全性能的腳本語言 解釋執行javaScript特點向 ...


1）基礎

學習目的：

1. 客戶端表單驗證

2. 頁面動態效果

3. jQuery的基礎

什麼是JavaScript？

一種描述性語言，也是一種基於對象和事件驅動的，並具有安全性能的腳本語言

 

 

javaScript是一種基於對象和事件驅動的,並具有安全性能的腳本語言 解釋執行
javaScript特點
向HTML頁面中添加交互行為
腳本語言,語法和java類似
解釋性語言,邊執行邊解釋
javascript的基本結構
語法
<script type="text/javascript">
<-----javascript語句------->
</script>
<script>....</script>可以包含在文檔的任何地方,只要保證這些代碼在被使用時已經讀取並載入到記憶體中即可

 

javaScript核心語法

 

核心語法 變數 數據類型  數組  運算符號  控制語句  註釋   輸入輸出 語法約定 

 

核心語法變數
var width  var-用於聲明變數的關鍵字
width=5   width-變數名
同時聲明和賦值變數
var catname="皮皮";
var x,y,z=10;
不聲明直接賦值(不建議使用)
width=5;

 

經驗:變數可以不經聲明而直接使用,但這種方法很容易出錯.也很難查找排錯不推薦使用

 


核心語法-數據類型
數據類型:
undefined
null(表示一個空值和undefined值相等)
numbre
boolean
string
屬性 字元串對象.length(長度)

 

數組(創建數組)
語法 var 數組名稱=new Array(size)
屬性 名稱 描述
length  設置返回數組中的元素書名

 


方法 join()把數組所有的元素放入一個字元串,通過一個的分隔符進行分隔
     sort()對數組進行排序
     push()向數組末尾添加一個或者更多元素,並返回新的長度

 


核心語法
類型   運算符
算數運算符       +-*/++--
賦值運算符  = += -=
比較運算符  > < >=< >= == != === !==
邏輯運算符  && || !

 

if條件語句
if(條件)
{
//代碼
}
else{
//代碼
}

 

switch(表達式){
case 常量 1:
 javaScript語句1;
  break
case 常量 2:
 javaScript語句2;
 break
....
default :
javaScript 語句3;

 

for(初始化;條件;增量)
{
javaScript代碼
}
white(條件)
{
javaScript代碼
}

 

單行註釋 //開始,已行末結束

 

多行註釋以/*開始,以*/結束,符號/*....*/

 

alert("提示信息")
prompt()
prompt("提示信息","輸入框的預設信息")
prompt("請輸入你喜歡的顏色","紅色")
prompt("請輸入你喜歡的顏色","")

 

Chrome開發人員工具
* 停止斷點
*單步調試不進入函數體內部
*單步調試,進入函數體內
* 跳出當前函數
*禁用所有斷點,不做任何調試
alert()方法

 

函數的含義:類似於java中的方法,是完成的任務代碼語句快
使用更簡單:不用定義屬於某個類,直接使用
函數分類:系統函數和自定義函數

 


parsint("字元串")
將字元串轉換為整數數字
parseFloat("字元串")
將字元串轉換為浮點數字
ISNAN()
用於檢查其參數是否是非數字

 

自定義函數
定義函數  (無參函數) (有參函數)
function 函數名 (參數1,參數2,參數3.....){
//javaScript語句
[return 返回值]---可有可無

 

調用函數
函數調用一般和表單元素事件一起使用,調用格式
事件名="函數名()"
onload 一個頁面或者一幅圖像完成載入
onlick 滑鼠單擊某個對象
onmouseover 滑鼠指導移到某元素上
onkeydown 某個鍵盤按鍵被按下
onchange 域的內容被改變
}

 


為什麼要學習JavaScript
表單校驗
特效

 

瀏覽器內核
Chrome  webkit
Firefox  trident
IE
獵豹
搜狗
UC

 

 2）操作BOM

BOM:瀏覽器對象模型(Browser Object Model)
bom提供了獨立於內容的,可以與瀏覽器視窗進行互動的對象結構

BOM可以實現的功能
彈出新的瀏覽器視窗
移動關閉瀏覽器視窗以及調整視窗的大小
頁面的前進和後退

Windows對象的常用屬性
屬相名稱   說明
histroy   有關客戶訪問過的URL的信息
location  有關當前的URL的信息

語法: Window.屬性名="屬性值";
示例:Window.location="http://www.bdqn.cn"
常用的方法
方法名稱   說明
prompt()  顯示可以提供用戶輸入的對話框
alert()   顯示帶有一個提示信息和一個確定按鈕的警示款
confirm()  顯示一個帶有提示信息,確定和取消按鈕的對話框
close()   關閉瀏覽器視窗
open()   打開一個新的瀏覽器視窗,載入給定URL所指定的文檔
setTimeout()  在指定的毫秒後調用函數或計算表達式
setinterval()  按照指定的周期(以毫秒計)來調用函數或者表達式

confirm():將彈出一個確認對話框
confirm("對話款中顯示的純文本")

open()方法
window.open("彈出視窗的URL","視窗名稱","視窗特征")

history對象
常用方法
名稱   說明
back()     載入history對象列表的前一個URL
forward()   載入history對象列表中的下一個URL
go()  載入history 對象列表的某一個具體的URL
location對象
常用屬性   說明
host   設置或返回主機名和當前URL的埠號
hostname  設置或返回當前的URL的主機名
href   設置或返回完整的URL
常用方法
reload()  重新載入當前文檔
replace()  用新的文檔替換當前文檔

getElementByld() 返回對擁有指定id的第一個對象的引用

getEllementsByName 返回帶有指定名稱的對象的集合

getElementsByTagName() 返回帶有指定標簽名的對象的集合

write()   向文檔寫文本、HTML表達式或JavaScipt代碼

Array:用於在單獨的變數名存儲一系列的值

String: 用於支持對字元串的處理

Math:用於執行常用的數學任務,它包含了若幹個數字常量和函數


DATE:用於操作日期和時間
date對象

var 日期對象=new date(參數)
參數格式: MM DD YYYY HH :mm:ss
常用方法
方法   說明
getdate()  返回date對象的一個月中的每一天,其值介於1到31之間

getday()  返回date對象的星期中的每一天,其值介於0到6之間

getHours()  返回date對象的小時數,其介於0到23之間

getminutes()  返回date對象的分鐘數其值介於0到59之間

getseconds()  返回date對象的秒數,其值介於0到59之間

getMonth()  返回date對象的月份,其值介於0到11之間

getFullyear()  返回date對象的年份.其值為4位數

gettime()  返回自某一時刻(1970年1月1日)以來的毫秒數

math 對象
常用方法
ceil()  對數進行上舍入   Math.ceil(25.5);返回26    Math.ceil(-25.5);返回-25

floor()  對數進行下舍入   Math.floor(25.5);返回25   Math.floor(-25.5);返回-26

round()  把數四捨五入為最接近的數  MAth.round(25.5);放回26   Math.round(-25.5) 返回-26

random() 返回0到1之間的隨機數  Math.random();例如:0.6273608814137365

如何實現返回整數範圍為2到99之間的數
var inum=Math.floor(Math.random()*98+2)


定時函數
setTimeout()
setTimeout("調用的函數",等待的毫秒數)
實例:
var myTime=setTimeout("disptime",1000)

setinterval() 周期性
語法 setinterval("調用函數",間隔的毫秒數)

var myTime=setinterval("disptime",1000)

清除函數
clearTimeout()
語法
clearTimeout(setTimeOut()返回的ID值)

var myTime=setTimeout("disptime()"1000)
clearTimeout(myTime)

clearinterval()
clearlinterval(setinterval()返回的ID)

var myTime=setinterval("disptime()",1000)
clearinterval(myTime )


document **
屬性: referrer 返回的是上一個頁面的URL

3）操作DOM

DOM:Document Object Model(文檔對象模型)

節點屬性   描述
parentNode  返回節點的父節點

childNodes  返回子節點的集合,childNodes[i];

firstChild  返回節點的第一個子節點,最普遍的用法是訪問該元素的文本節點

lastChild  返回節點的最後一個子節點

nextSibling  下一個節點

previousSibling  上一個節點

element屬性
屬性名稱    描述
firstRlrmentChild  返回節點的第一個子節點,最普遍的做法是訪問該元素的文本節點

lastElementChild  返回節點的最後一個子節點

nextElenentSilbling  下一個節點

previousElementSibling  上一個節點

節點信息
nodeName:節點名稱
nodeValue:節點值
nodeType:節點類型

節點類型   NodeType值
元素element  1
屬性attr   2
文本text   3
註釋comments  8
文檔document  9


操作節點的屬性
getAttribute("屬性名")
setAttibute("屬性名","屬性值")

創建和插入節點
創建節點
名稱      描述
createElement(tagName)   創建一個標簽名為tagName的新元素節點
A.appendChild (B)   把B節點追加到A節點的末尾
insertBefore(A,B)   把A節點插入到B節點之間
cloneNode(deep)    複製到某個節點

刪除和替換節點
名稱       描述
removeChild(node)     刪除指定節點
replaceChild(newNode,oldNode)屬性attr  用其他的節點替換指定的節點


操作節點樣式
改變樣式的屬性
style 屬性
className屬性
HTML元素.style.樣式屬性="值"
示例
doucument.getElenmentByld("titles").style.color="#ff0000"


className屬性
語法 HTML元素.className="樣式名稱"


獲取元素的樣式
語法HTML元素.style.樣式屬性;
示例
alert(document.getElementByid("cartlist").style.display)
實際開發中使用
document.defaultVIEW.getComputerStyle(元素,null).屬性
HTML元素.currentStyle.樣式屬性---相容IE瀏覽器

JavaScript獲取元素位置

語法
document.documentElement.scrollTop;
document.documentElementt.scrollleft;   標準瀏覽器
或者
document.body.scrollTop
document.body.scrollleft;  谷歌瀏覽器

4）面向對象

對象 是包含相關屬性和方法的集合

什麼是面向對象
面象對象僅僅是一個概念或者編程思想
通過一種叫做原型的方式來實現面向對象的編程

創建對象

自定義對象
內置對象


自定義對象是基於object對象的方式創建對象
語法
var 對象名稱=new object();  通過 . 屬性和方法 
常見的內置對象
String (字元車) 對象
Date(日期) 對象
Array(數組) 對象
Boolean(邏輯) 對象
Math(算數) 對象
RegExp 對象  ------正則表達式對象

 

如何解決使用同一個介面不需要創建很多對象，減少產生大量重覆的代碼

** 構造函數

**原型對象

構造函數 是創建特定類型的對象   this變數  new操作符
構造函數始終都應該以一個大寫的字母開頭

調用構造函數的四個步驟
*創建一個新對象
*將構造函數的作用域給新對象(this就指向了這個新對象)
*執行構造函數中的代碼
*返回新對象

constructor屬性標識它的對象屬性

instanceof操作符檢測對象類型

原型對象
每個函數都有一個prototype屬性，這個屬性是一個指針，指向一個對象
prototype就是通過調用構造函數而創建的那個對象實例的原型對象


原型鏈 一個原型對象是一個原型對象的實例
相關的原型對象層層遞進，就構成了實例與原型的鏈條，就是原型鏈

搜索當前的實例

搜索第一個的prototype


對象繼承
創建子類對象時，不能向父類型的構造函數中傳遞參數
借用構造函數
apply([thisOjb[,argArray]])
應用某一個對象的一個方法，用另一個對象替換當前對象

call([thisObj[,arg[,arg2[,[argN]]]]])
調用一個對象的一個方法，以另一個對象替換當前對象
借用構造函數的一個大的優勢
可以在子類型構造函數中向父類型構造函數傳遞參數


組合繼承：有時候也叫做偽經典繼承
將原型鏈和借用構造函數的技術組合到一塊，發揮二者之長的一種繼承模式
使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承
搜索第二個的prototype 

 

 

 


             

 


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

-Advertisement-
Play Games
更多相關文章
  • 什麼是資料庫？什麼是關係資料庫？什麼是非關係型資料庫？
    本文內容： 什麼是資料庫 什麼是關係資料庫 什麼是非關係型資料庫 PS：雖然這些東西都是一些比較基礎常識的東西，但為了記錄自己的學習之路，也為了為以後的一些突發奇想留下“坑”，所以寫下了這篇博文。 首發日期：2018-04-07 什麼是資料庫？ 資料庫是數據的倉庫。 與普通的“數據倉庫”不同的是，數 ...
  • Oracle練習詳解
    --1.查詢emp表，顯示薪水大於2000，且工作類別是MANAGER的雇員信息 select * from emp where sal > 2000and job = 'MANAGER'; --2.查詢emp表，顯示年薪大於30000，工作類別不是MANAGER的雇員信息 select * fro ...
  • SQL刪除指定條件的重覆數據，只保留一條
    這裡使用了迴圈刪除，並不是最優的方法，歡迎園友不吝批評指正。 ...
  • 單用戶模式啟動SQL Server實例總結
    在SQL Server的資料庫維護過程中，有時候在一些特殊情況下需要在單用戶模式下啟動SQL Server實例。 下麵總結一下單用戶模式啟動SQL Server的幾種方式： 1：命令模式(sqlservr.exe)啟動 首先在命令視窗中切換到Binn目錄（這個要視SQL Server實際安裝路徑情況... ...
  • iOS手機流量抓包rvictl
    移動設備抓包主要方式 一、PC上設置網路共用，生成Wi Fi熱點供移動設備使用，PC上再使用tcpdump、Wireshark等捕獲分析； 二、PC上開啟http代理工具伺服器（如Charles、fiddler），移動設備再通過該HTTP代理上網（只能抓去HTTP/HTTPs）； 三、使用管道工具將 ...
  • 第一次製作和使用圖標字體-IcoMoon
    開題：之前就有所耳聞，最近兩天第一次運用到圖標字體。剛開始嘛，一臉懵逼的狀態。成功運用之後就來記錄一下使用過程咯！ 1. 打開線上生成工具：https://icomoon.io/app/#/select 2. 導入本地文件或者選擇圖標庫 （1） 如果你本地沒有.svg圖標，你可以選擇線上免費的圖標。 ...
  • node學習日誌（一）--Node.js設計核心理念
    Nodejs設計的核心理念：1.事件迴圈；2.模式；3.差錯處理；4.運用多處理器 ...
  • 小劉同學的第一百零四篇博文
    時間關係長話短說，今天把文章編輯和刪除功能實現了。 本來是要單獨做兩個按鈕來選擇列表中的所有朋友圈文章，但是老師想偷懶……所以我也就跟著偷懶了。 編輯文章部分，可以獲取每條朋友圈的標題和內容。 第一步編輯的時候要打開編輯框，改動之後再保存至資料庫。 測試刪除這條數據。 有一個刪除的提示，也是用的el ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類