javascript
一种动态脚本语言,动态页面是指人机交互,BOM是浏览器对象模型,DOM是文档对象模型。
注释
单行注释://;多行注释:/*xxx*/
标识符
- 什么是标识符? 变量、函数、属性的名字或者函数的参数
- 标识符的命名规则:由字母,数字,下划线或者美元($)组成;不能以数字开头;不能使用关键字、保留字作为标识符。
变量
用来临时存储信息。
var x=1; var x=2; name="zhangsan";
var x; x=1; var name; name="lisi";
js中的变量区分类型,但是没有int之类的关键词。
调试
弹框调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
alert("Hello javascript");//弹框调试
console.log("Hello javascript");//控制台输出调试
</head>
<body>
</body>
</html>
运行结果:
自定义函数
完成某一功能模块的代码段,可以重复执行,方便管理和维护。
函数声明,可以先使用后定义
函数表达式,必须先定义后使用
数据类型
number数字型,整型,浮点型都包括。
string字符串型,必须放在单引号或者双引号里面
boolean布尔类型,只有true和false两种值
undefined未定义,已经声明但是没有赋值的变量,派生自null值。
undefined==null 返回值是true
null空对象类型。
特殊类型:NaN是number的一种特殊类型,isNaN()如果是数字返回false,不是数字返回true。
isNaN()对接受的数值,先尝试着转换为数值,再检测是否为非数值。
任何涉及NaN的操作都会返回NaN。
NaN与任何值都不相等,包括本身。
type of
检测变量类型,语法:typeof 变量或typeof(变量),返回值:number、string、undefined、function、boolean、object
类型转换
parseInt()转换成整型
parseFloat()转换成浮点型
Number()包括整数和小数
boolean()转换成逻辑类型
除0以外的所有数字,转换成布尔类型都是true。除""之外的所有 字符,转换成布尔类型都是true。null和undefined转换成布尔类型都是false。
变量作用域
全局变量 在函数外面创建的变量,函数之间可以共享使用。
局部变量 在函数里面创建的变量,其他函数不能使用。
<script type="text/javascript">
alert("Hello javascript");//弹框调试
console.log("Hello javascript");//控制台输出调试
var x="34"
console.log(isNaN(x));//检测x是否为数值型,若是返回false,不是返回true
var b="大家好";
console.log(typeof(b));//检测变量的类型
var a="012345.34n123";
console.log(parseFloat(a)); //转换成浮点型
var age=18,email="marry@sohu.com",address;email=Number(email);
console.log(email);
var name="xm";//全局变量
function fn(){
var name='xh'; //局部变量
console.log(name);
}
fn();
console.log(name);
var a="123n45.32";
console.log(parseInt(a));//转换成数字
</script>
运行结果:
比较运算符
比较运算符用于比较两个值,结果为true或false
>、>=、<、<=、!=
var x=10;
console.log(x>=80);//比较大小
运行结果为false
逻辑运算符
逻辑与,逻辑或,逻辑非,结果为true或false
&& and || or ! 非
&&两个都是true结果为true,一个是false就是false。
||有一个为true就是true,两个都是false才为false。
三目运算符
根据不同的条件执行不同的操作返回不同的值
格式:条件?值1:值2;
var x = 50, //给x、y赋值
y = 70;
var a=(x>60)?"及格":"不及格"; //满足条件输出及格,不满足输出不及格
var b=(y>60)?"及格":"不及格";
console.log(a);
console.log(b);
运行结果:
算术操作符
+加、-减、*乘、/除、%取余
var x = 4,
y = 5;
var a,b,c,d,e;
a=x+y; //加
b=x-y; //减
c=x*y; //乘
d=x/y; //除
e=x%y; //取余
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
运行结果:
递增和递减
a++先运算再赋值
++a先赋值再运算
var n1=12,n2=29; //a++,++a
var n3=++n1+n2;
console.log(n1);
console.log(n3);
var x1=3,x2=5; //a--,--a
var x3=--x1+x2--;
console.log(x1);
console.log(x2);
console.log(x3);
运行结果:
赋值运算符
简单赋值 =
复合赋值 += -= *=
比较运算符
==相等 比较值是否相等
===全等 比较值和数据类型是否相等
!=不相等 比较值是否不相等
!==不全等 比较值和数据类型是否不相等
返回都是boolean类型
运算符的优先级
1、()
2、++、--
3、*、/、%
4、+、-
5、<、<=、>、>=
6、==、!=
7、&&
8、||
9、?: 三目运算符
10、=
程序控制语句
1、 条件判断控制语句
2、 多重if嵌套控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var x=90;
var s;
if(x==100){ //if else
s="满分";
}else if(x>=90){
s="优秀";
}else if(x>=70){
s="良好";
}else if(x>=60){
s="及格";
}else{
s="不及格";
}
console.log(s);
运行结果:
循环类控制语句
1、 for循环
2、 while循环
3、 do…while循环
var i;
var sum=0;
for(i=0;i<=100;i++){ //for循环
if(i%2==0){ //100以内奇数的和,运行到总和超过1000结束
continue;
}
if(sum>=1000){
break;
}
sum=sum+i;
}
console.log(sum);
var i1 = 0;
var sum1 = 0;
while(i1<=100){ //while循环求100以内正整数的总和
sum1+=i1;
i1++;
}
console.log(sum1);
var i2 = 0;
var sum2 = 0;
do{ //do...while循环
sum2+=i2;
i2++;
}while(i2<=100);
console.log(sum2);
运行结果:
弹出输入框
1、 prompt();弹出输入框。点击确定返回输入的内容,取消返回null
var cj=prompt("请输入您的成绩:"); //弹出输入框
console.log(cj);
if(cj<60){
alert("不及格"); //判断成绩,跳出窗口
}else if(cj>80){
alert("您的成绩为优")
}else if(cj>=60&&cj<=80){
alert("您的成绩刚及格");
}
运行结果:
字符串的长度
string.length,返回值是number型
向浏览器进行内容的输出
document.write
var str="hello world!";
document.write(str.substring(3,6));
document.write(str.substr(3,6));
document.write(str.indexOf("hello")+"<hr/>");
document.write(str.indexOf("world")+"<hr/>");
document.write(str.indexOf("www")+"<hr/>");
运行结果:
内置函数
1、字符函数
var str = "520134199906061234";
console.log(str.indexOf(1,4));
console.log(str.indexOf(7));//结果是-1说明str里面没有7
console.log(str.substr(0,3));//520
console.log(str.substring(0,3));//520 算前不算后
console.log(str.substr(6,4));
console.log(str.substring(6,10));
console.log(str.charAt(16)); //第16个值
var s = "aa,ttt,121,gg,kk,aa,bb";
var arr = s.split(",");
console.log(arr[2]); //第二个
console.log(s.concat(",55",",77",",00"));//后面添加字符串
console.log(arr.concat("55","77","00"));
console.log(s.replace("aa","doke").replace("aa","doke")); //正则表达式
console.log(s.replace(/aa/g,"doke"));//更改aa为doke
运行结果:
内置函数
1、日期函数
- date:获取当前的日期
- getDate
- getDay
- getMonth
- getFullYear
- getHours
- getSeconds
- getMinutes
var d1 = new Date();//获取当前时间
var d2 = new Date("2021-2-5 10:58:58");//输入时间
console.log(d1);//输出当前时间
console.log(d2.getDate()); //输出日期 5
console.log(d2.getMonth()+1);//输出月 2
console.log(d2.getFullYear());//输出年
console.log(d2.getHours());//输出小时
console.log(d2.getMinutes());//输出分钟
console.log(d2.getSeconds());//输出秒
var n = d2.getTime()-d1.getTime();//计算从时间d1到时间d2的天数
console.log(n/(24*3600*1000));//输出时间
运行结果:
改变当前时间在输出格式
function fun_fmtDate(){
var d1 = new Date();
var yyyy,mm,dd,hh,mi,ss;
var time;
yyyy=d1.getFullYear();
mm=d1.getMonth()+1;
dd=d1.getDate();
hh=d1.getHours();
mi=d1.getMinutes();
ss=d1.getSeconds();
time= yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss; //将当前时间变成2020-8-14 10:00:00的格式
return time;
}
console.log(fun_fmtDate());
输出:2020-8-14 22:7:51
2、数学函数
- round 取整数
- max 最大值
- min 最小值
- abs 绝对值
var n=32.864;
console.log(Math.round(n)); //取整,四舍五入
console.log(n.toFixed(2)); //小数点后两位,四舍五入
console.log(n.toFixed(0)); //小数点后0位,四舍五入
console.log(Math.max(3,-9,81,0)); //最大值
console.log(Math.min(3,-9,81,0)); //最小值
console.log(Math.abs(3)); //3的绝对值
输出:
ceil、floor
var num=Math.ceil(189.99); //向下取整
var num2=Math.ceil(189.09);
console.log(num);
console.log(num2);
var num3=Math.floor(189.99);//向上取整
var num4=Math.floor(189.09);
console.log(num3);
console.log(num4);
输出:
数组栈方法
- push()添加到数组的尾部
var colors=new Array("red","blue");//定义数组
colors.push("green");//添加数据
console.log(colors);
输出:
- unshift()添加到头部
var a=[49,2,79,4];//定义数组,赋值
size=a.unshift(2,46);//数组前面添加元素
console.log(a);
console.log(size);//输出数组的长度
输出:
- pop()删除最后一个元素,返回被删除的元素
var b=[104,63,87,2,97];//定义数组,赋值
var n=b.pop();//删除最后一个元素赋值给n
console.log(n);
console.log(b);
输出:
- shift()删除第一个元素
var c=[104,63,87,2,97];//定义数组,赋值
var m=c.shift();//删除第一个值并赋值给m
console.log(m);
console.log(c);
输出:
- join()数组中的所有元素放入一个字符串中
var x=[2,5,7,3];//定义数组
var str=x.join("-");//放入字符串str中,中间用-间隔
console.log(str);
输出:
- reverse()顺序颠倒
var nums=[3,6,4,77];
nums.reverse();//数组元素顺序颠倒
console.log(nums);
输出:
- sort()排序
var a1=[5,7,32,8,-1];
console.log(a1.sort());//排序
输出:
从小到大排序:
var a1=[5,7,32,8,-1];
console.log(a1.sort(function(a,b){
return a-b;
}));//从小到大排序
console.log(a1);
输出:
- concat()连接
var arr1=["a","b","c"],arr2=["d","e","f"],arr3;//定义三个数组
arr3=arr1.concat(arr2);//将arr1和arr2的元素连接赋给arr3
console.log(arr3);
输出:
- slice()截取
var x1=["red","green","blue","yellow"];
var x2=x1.slice(2);//截取从2位置往后(索引值)
var x3=x1.slice(1,3);//截取1位置到3位置,算前不算后
console.log(x2);
console.log(x3);
输出: