100字范文 > 【JavaScript】JS的变量数组计算器案例函数类常用对象的方法

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

时间：2021-12-08 15:19:38

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("这是我的第一个js")</script></body></html>

02-js-js的变量学习

<html><head><title>js的变量学习</title><meta charset="UTF-8"/><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"/><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"/><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"/><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"/><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><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"/><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><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"/><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"/><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"/><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的类和对象

练手代码

<html><head><title>学习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中的类和对象学习</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的自定义对象

变相地让Person继承于User

自定义对象与自定义类的区别（好处）是：自定义对象是活的Object，如果有一天在数据库的Person表中增加了score这列，在Java代码中（或者在JS类中）对应的会是pojo中JavaBean的类的更改，而在js中只需要将Object里面增加一个属性即可。

在实际开发中，（因为方便）会经常使用自定义对象，而不去使用自定义类

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js的自定义对象</title><meta charset="UTF-8"/><script type="text/javascript">//1、创建自定义对象var obj=new Object();obj.name="张三";obj.age=23;obj.test=function(){alert("我是obj");}</script></head><body></body></html>

14-js-js的常用对象和方法

<html><head><title>js的常用对象和方法</title><meta charset="UTF-8"/><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字符串，在前端执行。

<!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学习</title></head><body><h3>js的常用方法和对象学习</h3><hr><input type="button" id="" value="测试" onclick="test()"></body></html>

isNAN的使用

判断的是：使用Number强转之后，是不是数字。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。