當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法

發(fā)布時(shí)間：2024/2/28 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

01-js-js的聲明和引入

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js的聲明呵和引入</title><script src="js/my.js" type="text/javascript" charset="utf-8"></script></head><body><h3>js的聲明和引入</h3><script type="text/javascript">alert("這是我的第一個(gè)js")</script></body> </html>

02-js-js的變量學(xué)習(xí)

<html><head><title>js的變量學(xué)習(xí)</title><meta charset="UTF-8"/><script type="text/javascript">/*js的變量學(xué)習(xí)*//*var a=123;var A=1234;var a1=3.1415926;var a2="js";var a3='k';var a4=true;var a5=new Date();var a="js學(xué)習(xí)";alert(a);*//*js中的數(shù)據(jù)類型*/var d;alert(d);alert(typeof c);</script></head><body><h3>js的變量學(xué)習(xí)</h3></body> </html>

03-js-js的變量強(qiáng)轉(zhuǎn)

<html><head><title>js中的變量強(qiáng)轉(zhuǎn)</title><meta charset="UTF-8"/><script type="text/javascript">/*聲明變量*//*var a="a";var b=1;var c=truevar d=new Date();var d2=new Date();var d1=null;alert(Number(a));alert(typeof Number(a)); *//*聲明變量*/var a=123;var a1=-123var a2=0;var b="abcdf";var b1="";var d=new Date();var d1=null;var c;alert(Boolean(c));if(a){alert("哈哈");}</script></head><body><h3>js中的變量強(qiáng)轉(zhuǎn)</h3></body> </html>

04-js-js的運(yùn)算符

<html><head><title>js的運(yùn)算符學(xué)習(xí)</title><meta charset="UTF-8"/><script type="text/javascript">/*聲明變量:算術(shù)運(yùn)算*//*var a="123a";var b=2;alert(a+b);var c=truevar d="1"alert(c+d);alert(a-d);*//*聲明變量:邏輯運(yùn)算*/var a=true;var b=true;alert(a&b);if(a&b){alert("haha");}</script></head><body><h3>js的運(yùn)算符學(xué)習(xí)</h3></body> </html>

05-js-js的==和===判斷

<html><head><title>js的特殊關(guān)系運(yùn)算符</title><meta charset="UTF-8"/><script type="text/javascript">/*聲明變量*/var a=1;var a1="1";var a2=true;var a3="true";var a4="a";var a5="a";/*alert(a==a1);//truealert(a==a2);//truealert(a==a3);//falsealert(a1==a2);//truealert(a1==a3);//falsealert(a2==a3);//falsealert(a4==a5);//true*//*alert(a===a1);//truealert(a===a2);//truealert(a===a3);//falsealert(a1===a2);//truealert(a1===a3);//falsealert(a2===a3);//falsealert(a4===a5);//true*/</script></head><body><h3>js的特殊關(guān)系運(yùn)算符</h3></body> </html>

06-js-js的邏輯結(jié)構(gòu)

<html><head><title>js的邏輯結(jié)構(gòu)和循環(huán)結(jié)構(gòu)學(xué)習(xí)</title><meta charset="UTF-8"/><script type="text/javascript">/*聲明變量：if判斷*/var a=123;var b=45;if(a>10){alert(a+b);}/*聲明變量：選擇結(jié)構(gòu)*/var a=1;switch (a){case "1":alert("第一項(xiàng)選擇");break;case "2":alert("第二項(xiàng)選擇");break;default:alert("沒有對(duì)應(yīng)的選項(xiàng)");break;} /*-----------------------------------------------------------------------------------*//*循環(huán)結(jié)構(gòu)學(xué)習(xí)*/for(var i=0;i<3;i++){alert("好熱:"+i);} /*演示九九乘法表*/for(var i=1;i<=9;i++){for(var j=1;j<=i;j++){document.write(i+"*"+j+"="+i*j+"    ");}document.write("<br />");}</script></head><body><h3>js的邏輯結(jié)構(gòu)和循環(huán)結(jié)構(gòu)學(xué)習(xí)</h3></body> </html>

