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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類