web前端——javaScript

目錄

一、javaScript概述

1.javaScript歷史

2.JavaScript與html,css關系

二、基本語法

①放在head中?

②放在 body中??

③寫在外部的.js文件中

1.變量

2.數據類型

3.算術運算符?

4.邏輯運算符

5.賦值運算?

6.邏輯運算符?

7.條件運算符

8.控制語句?

三、函數

1.函數定義的基本語法

2.函數調用

3.全局函數

四、內置對象

1.String字符串

2.Array數組

3.Date

4.Math?

五、事件

六、Html DOM對象

1.Html DOM概述

?2.查找元素

?3.改變HTML

?4.改變CSS

七、計時

一、javaScript概述

1.javaScript歷史

● JavaScript是由Netscape公司（美國網景公司）開發的一種腳本語言。

● Netscape公司將這種腳本語言命名為LiveScript，與java一樣,也是面向對象的語言,而且無需編譯，可由瀏覽器直接解釋運行。

● Netscape公司見LiveScript大有發展前途，而SUN公司( java)也覺得可以利用Livescript為Java的普及做鋪墊，于是兩家簽訂協議，將LiveScript改為JavaScript

● JavaScript一種直譯式腳本語言，用來為網頁添加各式各樣的動態功能 （javaScript可以操作網頁內容），不需要編譯可直接通過瀏覽器解釋運行，通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

2.JavaScript與html,css關系

JavaScript是一種基于對象和事件驅動并具有安全性的解釋性語言，其目的就是增強Web客戶交互，彌補了HTML的缺陷

二、基本語法

腳本寫在哪里？

javaScript腳本寫在一組<script>標簽中，此標簽可以放在head中或body中，一般習慣放在 head中，還可以將腳本寫在外部的.js文件中，在html頁面中導入外部的.js文件

● 第一個JavaScript程序 
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/index.js"></script><script>//調用對話框庫函數//alert("大家好 我是js!"); alert("hello js!")</script></head><body></body>
</html>
● 對話框
alert(‘welcome!’); 提示對話框

?①放在head中?

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>alert("hello js!")</script></head><body></body>
</html>

②放在 body中??

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script src="js/index.js"></script></body>
</html>

③寫在外部的.js文件中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/index.js"></script></head><body></body>
</html>

1.變量

● 聲明變量用var關鍵字? 例如 var name;

● 聲明變量的同時對其賦值? ?var test=“THIS IS A BOOK”

2.數據類型

javaScript支持的數據類型

● ①數值型(number)： 其中包括整型數和浮點型數。

● ②布爾型(boolean)： 即邏輯值，true或flase。

● ③字符串型： 由單個或多個文本字符組成。字符串是用單引號或雙引號來說明的。（使用單引號來輸入包含引號的字符串）

● ④undefined類型

● ⑤Object類型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 數據類型 *///1.數值類型（包含整數和浮點數）var a = 10;var b = 10.5; /* alert(typeof(b));number  typeof(b)返回變量的數據類型 *///2.布爾類型var c = true;var d = false;/* alert(a==b); *///3.字符串，單引號和雙引號都表示字符串var e = "abcd";var f = 'abcd';/* alert(typeof(e));alert(typeof(f)); *///4.undefined 聲明了變量，卻沒有var g;alert(g==undefined);//對象類型var date = new Date();/* alert(date.getFullYear());alert(date.getMonth()+1);date.getDate(); */</script></head><body></body>
</html>

3.算術運算符?

+：可以進行“加法”與“連接”運算，如果2個運算符中的一個是字符串，javascript就將另一個轉換成字符串，然后將2個運算數連接起來

-："字符串"-數值=數值，如果2個運算符中的一個是字符串，會把表達式中的數字字符串嘗試類型轉換，如果字符串不能轉換為數值 ，返回NaN

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 算術運算符 + - * / % ++ --+ 加法運算 字符串運算*/var a = "10";var b = 5;var c = 10;var d = "a";//alert(a+b);//字符串連接 105//alert(b+c);//加法 15/* alert(c-b);//5 減法alert(a-b);//5 "字符串"-數值=數值  會把表達式中的數字字符串嘗試類型轉換alert(c-d);//NaN not a number 如果字符串不能轉換為數值 返回NaN */// alert(a*b);//50// alert(a*d);//NaN</script></head><body></body>
</html>

4.邏輯運算符

邏輯運算符用于測定變量或值之間的邏輯，給定 x=6 以及 y=3 ，下表解釋了邏輯運算符： 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = "10";var b = 5;var c = 10;var d = "a";// alert(a==c);//只比較值是否相等// alert(a===c);//全等（值和類型）</script></head><body></body>
</html>

5.賦值運算?

6.邏輯運算符?

邏輯運算符用于測定變量或值之間的邏輯，給定 x=6 以及 y=3 ，下表解釋了邏輯運算符：

7.條件運算符

JavaScript 還包含了基于某些條件對變量進行賦值的條件運算符
語法：
var result = (條件表達式)?結果1:結果2
當條件成立返回?后的內容，否則返回:后的內容

8.控制語句?

第一種是選擇結構
● 單一選擇結構（if）
● 二路選擇結構（if/else）
● 多路選擇結構（switch）
第二種類型的程序控制結構是循環結構
● 由計數器控制的循環（for）
● 在循環的開頭測試表達式（while）
● 在循環的末尾測試表達式（do/while）
● break continue 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = "10";var b = 5;var c = 10;var d = "a";if(c>b){alert(c);} for (var i = 0;i < 5;i++){alert(i);}</script></head><body></body>
</html>

三、函數

1.函數定義的基本語法

function functionName([arguments]){
javascript statements
[return expression]
}
function: 表示函數定義的關鍵字
functionName:表示函數名
arguments:表示傳遞給函數的參數列表，各個參數之間用逗號隔開，可以為空
statements: 表示實現函數功能的函數體
return expression:表示函數將返回expression的值，同樣是可選的的語句

2.函數調用

由函數來調用
<script type= "text/javascript">
function fun(){
? alert(“test”);
}
fun();//函數名調用
function fun2(){
fun();//在其他函數中調用
}
</script>

3.全局函數

? parseInt(arg) 把括號內的內容轉換成整數之后的值。如果括號內是字符串， 則字符串開頭的數字部分被轉換成整數，如果以字母開頭，則返回 “NaN”?
? parseFloat(arg) 把括號內的字符串轉換成浮點數之后的值，字符串開頭的數字部分被轉換成浮點數，如果以字母開頭，則返回“NaN”?
? typeof (arg)返回arg值的數據類型
? eval(arg) 可運算某個字符串 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//①無參構造方法/*function test(){alert("你好");} *///②有參構造方法/* function test(a,b,c){alert(a+":"+b+":"+"c");}*///有返回值/* function test(a,b){return a+b;}*///函數調用/*  test(); test(true,"abc",new Date()); var c = test(10,23);alert(c); *///系統中的全局函數 在系統已經定義好了，直接調用的函數//alert(輸出內容); 彈窗顯示var a = 10.5;var b = "10.5";var c = 5;alert(parseInt(a));//把浮點數轉為整數alert(parseInt(b)+c);//把字符串更換轉換成整數, 如果轉換的內容是字符串,字母不能開頭, 只將開頭的數字部分轉換alert(parseFloat(c));alert(parseFloat(b));	alert(typeof(a));alert(typeof(b)); //typeof(變量)  獲取變量的數據類型var s = "2+3*2"; var s = 2+3*2;var s = "alert(a)";eval(s);//把傳入進來的字符串可以當做js腳本執行		</script></head><body></body>
</html>

四、內置對象

1.String字符串

●屬性
length 用法：返回該字符串的長度
●方法
charAt(n) ：返回該字符串位于第 n 位的單個字符
indexOf(char) ：返回指定 char 首次出現的位置
lastIndexOf(char) ：跟 indexOf() 相似，不過是從后邊開始找
substring(start,end) ：返回原字符串的子字符串，該字符串是原字符串從 start 位置到end 位置的前一位置的一段 .
substr(start,length) ：返回原字符串的子字符串，該字符串是原字符串從 start 位置開始，長度為length 的一段
split( 分隔符字符 ) ：返回一個數組，該數組是從字符串對象中分離開來的， < 分隔符字符> 決定了分離的地方，它本身不會包含在所返回的數組中
例如：'1&2&345&678'.split('&')返回數組：1,2,345,678

2.Array數組

數組的定義方法：
? var <數組名> = new Array();
這樣就定義了一個空數組，以后要添加數組元素，就用：
? <數組名>[下標] = 值;
如果想在定義數組的時候直接初始化數據，請用：
? var <數組名> = new Array(<元素1>, <元素2>, <元素3>...);
還可以
? var <數組名> = [<元素1>, <元素2>, <元素3>...];
●屬性
length ：數組的長度，即數組里有多少個元素
●方法
join(<分隔符>) ： 返回一個字符串，該字符串把數組中的各個元素串起來，用 < 分隔符> 置于元素與元素之間
reverse()： 使數組中的元素順序反過來。如果對數組 [1, 2, 3] 使用這個方法，它將使數組變成：[3, 2, 1]
sort() ： 使數組中的元素按照一定的順序排列。如果不指定 < 方法函數 > ，則按字母順序排列
對數字排序需要調用排序函數
function sortNumber(a,b){
? return a - b;
}

?3.Date

● 獲取日期

new Date() 返回當日的日期和時間
getFullYear() 返回四位數字年份
getDate() 返回一個月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 對象的小時 (0 ~ 23)
getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)
getSeconds() 返回 Date 對象的秒數 (0 ~ 59))

4.Math?

● Math 對象，提供對數據的數學計算

● 屬性

PI 返回π（3.1415926535...)

● 方法?

Math.abs(x) 絕對值計算；
Math.pow(x,y) 數的冪；x的y次冪
Math.sqrt(x) 計算平方根；
Math.ceil(x) 對一個數進行上舍入
Math.floor(x) 對一個數進行下舍入。
Math.round(x) 把一個數四舍五入為最接近的整數
Math.random() 返回 0 ~ 1 之間的隨機數
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值?

五、事件

● 一些常用的事件

onclick()鼠標點擊時；
onblur()標簽失去焦點;
onfocus()標簽獲得焦點;
onmouseover()鼠標被移到某標簽之上;
onmouseout鼠標從某標簽移開;
onload()是在網頁加載完畢后觸發相應的的事件處理程序;
onchange()是指當前標簽失去焦點并且標簽的內容發生改變時觸發事件處理程序。

六、Html DOM對象

1.Html DOM概述

● DOM是Document Object Model文檔對象（網頁中的標簽）模型的縮寫
● 通過html dom，可用javaScript操作html文檔的所有標簽

?2.查找元素