07-js-js的數(shù)組

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js的數(shù)組學(xué)習(xí)</title><script type="text/javascript">//1、js的數(shù)組聲明/*var arr1=new Array();//第一種聲明方式arr1[0]="abc";alert(arr1);var arr2=new Array(5);//第二種聲明alert(arr2.length);var arr3=[1,2,3,4,5];alert(arr3);*///2、數(shù)組的賦值和取值//聲明數(shù)組/*var arr=[];arr[0]=2;arr[1]="abc";arr[2]=true;arr[3]=new Date();arr[10]="哈哈";alert(arr);alert(arr[14]);*///3、數(shù)組的length屬性/*var arr=[1,2,3,4,5,6];alert(arr.length);arr.length=8;alert(arr.length);arr[2]="abc";alert(arr);arr.length=3;alert(arr);*///4、數(shù)組的遍歷var arr=[1,"bnj",3,"a",4];alert(arr);//遍歷1/*for(var i=0;i<arr.length;i++){alert(arr[i]);}*///遍歷2：for(var i in arr){alert(i);//獲取的是角標(biāo)}</script></head><body><h3>js的數(shù)組學(xué)習(xí)</h3></body> </html>

08-js-js計(jì)算器案例

<html><head><title>計(jì)算器</title><meta charset="UTF-8"/><style type="text/css">/*設(shè)置div樣式*/#showdiv{border: solid 1px;border-radius: 10px;/*設(shè)置邊框角度*/width: 320px;height:400px;text-align: center;margin: auto;/*設(shè)置居中*/margin-top: 50px;background-color: floralwhite; }/*設(shè)置輸入框樣式*/input[type=text]{margin-top: 20px;width: 290px;height: 40px;font-size: 20px;}/*設(shè)置按鈕樣式*/input[type=button]{width: 60px;height: 60px;margin-top: 20px;margin-left: 5px;margin-right: 5px;font-size: 30px;font-weight: bold;font-family: "蘿莉體第二版";} </style><script type="text/javascript">//聲明函數(shù)function test(btn){//獲取button按鈕對(duì)象的value值var num=btn.value;//根據(jù)用戶點(diǎn)擊動(dòng)作執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯switch (num){case "=":document.getElementById("inp").value=eval(document.getElementById("inp").value);break;case "c":document.getElementById("inp").value="";break;default://將按鈕的值賦值給input輸入框document.getElementById("inp").value=document.getElementById("inp").value+num;break;}}</script></head><body><div id="showdiv"><input type="text" name="" id="inp" value="" readonly="readonly"/><br /><input type="button" name="" id="btn" value="1"value="" οnclick="test(this)"/><input type="button" name="" id="" value="2" onclick="test(this)"/><input type="button" name="" id="" value="3" onclick="test(this)"/><input type="button" name="" id="" value="4" onclick="test(this)"/><br /><input type="button" name="" id="" value="5" onclick="test(this)"/><input type="button" name="" id="" value="6" onclick="test(this)"/><input type="button" name="" id="" value="7" onclick="test(this)"/><input type="button" name="" id="" value="8" onclick="test(this)"/><br /><input type="button" name="" id="" value="9" onclick="test(this)"/><input type="button" name="" id="" value="+" onclick="test(this)"/><input type="button" name="" id="" value="-" onclick="test(this)"/><input type="button" name="" id="" value="*" onclick="test(this)"/><br /><input type="button" name="" id="" value="0" onclick="test(this)"/><input type="button" name="" id="" value="/" onclick="test(this)"/><input type="button" name="" id="" value="c" onclick="test(this)"/><input type="button" name="" id="" value="=" onclick="test(this)"/></div></body> </html>

09-js-js數(shù)組的常用操作

<html><head><title>js數(shù)組的常用操作</title><meta charset="UTF-8"/><script type="text/javascript">/*聲明數(shù)組*/var arr=[1,"abc","張三","12"];/*數(shù)組的操作*//*var b=["今天天氣不錯(cuò)","適合學(xué)習(xí)"];var c="js";var d=arr.concat(b,c,c);//數(shù)組的合并alert(d);alert(d.length);*//*數(shù)組指定間隔符轉(zhuǎn)換字符串*//*var b=arr.join("-");alert(typeof b);*//*數(shù)組移除最后一個(gè)元素并返回*//*var ele=arr.pop();alert(ele);*//*數(shù)組的追加*/ // var ln=arr.push("lol"); // var ln2=arr.push(["66",77]); // alert(arr);/*數(shù)組的移除第一個(gè)元素*/ // var ele=arr.shift(); // alert(ele); // alert(arr);/*數(shù)組的在開始位置插入指定元素*/ // var a=arr.unshift("又是周五了"); // alert(a);/*數(shù)組刪除指定位置元素*/var arr2=arr.splice(1,3,"a");alert(arr);</script></head><body><h3>js數(shù)組的常用操作</h3></body> </html>

10-js-js的函數(shù)學(xué)習(xí)(1）

<html><head><title>js的函數(shù)學(xué)習(xí)</title><meta charset="UTF-8"/><script type="text/javascript">//1、聲明函數(shù)//方式一:function test1(a1,a2){alert("函數(shù)聲明一");}//方式二:var test2=new Function("a1","a2","alert('函數(shù)聲明二'+a1)");//方式三:var test3=function(a1,a2){alert("我是函數(shù)聲明三");}//調(diào)用聲明的函數(shù)//test2(1,2);//2、函數(shù)的參數(shù)function testParam(a1,a2,a3){alert(a1);alert("函數(shù)的形參學(xué)習(xí)");}//testParam(1,2);//3、函數(shù)的返回值var testReturn=function(){alert("函數(shù)的返回值學(xué)習(xí)");//return "js";}alert(testReturn()); </script></head><body><h3>js的函數(shù)學(xué)習(xí)</h3></body> </html>

11-js-js的函數(shù)學(xué)習(xí)(二)

<html><head><title>js的函數(shù)學(xué)習(xí)二</title><meta charset="UTF-8"/><script type="text/javascript">//1、函數(shù)的執(zhí)行符var test1=function(){alert("函數(shù)的執(zhí)行符學(xué)習(xí)");return "js"; }//alert(test1());//2、函數(shù)作為實(shí)參進(jìn)行傳遞function testobj(a){alert(a());}var testParam=function(){alert("我是函數(shù)參數(shù)");}testobj(testParam());//3、開發(fā)中經(jīng)常用的傳遞方式function testObj2(fn){//testObj2函數(shù)在被調(diào)用的時(shí)候，實(shí)參必須是一個(gè)函數(shù)對(duì)象。fn();}stestObj2(function(){alert("開發(fā)");})</script></head><body><h3>js的函數(shù)學(xué)習(xí)二</h3></body> </html>

12-js-js的類和對(duì)象

練手代碼

<html><head><title>學(xué)習(xí)javascript</title><meta charset="UTF-8"/><script type="text/javascript">function Person(name,age){this.name=name;this.age=age;this.sing=function(){alert("我在唱歌");}}Person.prototype.sex="女";var p1=new Person("小明",23);console.log(p1);console.log(p1.name);p1.sing();</script></head><body></body> </html> <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js中的類和對(duì)象學(xué)習(xí)</title><meta charset="UTF-8"/><script type="text/javascript">//1、類的聲明--personfunction Person(name,age){Person.prototype=new User();this.name=name;this.age=age;this.fav="唱歌"; }function User(uname,pwd){this.uname=uname;this.pwd=pwd;}//使用prototype//Person.prototype.test=function(){alert("嘿嘿")};Person.prototype=new User();User.prototype.testU=function(){alert("我是user")};//User.prototype.student=new Student();//2、使用類var p1=new Person("張三",32); // p1.address="北京市"; // alert(p1.address); // alert(p1.name);var p2=new Person("李四",23); // alert(p2.name);//alert(p1.test===p2.test);//false;alert(p1.test===p2.test);p1.testU();</script></head><body></body> </html>

13-js的自定義對(duì)象

變相地讓Person繼承于User

自定義對(duì)象與自定義類的區(qū)別（好處）是：自定義對(duì)象是活的Object，如果有一天在數(shù)據(jù)庫的Person表中增加了score這列，在Java代碼中（或者在JS類中）對(duì)應(yīng)的會(huì)是pojo中JavaBean的類的更改，而在js中只需要將Object里面增加一個(gè)屬性即可。
在實(shí)際開發(fā)中，（因?yàn)榉奖?#xff09;會(huì)經(jīng)常使用自定義對(duì)象，而不去使用自定義類

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js的自定義對(duì)象</title><meta charset="UTF-8"/><script type="text/javascript">//1、創(chuàng)建自定義對(duì)象var obj=new Object();obj.name="張三";obj.age=23;obj.test=function(){alert("我是obj");} </script></head><body></body> </html>

14-js-js的常用對(duì)象和方法

