目录
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);
object
var b=new Date();
alert(typeof b);
null:
空对象赋值，主要是和undefined进行区分。
Undefined:undefined
var 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: 1
boolean false: 0
object 有具体的值: 数字
object null: 0
其他类型转换为boolean 类型
使用Boolean(其他类型的数据);
number 正数或者负数： true
number 0 : false
string 非空字符串 : true
string 空字符串 "": false
object 具体的对象 : true
object null : false
声明不赋值的变量 : false
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明变量*/
/*var a="a";
var b=1;
var c=true
var d=new Date();
var d2=new Date();
var d1=null;
alert(Number(a));
alert(typeof Number(a)); */
/*声明变量*/
var a=123;
var a1=-123
var 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;//false
alert(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=true
var 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);//true
alert(a==a2);//true
alert(a==a3);//false
alert(a1==a2);//true
alert(a1==a3);//false
alert(a2==a3);//false
alert(a4==a5);//true*/
/*alert(a===a1);//true
alert(a===a2);//true
alert(a===a3);//false
alert(a1===a2);//true
alert(a1===a3);//false
alert(a2===a3);//false
alert(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();
}s
testObj2(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"/>
<!--
js中的类学习：
1、类的声明:
function 类名(形参1，形参2……){
this.属性名1=形参1;
this.属性名2=形参2;
……
this.属性名=fn
}
2、类的使用:
var 对象名=new 类名(实参1，实参2……);
注意：
js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充。
3、类的"继承"：prototype关键字
、 同过prototype关键字实现了不同对象之间的数据共享。
作用1:实现某个类的所有子对象的方法区对象的共享，节省内存
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、类的声明--person
function 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"/>
<!--
js创建自定义对象
对象的作用：用来存储整体数据。
原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据。来保证数据的完成性
应用：
Ajax中会使用。
使用：
1、创建自定义对象
var 对象名=new Object();
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
var 对象名={};
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
2、一般用来存储数据，不会再自定义对象中存储函数对象。
3、js中的对象属性和内容是可以自定义的扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。
-->
<!--声明js代码域-->
<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"/>
<!--
常用的对象和方法：
1、String
2、Date
3、Math
4、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判断是否值NaN
alert(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);//输出15
eval("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强转之后，是不是数字。
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