● 通常，通過 JavaScript，您需要操作 HTML 標簽
● 為了做到這件事情，您必須首先找到該標簽
● 要操作，先得到
● 有四種方法來做這件事：
①通過 id 找到 HTML 標簽
document.getElementById(“id");
②通過標簽名找到 HTML 標簽
document.getElementsByTagName("p");
③通過類名找到 HTML 標簽
document.getElementsByClassName("p");
④通過name找到 HTML 標簽
document.getElementsByName(“name");

?3.改變HTML

● Html dom允許javaScript 改變html標簽的內容

? ? 改變 HTML 標簽的屬性
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
? 修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性
document.getElementById( “div”).innerHTML= new HTML??

?4.改變CSS

● html dom允許 javaScript改變html標簽的樣式
語法：
document.getElementById("id").style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

七、計時

● 通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行，我們稱之為計時事件
●? 方法
setTimeout(“函數”,”時間”)未來的某時執行代碼
clearTimeout()取消setTimeout()
setInterval(“函數”,”時間”)每隔指定時間重復調用
clearInterval()取消setInterval() 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function hello(){console.log("下午好");}/* var t = setTimeout("hello()",5000);//設定指定時間后調用指定的函數，只調用一次 */var t;function startTime(){t = setInterval("hello()",1000);}function stopTime(){/* clearTimeout(t);//取消定時器 */clearInterval(t);}</script></head><body><input type="button" value="開始" onclick="startTime()"/><input type="button" value="停止" onclick="stopTime()"/></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/35879.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/35879.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/35879.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

智能掃地機器人環境感知與地圖構建優化方案

智能掃地機器人環境感知與地圖構建優化方案

以下是一個針對智能掃地機器人程序中環境感知與地圖構建問題的具體解決方案&#xff0c;參考了之前文章中的相關技術和信息&#xff1a; 智能掃地機器人環境感知與地圖構建優化方案 一、引入高精度傳感器 激光雷達&#xff08;LiDAR&#xff09;&#xff1a;使用高精度激光雷達…
閱讀更多...
模板語法輪播

模板語法輪播

1.常用的視圖容器組件 view類似于div進行使用 <div></div><view></view> scroll-view實現滾動列表效果 <scroll-view scroll-y> <view></view> <view></view> <view></view> </scroll-view> …
閱讀更多...
數據庫死鎖解決

數據庫死鎖解決

一、Oracle死鎖查看和解決辦法匯總 由于生產的tomcat 經常有假死問題&#xff0c;困擾很久&#xff0c;最后發現有死鎖&#xff0c;解決辦法分享 1.1、查看死鎖 1.1.1、用dba用戶執行以下語句 select username,lockwait,status,machine,program from v$session where sid in …
閱讀更多...
Arduino - 按鈕 - 長按短按

Arduino - 按鈕 - 長按短按

Arduino - Button - Long Press Short Press Arduino - 按鈕 - 長按短按 Arduino - Button - Long Press Short Press We will learn: 我們將學習&#xff1a; How to detect the button’s short press 如何檢測按鈕的短按How to detect the button’s long press 如何檢測…
閱讀更多...
重大進展！微信支付收款碼全場景接入銀聯網絡

重大進展！微信支付收款碼全場景接入銀聯網絡

據中國銀聯6月19日消息&#xff0c;近日&#xff0c;銀聯網絡迎來微信支付收款碼場景的全面接入&#xff0c;推動條碼支付互聯互通取得新進展&#xff0c;為境內外廣大消費者提供更多支付選擇、更好支付體驗。 2024年6月&#xff0c;伴隨微信支付經營收款碼的開放&#xff0c;微…
閱讀更多...
Docker部署Nginx+Keepalived

Docker部署Nginx+Keepalived

# 創建掛載路徑 mkdir /data/nginx_keep/nginx/conf -p mkdir /data/nginx_keep/keepalived/vim nginx.conf user nginx; worker_processes auto;error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid;events {worker_connections 1024; }http {incl…
閱讀更多...
Rust: duckdb和polars讀csv文件比較

Rust: duckdb和polars讀csv文件比較

一、文件準備 樣本內容&#xff0c;N行9列的csv標準格式&#xff0c;有字符串&#xff0c;有浮點數&#xff0c;有整型。 有兩個csv文件&#xff0c;一個大約是2.1萬行&#xff1b;一個是64萬行。 二、toml文件 [package] name "my_duckdb" version "0.1.0&…
閱讀更多...
opencv簡單小項目

opencv簡單小項目

OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一個開源的計算機視覺和機器學習軟件庫&#xff0c;它提供了大量的圖像和視頻處理功能。使用OpenCV可以開發各種簡單的小項目&#xff0c;例如&#xff1a; 圖像基本操作&#xff1a; 讀取和顯示圖像。調整…
閱讀更多...
弱監督學習

弱監督學習

弱監督學習&#xff08;Weak Supervision&#xff09;是一種利用不完全、不精確或噪聲數據進行模型訓練的方法。以下是一些常用的弱監督方法及其原理&#xff1a; 1. 數據增強&#xff08;Data Augmentation&#xff09; 原理&#xff1a; 數據增強是一種通過增加訓練數據的多…
閱讀更多...
區塊鏈的歷史和發展：從比特幣到以太坊

區塊鏈的歷史和發展：從比特幣到以太坊

想象一下&#xff0c;你住在一個小鎮上&#xff0c;每個人都有一個大賬本&#xff0c;記錄著所有的交易。這個賬本很神奇&#xff0c;每當有人買賣東西&#xff0c;大家都會在自己的賬本上記一筆&#xff0c;確保每個人的賬本都是一致的。這就是區塊鏈的基本思想。而區塊鏈的故…
閱讀更多...
HG/T 5838-2021金屬骨架發泡橡膠復合密封板檢測

HG/T 5838-2021金屬骨架發泡橡膠復合密封板檢測

金屬骨架發泡橡膠復合密封板是指工作溫度范圍-40&#xff5e;140℃&#xff0c;峰值溫度為150℃條件下使用的金屬骨架發泡密封板。 HG/T 5838-2021金屬骨架發泡橡膠復合密封板檢測項目&#xff1a; 測試項目 測試標準 外觀 HG/T 5838 厚度 HG/T 5838 壓縮性能 GB/T 206…
閱讀更多...
VSCode安裝OpenImageDebugger

VSCode安裝OpenImageDebugger

VSCode安裝OpenImageDebugger 1. 官網2. 編譯2.1 依賴項2.2 編譯 OpenImageDebugger2.3 配置 GDB 和 LLDB 3. 驗證安裝是否成功 1. 官網 下載路徑&#xff1a;OpenImageDebugger 2. 編譯 2.1 依賴項 官網上描述&#xff0c; Qt 5.15.1Python 3.10.12 這兩個其實配置并不需…
閱讀更多...
【好物推薦】給大家安利一個liux運維全能腳本工具箱

【好物推薦】給大家安利一個liux運維全能腳本工具箱

前幾天在開源社區沖浪的時候無意間逛到一個部署帖&#xff0c;里面提到了一個腳本&#xff0c;讓我眼前一亮。 科技Lion的Shell腳本&#xff01;大家趕緊去體驗學習一下&#xff0c;感覺寫的還是不錯的。 該工具是一款全能腳本工具箱&#xff0c;使用shell腳本編寫。專為Linux服…
閱讀更多...
Jenkins多stage共享同一變量方式

Jenkins多stage共享同一變量方式

在第一個stage中為這個變量賦值&#xff0c;在其它stage中使用這個變量 import java.nio.file.Files import java.nio.file.Path import java.nio.file.Paths import java.nio.file.StandardCopyOption import groovy.json.JsonOutput import groovy.json.JsonSlurper// 共享的…
閱讀更多...
圖解HTTP筆記整理（前六章）

圖解HTTP筆記整理（前六章）

圖解HTTP 第一章 web使用HTTP &#xff08;HyperText Transfer Protocol&#xff0c;超文本傳輸協議&#xff09;協議作文規范&#xff0c;完成從客戶端到服務器端等一系列運作流程。 協議&#xff1a;計算機與網絡設備要相互通信&#xff0c;雙方就必須基于相同的方法。比如…
閱讀更多...
【論文閱讀】--Popup-Plots: Warping Temporal Data Visualization

【論文閱讀】--Popup-Plots: Warping Temporal Data Visualization

彈出圖&#xff1a;扭曲時態數據可視化 摘要1 引言2 相關工作3 彈出圖3.1 橢球模型3.1.1 水平軌跡3.1.2 垂直軌跡3.1.3 組合軌跡 3.2 視覺映射與交互 4 實施5 結果6 評估7 討論8 結論和未來工作致謝參考文獻 期刊: IEEE Trans. Vis. Comput. Graph.&#xff08;發表日期: 2019&…
閱讀更多...
【TS】Typescript 中，什么是函數重載

【TS】Typescript 中，什么是函數重載

在JavaScript中&#xff0c;傳統上并沒有直接支持函數重載&#xff08;Function Overloading&#xff09;的概念&#xff0c;這是許多其他面向對象編程語言&#xff08;如Java、C#、C等&#xff09;的一個特性。函數重載意味著可以使用相同的函數名但不同的參數列表&#xff08…
閱讀更多...
1.3.數據的表示

1.3.數據的表示

定點數 原碼 最高位是符號位&#xff0c;0表示正號&#xff0c;1表示負號&#xff0c;其余的n-1位表示數值的絕對值。 數值0的原碼表示有兩種形式&#xff1a; [0]原0 0000000 [-0]原1 0000000 例&#xff1a;1010 最高位為1表示這是一個負數&#xff0c; 其它三位 010…
閱讀更多...
HQChart使用教程30-K線圖如何對接第3方數據41-分鐘K線疊加股票增量更新

HQChart使用教程30-K線圖如何對接第3方數據41-分鐘K線疊加股票增量更新

HQChart使用教程30-K線圖如何對接第3方數據40-日K疊加股票增量更新 疊加股票疊加分鐘K線更新Request 字段說明Data.symbol 協議截圖返回json數據結構overlaydata HQChart代碼地址交流 疊加股票 示例地址:https://jones2000.github.io/HQChart/webhqchart.demo/samples/kline_i…
閱讀更多...
可以一鍵生成熱點營銷視頻的工具，建議收藏

可以一鍵生成熱點營銷視頻的工具，建議收藏

在當今的商業環境中&#xff0c;熱點營銷已經成為了一種非常重要的營銷策略。那么&#xff0c;什么是熱點營銷呢&#xff1f;又怎么做熱點營銷視頻呢&#xff1f; 最近高考成績慢慢公布了&#xff0c;領導讓結合“高考成績公布”這個熱點&#xff0c;做一個關于企業或產品的營銷…
閱讀更多...
最新文章

Copyright @ 2022~2023