<html><head><title>js的常用對(duì)象和方法</title><meta charset="UTF-8"/><script type="text/javascript">//1、String對(duì)象學(xué)習(xí)var str=new String("abcdefg");//聲明String對(duì)象存儲(chǔ)字符串var str2="MNP";//簡(jiǎn)寫形式//alert(str);//字符串大小寫的轉(zhuǎn)換//alert(str.toUpperCase());//將字符串轉(zhuǎn)換為大寫//alert(str2.toLowerCase());//將字符串轉(zhuǎn)換為小寫//字符串的切割 // var s="哈哈,嘿嘿,呵呵"; // var s1=s.split(",");//按照指定的字符切割字符串，返回?cái)?shù)組。 // alert(s1.length);//字符串的截取 // var s="abcdef"; // alert(s.substr(1,3));//從指定的開始位置截取指定長(zhǎng)度的子字符串 // alert(s.substring(1,3));//從指定的開始位置和指定的結(jié)束位置截取子字符串，含頭不含尾。//查找子字符串第一次出現(xiàn)的角標(biāo) // var s="abcdefg"; // alert(s.indexOf("dd"));//返回指定子字符串第一次出現(xiàn)的角標(biāo)，沒有則返回-1;//2、Date對(duì)象//1、創(chuàng)建Date對(duì)象var d=new Date();//alert(d);//獲取當(dāng)前年份 // alert(d.getYear());//返回的是1900年開始距今的年分?jǐn)?shù) // alert(d.getFullYear());//返回的是當(dāng)前的年份 // alert(d.getMonth()+1);//返回的當(dāng)前月份的角標(biāo)值，需要+1 // alert(d.getDate());//返回的是當(dāng)前的日期數(shù) // alert(d.getDay());//返回的是當(dāng)前的星期數(shù)，但是周天會(huì)返回值為0; // alert(d.getHours());//返回當(dāng)前時(shí)間的小時(shí)數(shù) // alert(d.getMinutes());//返回當(dāng)前時(shí)間的分鐘數(shù) // alert(d.getSeconds());//返回當(dāng)前時(shí)間的秒數(shù)//alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());//3、Math對(duì)象學(xué)習(xí)//1、Math在使用的時(shí)候不能new，使用Math.方法名調(diào)用即可。//創(chuàng)建隨機(jī)數(shù)字 // alert("Math.random():"+Math.random());//返回0-1之間的隨機(jī)數(shù)字，含0不含1。 // alert(1000+Math.random()*9000);//向下取整 // alert(Math.floor(1000+Math.random()*9000));//向上取整 // alert(Math.ceil("12.34"));//四舍五入 // alert(Math.round(12.12)); // alert(Math.round(12.65));//數(shù)值比較:求取最小值，求取最大值 // alert(Math.min(12,13,5,78));//獲取最小值 // alert(Math.max(12,3,4,56));//獲取最大值//4、Global對(duì)象學(xué)習(xí)//1、改對(duì)象從不直接使用并且不能new，也是就直接寫方法名調(diào)用即可。//使用eval將字符串轉(zhuǎn)換為可執(zhí)行的js代碼var str="var a=123";eval(str);alert(a);//使用isNaN判斷是否值NaNalert(isNaN("123"));//獲取字符中的浮點(diǎn)數(shù)alert(parseFloat("12.34a34a"));</script></head><body></body> </html>

eval的使用
很強(qiáng)大的eval，可以實(shí)現(xiàn)js的動(dòng)態(tài)執(zhí)行。比如說從后臺(tái)服務(wù)器發(fā)一個(gè)js字符串，在前端執(zhí)行。

<!DOCTYPE html> <html><head><meta charset="utf-8"><script type="text/javascript">/*eval的用法示例*/function test() {var a = eval("3*5");console.log(a);//輸出15eval("var b=4*6");console.log(b);//輸出24}</script><title>JS學(xué)習(xí)</title></head><body><h3>js的常用方法和對(duì)象學(xué)習(xí)</h3><hr><input type="button" id="" value="測(cè)試" onclick="test()"></body> </html>

isNAN的使用
判斷的是：使用Number強(qiáng)轉(zhuǎn)之后，是不是數(shù)字。

超強(qiáng)干貨來襲云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【算法笔记】重刷PAT 题解合集
下一篇：【JavaScript】JS事件机制学习