當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
01-js-js的聲明和引入
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js的聲明呵和引入</title><!--聲明js代碼域--><!--引入外部聲明好的js文件--><script src="js/my.js" type="text/javascript" charset="utf-8"></script></head><body><h3>js的聲明和引入</h3><script type="text/javascript">alert("這是我的第一個js")</script></body> </html> <!--js的聲明學習：1、在head標簽中使用script標簽進行js代碼域的聲明<script type="text/javascript">alert("這是我的第一個js")</script>作用：聲明js代碼域特點:js的代碼只會作用于當前網頁2、在head標簽中使用script標簽引入外部聲明好的js文件<script src="相對路徑" type="text/javascript" charset="utf-8"></script>作用：引入外部聲明好的js文件特點：實現js代碼的重復使用，避免代碼的冗余。注意：因為js在HTML文檔中是一門單獨的語言，可以聲明在文檔中的任意位置一般情況下聲明在head標簽中。 -->02-js-js的變量學習
<html><head><title>js的變量學習</title><meta charset="UTF-8"/><!--js的變量聲明學習：1、js中的所有變量聲明只有var關鍵字。var a=123;var A=1234;var a1=3.1415926;var a2="js";var a3='k';var a4=true;var a5=new Date();alert(a);注意：a、js的變量名是嚴格區分大小的。b、js中的字符串可以使用雙引號也可以使用單引號。c、js中可以聲明同名變量，不會報錯，后面的會將前面的聲明覆蓋。(重要)var a=123;var a="js學習";alert(a);2、中的數據類型數據類型判斷關鍵字：typeof數據類型：number:數字類型var b=456;var b1=1.23;alert(typeof b1);string：字符串類型var b="今天天氣真好，適合學習";var b1='l';alert(typeof b1);boolean:var b=true;var b1=false;alert(typeof b1);objectvar b=new Date();alert(typeof b);null:空對象賦值，主要是和undefined進行區分。Undefined:undefinedvar c;alert(typeof c);變量聲明不賦值的情況下，默認值是undefined。注意：var d;alert(d);alert(typeof c);在js代碼中盡可能的給聲明的變量賦初始值;--><!--聲明js代碼域--><script type="text/javascript">/*js的變量學習*//*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學習";alert(a);*//*js中的數據類型*/var d;alert(d);alert(typeof c);</script></head><body><h3>js的變量學習</h3></body> </html>03-js-js的變量強轉
<html><head><title>js中的變量強轉</title><meta charset="UTF-8"/><!--js中的數據轉換：其他類型轉換為number 類型使用Number(其他類型的數據);string 類型的數字字符: 對應的number數字string 非數字字符: NaN(number類型)boolean true: 1boolean false: 0object 有具體的值: 數字object null: 0 其他類型轉換為boolean 類型使用Boolean(其他類型的數據);number 正數或者負數： truenumber 0 : falsestring 非空字符串 : truestring 空字符串 "": falseobject 具體的對象 : trueobject null : false聲明不賦值的變量 : false--><!--聲明js代碼域--><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中的變量強轉</h3></body> </html>04-js-js的運算符
<html><head><title>js的運算符學習</title><meta charset="UTF-8"/><!--js的運算符學習： 算術運算符：加法：+減法：-乘法：*除法：/余數：%number類型的和number類型的number類型和boolean類型(true--1,false--0)number類型和string類型(*,/,%,-)string類型和string類型的數字(*,/,%,-)string類型數字和boolean類型(*,/,%,-)在算術運算中如果兩邊的數據類型不是number的話，會使用Number()強轉后在進行運算.字符串的加法會作為字符鏈接，不會運算。注意：在字符串中“+”符合代表的是字符串的連接符，不會參與運算邏輯運算符：! & && | || (與java中的一致);var a=true;var b=true;//falsealert(a&b);if(a&b){alert("haha");}關系運算符：返回值為true 或者fasle!=:>=:<=:>:<:自增運算符：++:a++ ++a--:+=:-=: --><!--聲明js代碼域--><script type="text/javascript">/*聲明變量:算術運算*//*var a="123a";var b=2;alert(a+b);var c=truevar d="1"alert(c+d);alert(a-d);*//*聲明變量:邏輯運算*/var a=true;var b=true;alert(a&b);if(a&b){alert("haha");}</script></head><body><h3>js的運算符學習</h3></body> </html>05-js-js的==和===判斷
<html><head><title>js的特殊關系運算符</title><meta charset="UTF-8"/><!--等值運算符:==先判斷類型，類型一致則直接比較。類型不一致，則先使用Number()進行強轉后再進行比較。等同運算符:===先判斷類型，類型一致則再比較內容，內容一致則返回true，內容不一致則返回false。類型不一致則直接false注意：null和undefined在做==判斷時候返回true --><!--聲明js代碼域--><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的特殊關系運算符</h3></body> </html>06-js-js的邏輯結構
<html><head><title>js的邏輯結構和循環結構學習</title><meta charset="UTF-8"/><!--js的邏輯結構：if結構單分支結構：if(判斷條件){執行體}雙分支：if(判斷條件){執行體}else{執行體}多分支：if(判斷條件){執行體}else if(判斷條件){執行體}……else{執行體}swicth選擇結構：switch (a){case "1":alert("第一項選擇");break;case "2":alert("第二項選擇");break;default:alert("沒有對應的選項");break;}注意：判斷的變量可以是number類型也可以是string類型，但是不要混用。循環結構：for(變量;條件;迭代條件){循環體}循環while(循環條件){循環體}do{循環體}while(循環條件)--><!--聲明js代碼域--><script type="text/javascript">/*聲明變量：if判斷*/var a=123;var b=45;if(a>10){alert(a+b);}/*聲明變量：選擇結構*/var a=1;switch (a){case "1":alert("第一項選擇");break;case "2":alert("第二項選擇");break;default:alert("沒有對應的選項");break;} /*-----------------------------------------------------------------------------------*//*循環結構學習*/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的邏輯結構和循環結構學習</h3></body> </html>07-js-js的數組
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js的數組學習</title><!--js的數組學習：1、數組的聲明var arr=new Array();//聲明一個空數組對象var arr=new Array(length)//聲明一個指定長度的數組var arr=[元素]//聲明數組(最常用);<br />注意：js中的數組聲明不用指定長度，js的數組長度是不固定的，會隨著元素的數量改變而改變。2、數組的賦值和取值數組可以存儲任意類型的數據數組名[角標]=值;//角標可以是任意的正整數或者是0數組的取出：數組名[角標]//返回當前角標對應存儲的值如果角標不存在，返回undefined;3、數組的length屬性作用1：數組名.length//返回當前數組的長度。作用于2：數組名.length=新的值//動態的改變數組的長度注意：length>原有長度，則使用空進行填充。length<原有長度，則從后面進行截取，最后的數據會被刪除。4、數組的遍歷普通for循環：for(var i=0;i<arr.length;i++){alert(arr[i]);}for-in：for(var i in arr){alert(i);//獲取的是角標}--><!--聲明js代碼域--><script type="text/javascript">//1、js的數組聲明/*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、數組的賦值和取值//聲明數組/*var arr=[];arr[0]=2;arr[1]="abc";arr[2]=true;arr[3]=new Date();arr[10]="哈哈";alert(arr);alert(arr[14]);*///3、數組的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、數組的遍歷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);//獲取的是角標}</script></head><body><h3>js的數組學習</h3></body> </html>08-js-js計算器案例
<html><head><title>計算器</title><meta charset="UTF-8"/><!--聲明css代碼域--><style type="text/css">/*設置div樣式*/#showdiv{border: solid 1px;border-radius: 10px;/*設置邊框角度*/width: 320px;height:400px;text-align: center;margin: auto;/*設置居中*/margin-top: 50px;background-color: floralwhite; }/*設置輸入框樣式*/input[type=text]{margin-top: 20px;width: 290px;height: 40px;font-size: 20px;}/*設置按鈕樣式*/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><!--聲明js代碼域--><script type="text/javascript">//聲明函數function test(btn){//獲取button按鈕對象的value值var num=btn.value;//根據用戶點擊動作執行對應的業務邏輯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數組的常用操作
<html><head><title>js數組的常用操作</title><meta charset="UTF-8"/><!--數組的操作學習：1、數組的合并：arr.concat(b,c);//數組的合并2、數組指定間隔符轉換字符串:var b=arr.join("-");3、數組移除最后一個元素并返回:var ele=arr.pop();4、數組的追加，返回新的長度：var ln=arr.push("lol");//追加的元素可以是一個數組，但是為作為一個角標值存在5、數組的移除第一個元素:var ele=arr.shift();6、數組的在開始位置插入指定元素:var a=arr.unshift("又是周五了");7、數組刪除指定位置元素：var arr2=arr.splice(1,3,"a");--><!--聲明js代碼域--><script type="text/javascript">/*聲明數組*/var arr=[1,"abc","張三","12"];/*數組的操作*//*var b=["今天天氣不錯","適合學習"];var c="js";var d=arr.concat(b,c,c);//數組的合并alert(d);alert(d.length);*//*數組指定間隔符轉換字符串*//*var b=arr.join("-");alert(typeof b);*//*數組移除最后一個元素并返回*//*var ele=arr.pop();alert(ele);*//*數組的追加*/ // var ln=arr.push("lol"); // var ln2=arr.push(["66",77]); // alert(arr);/*數組的移除第一個元素*/ // var ele=arr.shift(); // alert(ele); // alert(arr);/*數組的在開始位置插入指定元素*/ // var a=arr.unshift("又是周五了"); // alert(a);/*數組刪除指定位置元素*/var arr2=arr.splice(1,3,"a");alert(arr);</script></head><body><h3>js數組的常用操作</h3></body> </html>10-js-js的函數學習(1）
<html><head><title>js的函數學習</title><meta charset="UTF-8"/><!--test,1-2,test(1,2)js的函數學習一：作用:功能代碼塊的封裝。減少代碼的冗余。1、函數的聲明：方式一:function 函數名(形參名1,形參名2……){執行體}方式二:var 函數名=new Function("形參1","形參2"……,"函數執行體");注意：此聲明表明在js中函數是作為對象存在的。方式三:var 變量名=function(形參名1,形參名2……){函數執行體} 2、函數的參數js中的函數在調用時，形參可以不賦值，不會報錯js中的函數在調用時，形參賦值可以不全部賦值，不會報錯，但是實參會依次進行賦值。3、函數的返回值在js中如果函數有返回值則直接返回，沒有返回值默認返回undefined注意：js的代碼聲明區域和執行區域是一起的，都是在js代碼的代碼域中。--><!--聲明js代碼域--><script type="text/javascript">//1、聲明函數//方式一:function test1(a1,a2){alert("函數聲明一");}//方式二:var test2=new Function("a1","a2","alert('函數聲明二'+a1)");//方式三:var test3=function(a1,a2){alert("我是函數聲明三");}//調用聲明的函數//test2(1,2);//2、函數的參數function testParam(a1,a2,a3){alert(a1);alert("函數的形參學習");}//testParam(1,2);//3、函數的返回值var testReturn=function(){alert("函數的返回值學習");//return "js";}alert(testReturn()); </script></head><body><h3>js的函數學習</h3></body> </html>11-js-js的函數學習(二)
<html><head><title>js的函數學習二</title><meta charset="UTF-8"/><!--js的函數學習二:1、函數的執行符:在js中函數的執行符值()沒有小括號則函數名其實就是一個變量加上小括號則會函數會被執行。2、函數作為實參傳遞在js中函數是可以作為實參進行傳遞的。function testobj(a){alert(a());}var testParam=function(){alert("我是函數參數");} testobj(testParam()); --><!--聲明js代碼域--><script type="text/javascript">//1、函數的執行符var test1=function(){alert("函數的執行符學習");return "js"; }//alert(test1());//2、函數作為實參進行傳遞function testobj(a){alert(a());}var testParam=function(){alert("我是函數參數");}testobj(testParam());//3、開發中經常用的傳遞方式function testObj2(fn){//testObj2函數在被調用的時候，實參必須是一個函數對象。fn();}stestObj2(function(){alert("開發");})</script></head><body><h3>js的函數學習二</h3></body> </html>12-js-js的類和對象
練手代碼
13-js的自定義對象
變相地讓Person繼承于User
自定義對象與自定義類的區別（好處）是：自定義對象是活的Object，如果有一天在數據庫的Person表中增加了score這列，在Java代碼中（或者在JS類中）對應的會是pojo中JavaBean的類的更改，而在js中只需要將Object里面增加一個屬性即可。
在實際開發中，（因為方便）會經常使用自定義對象，而不去使用自定義類
14-js-js的常用對象和方法
<html><head><title>js的常用對象和方法</title><meta charset="UTF-8"/><!--常用的對象和方法：1、String2、Date3、Math4、Global--><!--聲明js代碼域--><script type="text/javascript">//1、String對象學習var str=new String("abcdefg");//聲明String對象存儲字符串var str2="MNP";//簡寫形式//alert(str);//字符串大小寫的轉換//alert(str.toUpperCase());//將字符串轉換為大寫//alert(str2.toLowerCase());//將字符串轉換為小寫//字符串的切割 // var s="哈哈,嘿嘿,呵呵"; // var s1=s.split(",");//按照指定的字符切割字符串，返回數組。 // alert(s1.length);//字符串的截取 // var s="abcdef"; // alert(s.substr(1,3));//從指定的開始位置截取指定長度的子字符串 // alert(s.substring(1,3));//從指定的開始位置和指定的結束位置截取子字符串，含頭不含尾。//查找子字符串第一次出現的角標 // var s="abcdefg"; // alert(s.indexOf("dd"));//返回指定子字符串第一次出現的角標，沒有則返回-1;//2、Date對象//1、創建Date對象var d=new Date();//alert(d);//獲取當前年份 // alert(d.getYear());//返回的是1900年開始距今的年分數 // alert(d.getFullYear());//返回的是當前的年份 // alert(d.getMonth()+1);//返回的當前月份的角標值，需要+1 // alert(d.getDate());//返回的是當前的日期數 // alert(d.getDay());//返回的是當前的星期數，但是周天會返回值為0; // alert(d.getHours());//返回當前時間的小時數 // alert(d.getMinutes());//返回當前時間的分鐘數 // alert(d.getSeconds());//返回當前時間的秒數//alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());//3、Math對象學習//1、Math在使用的時候不能new，使用Math.方法名調用即可。//創建隨機數字 // alert("Math.random():"+Math.random());//返回0-1之間的隨機數字，含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));//數值比較:求取最小值，求取最大值 // alert(Math.min(12,13,5,78));//獲取最小值 // alert(Math.max(12,3,4,56));//獲取最大值//4、Global對象學習//1、改對象從不直接使用并且不能new，也是就直接寫方法名調用即可。//使用eval將字符串轉換為可執行的js代碼var str="var a=123";eval(str);alert(a);//使用isNaN判斷是否值NaNalert(isNaN("123"));//獲取字符中的浮點數alert(parseFloat("12.34a34a"));</script></head><body></body> </html>eval的使用
很強大的eval，可以實現js的動態執行。比如說從后臺服務器發一個js字符串，在前端執行。
isNAN的使用
判斷的是：使用Number強轉之后，是不是數字。
總結
以上是生活随笔為你收集整理的【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【算法笔记】重刷PAT 题解合集
- 下一篇： 【JavaScript】JS事件机制学习