javaScript
- 发展经历
- 特点:
- 代码操练
- js的引入方式一----->内联式引入
- js的引入方式二-----外部引入
- 常见错误原因---->
- js的ECMA部分
- 数据类型
- 运算符
- 流程控制
- if 分支
- switch分支
- while循环
- do while循环
- for循环
- 数组
- 对象
- JS中的函数
- 函数的格式
- 带参数的函数-----
- JS中的对象
- 字符串对象----String
- 自定义对象
- Number对象
- 日期对象
- 自定义对象的三种方式
- 原型链结构
- 鼠标事件
- 按键事件
发展经历
javaScript是一门脚本语言,运行在浏览器中的(需要由浏览器支持----即浏览器带有其解释器)
特点:
- 简单,规模小不需要编译运行速度快;
- 是一门基于对象的语言;
- 有事件进行驱动;
- 定义变量也很简单 var a,b,c 没有数据类型的限制;
代码操练
JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
先简单试一下:
一般html js 与css共同来开发网页使得网页具有了交互性;
js的引入方式一----->内联式引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是网页标题</title>
<!--
内嵌式引入方式
1,head标签中,用一对script标签,嵌入js代码
type 属性可以省略不写
-->
<script type="text/javascript">
function func(){
/*弹窗提示*/
alert("你好")
}
</script>
</head>
<body>
<input type="button" value="点我呀" onclick="func()"/>
</body>
</html>
js的引入方式二-----外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="js/jstype.js">
</script>
<input type="button" value="点我呀!!!!" onclick="fun1()" />
</body>
</html>
js文件
function fun1(){
/*弹窗提示*/
alert("你好,又见面了!!!")
}常见错误原因---->
一些小错误产生的原因------
用了javascript标签设置交互效果,但是没有效果出现
可能的原因-----在设置交互时没有写括号;
可能的原因----> 函数中缺少必要的{}
可能的原因------>js文件引入的位置不对
可能内敛和外链混用了
比如下面这个代码----->
在调试的时候也会提示我们,相应在哪里错了;
内敛引入和外链引入的优先级
- **外链方式的复用度比内敛方式要好,
- 降低了代码维护难度
- 一个页面可以引入多个js文件
这个css样式表是一样的逻辑;
js的ECMA部分
数据类型
js中数据类型
数值类型(number)----将整形和浮点型通通视为数值类型
字符串类型----用双引号或者单引号括起来表示
布尔类型-----true/false
空(null)-----表示没有值,不存在的引用,但并不等于空字符串或者0
未定义(undefined)值----表示虽然定义了,但是没有赋值
Object类型-----复合数据类型包括对象和数组
<script type="text/jscript">
/*
js中是弱类型脚本语言
1,所有的变量的数据类型用var 声明
2,先声明后赋值也是可以的---这中方式在声明时并不知道数据类型,而是在赋值的时候才知道
3,js中变量可以被反复声明,后声明的会将前面的覆盖
4,js中可以不用分号作为结尾,每一行代码都是一个独立的语句
5,再给变量赋值可以改变变量的数据类型;
6,基本数据类型之外时符合数据类型----OBJECT
7,js中标识符与命名规则与java中保持一致即可,避免用$起名
*/
/* <!--整数和小数都叫number类型--> */
var a=10.9999999999999;
a=10000000;
alert (a);
var i;
i=12;
alert(i);
var aa;
aa="3.24";
alert (aa);
/* 字符串类型 */
var b;
b="你好";
alert(b);
/*空值类型 */
var c=null;
alert(c);
/* typeof返回数据的类型*/
alert(typeof b);
alert(typeof a+ "你好") ;
/* 布尔类型 */
var q=true;
alert(typeof q);
var p =1>2;
alert(p);
/* 数组 */
var t=[1,2,3,4,5,6];
alert(t);
alert(typeof t);
//其他引用数据类型
var y=new Date();
alert(y);
alert(typeof y);
运算符
大部分编程语言的基本运算符号时差不多的,在js中一些运算符号对比java会有一些差别
基本运算符跟java差不多;
/* // 加减乘除
alert("1+1="+(1+1));
alert((10-2)+"=10-2");
alert(10*10+"=10*10");
alert(100/10+"=100/10");
//除不尽的会进行四舍五入操作
alert("10/3="+10/3);
//取模与递加递减操作
var i;
i=1;
alert("i=1,输出i++后的值"+(i++));
var j=1;
alert("j=1,输出++j后的值"+(++j));
var k=1;
alert("输出k--的值"+(k--));
var m=1;
alert("输出--m的值"+(--m));
// 赋值运算
var a=8;
b=a;
alert("a=8,b=a求b的值"+b); */
//除以0的结果
//alert(10/0);//结果时是Infinity,而不是报错
//alert(10%0);//NaN---意思是not a number
/* alert(12.6/0);//infinity
alert(12.6%8);//4.6
alert(12.6%3.4);//2.4
var c,d;
c=1;d=2; */
//c+=d;
//alert("c=1;d=2,c+=d之后求c的值"+c);//3
//c-=d;
//alert("c=1;d=2,c-=d之后求c的值"+c);//-1
// c*=d;
//alert("c=1;d=2,c*=d之后求c的值"+c);//2
//c/=d;
//alert("c=1;d=2,c/=d之后求c的值"+c);//0.5
/* 关于+号即是运算符也是连结符号 */
//如果两端有至少一端是字符串则是连接符,如果是数字则是运算符
//alert("true+1的值"+true+1);
//布尔类型做运算时会将true视为1,false视为0
//alert(true+1);//2
//alert(100-false);//100
//关于== 号
//alert(1==1);//true
//alert("你好"=="你好");//true
//alert(1=="你好");//false
alert (1==true);
alert(false==0);
//会进行强制类型转换
/* 先比较类型,如果类型一致,再比较内容,
如果类型不一致,会强制转换为number再比较内容 */
//alert(1=="1");//true
/* === 号 */
/* 数据类型不同 直接返回false如果类型相同 才会比较内容 */
alert(1===1);//true
alert(1==="你好");//false
alert(1==="1");//false
alert (1===true);//false
alert(false===0);//false
流程控制
基本的流程控制跟java中的差不多
- 顺序结构 略
- 分支结构 if switch
- 循环结构 while,do while, for循环 ,foreach循环
if 分支
//输出该月的季节
var i=10;
if(i==12||i==1||i==2){
alert("冬季")
}else if(i>=3&&i<=5){
alert("春天");
}else if(i>=6&&i<=8){
alert("夏天");
}else {
alert("秋天");
}
switch分支
var j=12;
switch(j){
case 12:
case 1:
case 2:
alert("大约在冬季");
break;
case 3:
case 4:
case 5:
alert("好像在盛夏");
break;
case 6:
case 7:
case 8:
alert("金黄的秋天");
break;
default:
alert("凛冽的冬天");
break;
}
while循环
var r=0;
while(r<3){
alert(r);
r++;
}
do while循环
//求0-100的和
var t=0;
var result=0;
do {
result+=t;
t++;
}while(t<101)
alert(result);
for循环
var q=[0,1,2,3];
for (var i = 0; i < q.length; i++) {
alert(q[i]);
}
数组
数组的声明跟java中不一样,var q =[0,1,2,3]
方式一直接指定数组
var q=[0,1,2,3];
for (var i = 0; i < q.length; i++) {
alert(q[i]);
}
方式二,先声明后给数组赋值
var array= new Array();
array=[1,2,3,4,5,6,7,8,9];
array[0]=8;
console.log(array);
方式三—创建给定长度的数组
var array= new Array();
array=[1,2,3,4,5,6,7,8,9];
array[0]=8;
alert(array[0]);
console.log(array);//控制台打印数组
//alert(array);
// 创建定长数组
var arr= new Array(5);
console.log(arr);
在控制台查看信息—
数组中存放的元素可以是任意类型的;
例如:
获取数组元素与数组的扩容----
类似于Java,可以用下表来获取数组元素,可以根据循环来遍历数组;
数组的扩容----两种方式
第一种是修改索引长度来修改数组的长度
第二种方式是修改下标来修改数组的长度
var arr =[1,2,3];
document.write("数组的元素--{")
for (var i = 0; i < arr.length; i++) {
if(i==arr.length-1){
document.write(arr[arr.length-1]+"}")
}else{
document.write(arr[i]+",");
}
}
document.write("数组长度--"+arr.length);
//通过长度修改数组的长度;
arr.length=5;
document.write("扩容后的数组的元素--{")
arr[4]="helloworld";
for (var i = 0; i < arr.length; i++) {
if(i==arr.length-1){
document.write(arr[arr.length-1]+"}")
}else{
document.write(arr[i]+",");
}
}
//通过索引可以需改数组长度
arr[10]=99;
alert(arr.length);
/* foreach循环
遍历的i是索引而不是元素
*/
for(var i in arr){
alert(arr[i]);
}
数组中常用方法
var array=[1,"hello",2,"world",3,"js",4,"java"];
document.writeln("有返回");
document.write(array.indexOf("hello"));//1
document.writeln("没有返回");
document.write(array.indexOf(8));//-1
//数组的合并
var array1=[5,"hellow",6,"word",7,"jscript",8,"java#"];
var family =array.concat(array,array1);
console.log(family);
//alert(family);
//数组中元素拼合,
var c=array.join("---");//可以规定连接符
console.log(c);
document.write(typeof c);
//数组元素的添加和删除
var a=array.pop();//删除最后一个元素,返回最后一个元素的值,数组数组长度减少
document.write("pop后数组长度--"+array.length)
alert(a);//java
var b=array.push("今天天气不错呀!!")//添加元素,数组长度增加
document.write("push后数组长度--"+array.length)
alert(b);//8 返回添加进去的元素的下标,可以看到js中数组就类似于java中的集合
//数组中的元素移位
var aq=array1.shift();//5--- 返回被移除的第一个元素,其余元素向低位移动,驻足长度对应减少
console.log(array1);
alert(array1.length);//7
alert(aq);//5
//像数组中第一个位置添加元素,其余元素向高位移动
var v=array1.unshift("hellokity")
document.write(v);//8--返回新数组的长度
//总结一下,移除时返回的时元素,增加时返回数组的长度
//修改数组中元素
var array3=[1,2,3];
//通过下标来修改
array3[2]="hello";
//添加元素
/* 从前面添加用push();
从后面添加用下标
*/
array3.push("你好");//返回数组的长度
array3[array3.length]="helloworld";
alert(array3);//1,2,hello,你好,helloworld
//移除元素---delete
var t= delete array3[0];//true移除元素位置为 undefined
console.log(t);
//添加和删除元素同时进行
var array5=[1,1,1,1,1,1,1,1,1,1];//10个元素
var bian=array5.splice(2,2,"2","2","2");//在第二个位置添加元素,删除两个,返回的值时删除的元素
alert(bian);
alert(array5);
//可以通过调整splice的参数来达到删除元素的目的
var array6=[1,1,1,1,1,1,1,1,1,1];//10个元素
var y=array6.splice(2,3);
alert(y);
alert(array6);
//合并数组--返回一个新数组
var uu=array6.concat(array,array5);
console.log(typeof uu);
console.log(uu);
//也可以通过concat方法向数组中添加元素,返回一个 新数组
var arr1 = ["Emma", "Isabella"];
var myChildren = arr1.concat("Jacob", "Michael", "Ethan");
alert(myChildren);
//数组的分割
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3); //从下标为3的开始切割,返沪i一个新数组
var citrus = fruits.slice(1, 3); //从下标为1开始取到下标为3截至返回新数组;(范围[) )
对象
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
JS中的函数
函数的格式
function 函数名(参数列表){
方法体
}
或者
var 函数名 =function (参数列表){
方法体
}
或者
var 方法名 =new Function(‘js代码’);
function methodA(){
document.writeln("你好")
}
</script>
<button style="width: 5.25rem;height: 2.25rem;" value="提交" onclick="methodA()"></button>
<script type="text/javascript">
var methodB= function(){
alert("helloworld");
}
var methodC = new Function('alert("这是第三种方式")');
methodC();
</script>
<input type="button" style="width: 2.625rem;height: 0.625rem;" ondblclick="methodB()" />带参数的函数-----
var sum =0;
function fun1 (a,b,c){
sum=a+b+c;
document.write(sum)
}
//调用函数
fun1(10,20,70);
var avg =function(a,b,c,d){
return (a+b+c+d)/4;
}
document.write(avg(2,3,4,5));
关于参数的个数问题----
可以比定义参数个数少也可以多
var avg =function(a,b,c,d){
return (a+b+c+d)/4;
}
document.write(avg(2,3,4,5,6));函数的参数也可以是一个函数
<script type="text/javascript">
var sum = 0;
function fun1(a, b, c) {
sum = a + b + c;
alert(sum);
}
//调用函数
fun1(10, 20, 70);
var avg = function(a, b, c, d) {
return (a + b + c + d) / 4;
}
document.write(avg(2, 3, 4, 5, ));
fun1(1, avg(1, 2, 3, 4), 3);
一下这张方式会看起来比较难以理解,只需要知道这种写法就可以了;
function funa(i, j) {
return i + j;
}
function funb(a) {
return a(10, 20);
}
var sum = funb(funa)
alert(sum)
function func(b){
return b(20,20);
}
var asd=func(funa);
alert(asd);
function methodA (a,b,c,d){
return a-b+c-d;
}
function methodB(h){
return h(1,2,3,4)
}
var t=methodB(methodA);
alert(t);这种方式-----可以理解为(以methodA和methodB为例)
methodA正常定义,methodB传入参数h,h包含四个数,然后嚷着四个参数干嘛呢?
想让他们做加减运算,可以把methodA方法名传入(不要带括号,因为带括号的话理解为你还要往里面传参数,不带的话就相当于把方法methodB的参数传入到MethodA中),以达到目的;
JS中的对象
字符串对象----String
var str="helloworld"
var c=str.charAt(8);
alert(c);
var str1="你好世界!"
var str3=str.concat(str1);
document.write(str3);
var str5=str.concat(str,str1,str3);
alert(str5
document.write(str.repeat(3));
var i =str.substr(1,6);//从1截取6个
var q=str.substring(1,6)//从开始到6结束
console.log(i);
console.log(q);
//js中将字符产解析为JS代码运行
var strstr = ' var k ="你好!!!"';
//alert(strstr);//' var k ="你好!!!"'
//alert(k);//k未定义
eval（strstr);//解析字符串为代码
alert(k);
自定义对象
person = new Object();
person.firstname="Gavin";
person.lastname="Doe";
person.age=18;
person.eyecolor="blue";
alert(person);
console.log(person);//按照字母顺序排序
document.write(person);
person1= new Object();
//使用对象构造器
person1={firstname:"Gavin",lastname:"Doe",age:19,eyecolor:"blue"};
alert(person1);
//使用对象构造器----方法作为载体
function girl(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
// 有了构造器就可以按照构造器构造对象了
var girlfriend=new girl("John","Tom",22,"blue");
alert(girlfriend);
console.log(girlfriend);
// 除此之外还可以在构造中添加方法
function boy(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changename=changename;//这个不能省哦
function changename(name){
this.lastname=name;
}
}
myfriend=new boy("Sally","Rally",48,"green");
myfriend.changename("Tom")
document.write(myfriend.lastname);
console.log(boy);
/* JavaScript 的对象是可变的
对象是可变的，它们是通过引用来传递的。
以下实例的 person 对象不会创建副本： */
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
var x = person;
x.age = 10; // x.age 和 person.age 都会改变跟java中一样；
alert(person.age);
/* new 和不 new的区别：
如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。
如果不 new 的话函数内的 this 指向的是 window。 */
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
return [this.firstname,this.lastname,this.age,this.eyecolor,this]
}
var myFather=new person("John","Doe",50,"blue");
var myMother=person("Sally","Rally",48,"green");
console.log(myFather) // this 输出一个 person 对象
console.log(myMother) // this 输出 window 对象
Number对象
// document.write(Number.MAX_SAFE_INTEGER);
// document.write(Number.MIN_SAFE_INTEGER);
// document.write("\t")
// document.write(Number.MAX_VALUE);
//document.write(Number.MIN_VALUE);
var t=100;
Number.MAX_INTEGER=t;
document.write(Number.MAX_INTEGER);
//字符串解析为数字
alert(Number.parseInt("10.234")+70);
alert(Number.parseFloat("10")+90);
alert(Number.isInteger(12));//判断是否为整型
var i=10%0;//非数字
var j=10/3;//无限循环
document.write(Number.isFinite(i));//false
document.write(Number.isFinite(j));//true
document.write(Number.isNaN(i));//true
document.write(Number.isNaN(j));//false
日期对象
var d1= new Date();
var d2= new Date("October 13,1975 11:13:09");
var d3=new Date(79,5,24,11,33,0);
console.log(d1);
console.log(d2);
console.log(d3);
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();
if (x>today)
{
alert("今天是2100年1月14日之前");
}
else
{
alert("今天是2100年1月14日之后");
}
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
// 获取年份
// ①
if (/(y+)/i.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
// ②
if (new RegExp("(" + k + ")", "i").test(fmt)) {
fmt = fmt.replace(
RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
var fmt=d2.format("yyyy-MM-dd hh:mm:ss")
alert(fmt);
var now = new Date();
var nowStr = now.format("YYYY-MM-DD"); // 2021-01-11
var dd=new Date();
var i=dd.getDate();//返回月份的第几天
var ii=dd.getDay();//返回一周的第几天
var iii=dd.getFullYear();//返会完整年份
var iiii=dd.getTimezoneOffset();//返回
var iiiii =dd.getYear();//返回与1900年之间的年份差
console.log(i);
console.log(ii);
console.log(iii);
console.log(iiii);
console.log(iiiii);
var t = new Date();
var tt = new Date("1990,10,19")
if(t>tt){
alert(t);
}else{
alert(tt);
}
自定义对象的三种方式
<script type="text/javascript" >
//创建对像=------方式一通过Object来定义
var per= new Object();
per.name="扎根三";
per.age=19;
per.gender="男";
per.perinfo=function(address){
console.log("姓名--"+this.name+"--性别--"+this.gender+"--年龄--"+this.age+"岁--"+address+"人")
}
console.log(per.name+"的个人信息--");
per.perinfo("新疆");
</script>
<script type="text/javascript">
//准备一个构造方法
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
this.like=function(food){
console.log(this.name+"--"+this.gender+"--"+this.age+"--"+"喜欢吃"+food)
}
}
var perp=new Person("零四十",19,"女");
console.log(perp.name+"的个人信息----");
perp.like('饺子');
</script>
<script type="text/javascript">
//json
var per={name:"张牙舞爪",
age:19,gender:"男",
eat:function(food){
document.write(this.age+"岁的"+this.gender+"孩子"+this.name+"正在吃"+food);
}
};
console.log(per);
per.eat("地瓜");
</script>
原型链结构
鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定与触发</title>
</head>
<body onload="startTime()">
<!-- JS事件驱动型
当单机按钮时,触发某些JS代码
一个事件可以同时绑定多个事件
一个页面元素可以同时绑定躲着事件-->
<script src="js/danji.js" type="text/javascript" charset="utf-8"></script>
<input type="button" value="单击按钮!!!" onclick="clicked()" />
<input type="button" value="双击按钮!!!" ondblclick="answer()" />
<input type="button" value="单击可执行多个方法的按钮" onclick="clicked(),answer()" />
<input type="button" value="悬停在我之上" onmouseover="over()" />
<!-- // <embed src="music/再见亦是泪.mp3"></embed> -->
<!-- 区别是一个是修改id匹配的内容,一个是修改当前对象的内容 -->
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是? </button>
<!-- <p id='demo'></p> -->
<!-- 修改当前对象内容 -->
<button onclick="this.innerHTML=Date()">现在是</button>
<div id ="demo">
想要知道事件请单击"现在的时间是?" 按钮
</div>
<!-- 鼠标按下----无论左键右键 -->
<button onmousedown="this.innerHTML=Date()">点我试试看</button>
<!-- 鼠标指上去 --> <!-- 鼠标离开 -->
<button onmouseenter="this.innerHTML=Date()" , onmouseleave="this.innerHTML=Date()">鼠标在我身上</button>
<button onmouseenter="getElementById('word').innerHTML=Date()" , onmouseout="getElementById('txt').innerHTML=Date()">鼠标离开我</button>
<button onmouseover="this.innerHTML=Date()" onmouseout="this.innerHTML=Date()">鼠标来与去</button>
<button onmousewheel="this.innerHTML=Date()" > 鼠标</button>
<div id="word">
这是第一块
</div>
<div id="txt">
这是下一块
</div>
<div onkeydown="answer()"></div>
</body>
</html>
鼠标事件练习----
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件练习</title>
<style type="text/css">
.d1{
width: 12.5rem;
height: 12.5rem;
background-color: gold;
}
</style>
</head>
<body>
<script src="js/danji.js" type="text/javascript" charset="utf-8"></script>
<div class="d1"
onmouseenter="enter()"
onmouseout="out()"
onmouseup="up()"
onmousedown="down()"
onmousemove="move()"
onmouseover="over()"
onmousewheel="wheel">
</div>
</body>
</html>
按键事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键事件</title>
</head>
<body>
<script type="text/javascript">
function fun1(){
console.log("按键按下");
}
function fun2(){
console.log("按键抬起");
}
function fun3(){
console.log("按键按下又抬起");
}
</script>
<input type="text" placeholder="请输入账号" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
</body>
</html>
