當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
WBE前端笔记3：JavaScript练习--基础语法
生活随笔
收集整理的這篇文章主要介紹了
WBE前端笔记3：JavaScript练习--基础语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
插入Javascript腳本的三種方式
1.行間事件方式 以及 按鈕的onclink和alert
<body><input type="button" value="hello" onclick="window.alert('hello word!!!!!!!')"></input> </body>使用上述代碼即可實現點擊按鈕彈出窗口的效果
2.代碼塊的方式
<script type="text/javascript">window.alert("hello")</script>執行上述代碼，打開網頁就會顯示彈窗
3.外部文件的方式
創建js文件夾并在其中創建hello.js
在內部寫入代碼
然后在html中調用
<body><script type="text/javascript" src="js/hello.js"></script> </body>運行后結果為
4.函數
編寫如圖所示代碼
<body><input type="button" onclick="sayhello('wwwww')" /><script type="text/javascript">function hanshu(a,b){window.alert(a+"？"+b);}hanshu("abc",true);hanshu();hanshu(1);hanshu(1,2);hanshu(1,2,3);// 第二種聲明方式mysum=function(a,b){return a+b;}var res=mysum(10,20);window.alert(res);function sayhello(a){window.alert("hello!!!"+a);}</script></body>執行結果為：
全局變量與局部變量相較于java不同的地方
<script type="text/javascript">function sayhello(){p="asdadasd";}sayhello();window.alert(p);</script>調用結果為
在JavaScript中不使用var關鍵字進行聲明的變量，都為全局變量
js中的函數是不能重載的
函數若重名 后聲明的會覆蓋前面的
數據類型
number
NaN
在js腳本運行數學運算時，若結果不是數字，則會返回nan
例如
infinity
無窮大 在js中計算 100/0時變量中的值將為infinity
isNaN函數
isNaN會判斷傳入參數是否為數字
如果不是數字 返回true
是數字，返回flase
特殊的bool型的數據使用isNaN也會被判定為數字
number函數
number函數會將傳入的參數
<body><script>var i=Number("123456");window.alert(typeof(i));</script> </body>結果為：
parseInt函數
使用parseInt可以將其他數據類型暴力取整
<body><script>var i=Number("123456.999");window.alert(parseInt(i));</script> </body>或
<body><script>var i=Number("123456qwe");window.alert(parseInt(i));</script> </body>運行結果都是：
Math.ceil函數
此函數作用與parseInt類似 與之不同的是，此函數是向上取整
特殊
js中10/3不是3 而是3.3333333
Boolean類型
boolean只有ture和false兩個值
Boolean函數
此函數會將任意類型的數據轉換為Boolean類型
Boolean在js中會被隱式調用
下面兩種方式是等價的
string類型
常用屬性和方法
<body><script type="text/javascript">console.log("abcdef".length);//6console.log("qwerty".charAt(3))//rconsole.log("qwe".concat("rty"))//qwertyconsole.log("a=b&b=c".indexOf("="))//1console.log("a=b&b=c".lastIndexOf("="))//5console.log("1-1-501".replace("-",","))//1,1-501(只能替換第一個)var arr = "1-1-501".split("-");//拆分字符串 //不需要使用var[]for(var i=0;i<arr.length;i++){console.log(arr[i]);}console.log("abcdefg".substr(2))//cdefgconsole.log("abcdefg".substring(2))//cdefg//在參數為兩個時//substr為（start，len）//substring為（start，end）（不包括end）console.log("abcdefg".substr(2,3))//cdeconsole.log("abcdefg".substring(2,3))//cconsole.log("Abc".toLowerCase())//abcconsole.log("Abc".toUpperCase())//ABC</script></body>Object
與java相同，可以把Ovject類型看成是所有類的基類
Object對象其中最重要的是它的prototype屬性
它可以動態的給類擴展方法和屬性
例如
上述代碼結果為
類
<script type="text/javascript">/*js中定義類第一種方法：function 類名（形式參數列表）{this.屬性名 = 參數this.屬性名 = 參數this.方法名 = function(){}}第二種方法：類名 = function(形式參數列表){this.屬性名 = 參數this.屬性名 = 參數this.方法名 = function(){}}*///sayHello既是函數，也是類，取決于如何調用function sayHello(){}//這樣調用是當作函數調用，不會在堆中new對象sayHello();//new 來調用 就是當作類來調用，會在瀏覽器的堆中開辟新對象var obj= new sayHello();</script>示例（員工類）：
function Emp(empno,ename,sal){//屬性this.empno=empno;this.ename=ename;this.sal = sal;//方法this.work=function(){console.log(ename+"working.....");}}//創建對象var v1=new Emp();v1.work();var v2=new Emp(1);v2.work();var v3=new Emp(1,"zhangsan");v3.work();var v4=new Emp(1,"zhangsan",900);v4.work();console.log("第一種方式"+v4.sal);//另一種引用方式console.log("第二種方式"+v4["sal"])//給emp動態添加方法Emp.prototype.getSal=function(){return this.sal;}console.log(v4.getSal());運行結果：
= =和= = =
===相當于java里的equals,即比較數據是否相等，又比較數據類型是否一致 ==則只比較值是否相等 var v1=true; var v2=1; console.log(v1==v2);//true console.log(v1===v2);//flasenull NaN 和undefined區別
null == undefined 但數據類型不同
NaN與任何都不能等同
javaScript 事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> load事件(在頁面加載完畢之后觸發) <body onload="console.log('加載完畢')">焦點事件：<input type="text" onblur="console.log('失去焦點')" onfocus="console.log('獲得焦點')"><br>單擊事件：<input type="button" onclick="console.log('單擊')" value="單擊"><br>雙擊事件：<input type="button" ondblclick="console.log('雙擊')" value="雙擊"><br>按鍵事件：<input type="text" onkeydown="console.log('按鍵按下')" onkeyup="console.log('按鍵抬起')"><br>鼠標相關事件<div style="border: 1px solid black; width: 300px; height: 300px;"onmouseover="console.log('鼠標經過了')"onmousemove="console.log('鼠標在div內移動了')"onmouseout="console.log('鼠標離開了')"onmouseup="console.log('鼠標彈起了')"onmousedown="console.log('鼠標按下了')"></div><br>表單事件<form onsubmit="alert('表單提交了')" onreset="console.log('表單重置了')"><input type="submit" value="提交"><input type="reset" value="重置"></form><br>選中文本事件和修改事件<input type="text" onselect="console.log('文本被選中了')" onchange="console.log('文本被修改')"></textarea><br><select onchange="console.log('選項被修改')"> <option value="">請選擇您的學歷</option><option value="bk">本科</option><option value="zk">專科</option></select> </body> </html>ECMAScript DOM BOM
ECMAScript是javaScript的語法核心
DOM是組件如按鈕，表格等，在js中 document是表示DOM組件
BOM是所有瀏覽器操作 如彈窗等 在js中使用window表示
事件注冊
事件注冊有兩種方式
第一種就是直接在元素中通過onclick聲明
第二種
代碼的執行順序
在使用DOM獲取元素時要注意腳本要寫在元素聲明之后
<body><script type="text/javascript">var bt = document.getElementById("bt");bt.onclick = function(){alert("匿名函數");}</script><input type="button" id="bt" value="BUTTON"/> </body>像上面這樣的代碼，因為先執行的腳本，導致bt對象為null，此時修改順序即可解決問題
或者也可以將代碼改為下面這種寫法
<body onload="load()"><script type="text/javascript">function load (){var bt = document.getElementById("bt");bt.onclick = function(){alert("匿名函數");}}</script><input type="button" id="bt" value="BUTTON"/> </body>或者
<body><script type="text/javascript">window.onload=function(){var bt = document.getElementById("bt");bt.onclick = function(){alert("匿名函數");}}</script><input type="button" id="bt" value="BUTTON"/> </body>鍵盤監聽
上面提到了一系列鍵盤監聽事件，我們可以通過以下代碼獲取得到的按鍵
<body><input type="text" id="username"/><script type="text/javascript">function DL (a){if(a.keyCode==13){console.log("點擊了enter");}}window.onload=function(){var username = document.getElementById("username");username.onkeypress=DL;}</script></body>或
<body><input type="text" id="username"/><script type="text/javascript">window.onload=function(){var username = document.getElementById("username");username.onkeypress=function(a){if(a.keyCode==13){console.log("點擊了enter")}}}</script></body>練習 移動方塊
<body id="body"><div id="person" style="width: 10px; height: 10px; position: absolute; left: 50px; top: 50px; background-color: #2F2D2E;"></div><script type="text/javascript">window.onload=function(){person = document.getElementById("person");body = document.getElementById("body");speed = 1.0;last_key='q';window.onkeydown=function(data){var y=parseInt(person.style.top);var x=parseInt(person.style.left);if (last_key==data.key){speed=speed+0.5;}else {speed=1;}last_key = data.key;if(data.key=='w'&&y>30){y=y-speed;person.style.top=y+'px';}if(data.key=='s'&&y<window.innerHeight-30){y=y+speed;person.style.top=y+'px';}if(data.key=='a'&&x>30){x=x-speed;person.style.left=x+'px';}if(data.key=='d'&&x<window.innerWidth-30){x=x+speed;person.style.left=x+'px';}}}</script></body>void運算符
void運算符的用法是 void(表達式)
那么表達式返回的將返回空值
假如我們想有一個超鏈接樣式的文本，單擊后執行js代碼，并且在執行完js代碼后不跳轉頁面。
我們就可以這樣寫
如果寫成href=""那么單擊相當于訪問當前頁 ，不符合要求
array 數組
<body><script type="text/javascript">var a=[];a.push(5);a.push(6);a.push(7);console.log(a.length);// 3console.log("pop"+a.pop());//pop7console.log(a.length);//2/****push和pop符合棧的特點*****/var b = new Array(2001,1,1);var str = b.join("_");console.log(str); //2001_1_1var c=[9,8,7,true,false];c.reverse();for(var i in c){console.log(c[i]); //false true 7 8 9}</script> </body>date對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><script type="text/javascript">var time=new Date();console.log(time);//Sun Dec 05 2021 14:57:56 GMT+0800 (中國標準時間)year = time.getFullYear();month = time.getMonth();//day = time.getDay(); 這樣獲取到的是星期幾day = time.getDate();console.log(year+"年"+month+"月"+day+"日");//2021年11月5日var strDate = time.toLocaleDateString();var strtime = time.toLocaleTimeString();var strDateTime = time.toLocaleString();console.log(strDate); //2021/12/5console.log(strtime); //下午3:05:30console.log(strDateTime); //2021/12/5 下午3:05:30//獲取1970-1-1 0：0：0到現在的總毫秒數var now = new Date();var timeMilis = now.getTime();//1638688162376console.log(timeMilis);</script> </body> </html>總結
以上是生活随笔為你收集整理的WBE前端笔记3：JavaScript练习--基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux java远程调试_idea远
- 下一篇： java图形界面颜色随机变换,JavaS