目录
一、简介:
全称:JavaScript,是一种脚本语言
动态页面:可以人机交互
静态页面:不能人机交互
不需要安装:浏览器自带JS脚本
BOM:浏览器对象模型
DOM:文档对象模型
二、使用方法:
1.内置:
<body>
<script type="text/javascript">
</script>
</body>
2.引用外部JS文件
<script type="text/javascript" src="xx.js"></script>
可以在任何位置写,在head内或body内都行。
弹窗:
<script type="text/javascript"> /*习惯写在head里*/
alert("haha");
</script>
三、Js变量:
是弱数据类型:
创建时无数据类型的区分:法① var x=1,y="11111";
法②var x; x=1;
而赋值时会区分。
四、控制台调试:
var x;
x="123+1";
console.log(x+1);
五、自定义函数:
1.创建:
法①可以先使用后定义
function 函数名(){
代码段;
return ***; /*根据需要,不是必须的*/
}
法②函数表达式,必须先定义后使用
var 函数名=function(){
return ***;
}
2.练习:
①注意函数必须要调用!
function add(){
alert("s");
}
add(); /*调用*/
②需要时要写实参!
function add(x,y){
alert(x+y);
}
add(1,2); /*要写实参与形参对应*/
③需要时要写返回值
var m=function(x,y){
var z=x+y;
}
alert(m(1,2));
出错:
修改:
var m=function(x,y){
var z=x+y;
return z; /*注意*/
}
alert(m(1,2));
六、数据类型及转换
定义时不区分,使用时要区分。
类型 | 作用 |
number | 数字类型(包括整型和浮点型) |
string | 字符串类型(必须放在单引号或双引号中) |
boolean | 布尔类型(值有2种:true,false) |
underfine | 未定义(一般指已声明但未赋值的变量) |
null | 空对象类型,var x=null和var x=" "有区别 |
object | 对象类型,在js里常见的有window,document,array等 |
NaN | 是Number的一种特殊类型,isNaN(),若是数字返回 false,否则返回 true |
1.分类:
①强制类型转换:
parseFloat() 转换为浮点型
Numver() 包括整型和浮点型
Boolean() 布尔类型
parseInt() 转换为整型
②自动类型转换(即隐式类型转换)
2.练习:
①
var str="233";
console.log(parseInt(str)+1);
console.log(str+1);
②
var str="233";
console.log(parseInt(str)+1);
console.log(str*1+1); /*“ str*1 ”是自动转换为数值类型*/
③字符串为字母
a.
var str="abc";
console.log(parseInt(str));
b.
var str="abc";
console.log(isNaN(str));
c.
var str="123";
if(isNaN(str)==false){ /*判断条件可简化为:!isNaN(str)==false*/
console.log(parseInt(str));
}else{
console.log("错误");
str=0;
}
③
a.全是数字
var str="123";
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));
b.全是字母
var str="abc";
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));
c.数字开头,字母结尾:
var str="123abc";
console.log(parseInt(str)); /* 会忽略后置的字母*/
console.log(parseFloat(str)); /* 会忽略后置的字母*/
console.log(Number(str)); /* 不会忽略后置的字母*/
d.以0开头的数字
var str="0123";
console.log(parseInt(str)); /* 会忽略后置的字母*/
console.log(parseFloat(str)); /* 会忽略后置的字母*/
console.log(Number(str)); /* 不会忽略后置的字母*/
e.小数
var str="0123。654";
console.log(parseInt(str)); /*不会四舍五入*/
console.log(parseFloat(str)); /*不会四舍五入*/
console.log(Number(str)); /*不会四舍五入*/
f. null
var str=null;
console.log(parseInt(str)); /*不会四舍五入*/
console.log(parseFloat(str)); /*不会四舍五入*/
console.log(Number(str)); /*不会四舍五入*/
g. “ ”
var str="";
console.log(parseInt(str)); /*不会四舍五入*/
console.log(parseFloat(str)); /*不会四舍五入*/
console.log(Number(str)); /*不会四舍五入*/
总结:字符向数值转换常用且易出错
④
var str="";
console.log(Boolean(str));
var str=null;
console.log(Boolean(str));
对字符串,有内容为true,无内容为false。对数值,除0外皆为true。
七、变量作用域:
全局变量:函数内部创建,其他函数不能使用
局部变量:函数外部创建,函数之间可以共享
八、比较运算符
1. 包括:
>、 ≥、!=、<、≤
2.优先级:
自上而下——由高到低
符号 | 描述 |
() | |
++、-- | 自加 自减 |
* / % | 乘 除 取模 |
+ - | |
< 、<=、>、>= | |
==、!= | 等于、不等于 |
&& | |
|| | |
?: | 三目运算符 |
= | 赋值 |
九、程序控制语句
if(){
}else if(){
}else{
}
switch(判断对象){
case a:
xxxx;
break;
case b:
xxxx;
break;
default:
xxxx;
break;
}
注意:case判断的只能是等于关系。
for (var i = 0; i <= 0; i++) {
}
while(){
}
do{
}while();
十、内置函数
1.字符函数
①
var str="abcdefghigklmnopqrstuvwyz";
console.log(str.substr(0,3)); /*参数1:起始位置
参数2:截取长度*/
console.log(str.substring(0,3)); /*参数1:起始位置
参数2:结束位置
左闭右包*/
console.log(str.charAt(6)); /* 获取某位字符 */
console.log(str.length); /*求长度*/
console.log(str.indexOf("s")); /*查找s第一次出现的位置*/
console.log(str.indexOf("f",4)); /*查找编号为4的位置开始查找参数1第一次出现的位置,没有则返回-1*/
注意从0开始。
②
var str="aa,ttt,k,aa,bb";
var arr=str.split(","); /*以console.log(arr);,为分割将该字符串存到arr这个数组中*/
console.log(arr);
console.log(arr[0]);
console.log(str.concat(",cx",",j","x","2")); /*将参数连接起来添加到字符串str中*/
console.log(arr.concat("cx","j","x",2)); /*将参数连接起来添加到数组arr中*/
console.log(str.replace("aa","cxj")); /*用参数2替只替换一个参数1*/
2.日期函数
Date | 对日期初始化,获取当前系统日期或指定一个日期 |
getDate | 获取当前几号 |
getDay | 获取当前周几,0表示周一 |
getMonth | 获取当前月 |
getFullYear、getYear | 获取当前年份,getYear现在不怎么用 |
getHours、getMinutes、getSeconds | 获取当前小时、分钟、秒 |
getTime | 获取毫秒数 |
var x=new Date(); /*获取当前系统时间*/
console.log(x);
var y=new Date("2021-7-3 9:10:59"); /*指定时间*/
console.log(y.getDate());
console.log(y.getMonth()+1); /*月份从0开始:0——11*/
console.log(y.getFullYear());
console.log(y.getHours());
console.log(y.getMinutes()+1); /*月份从0开始:0——11*/
console.log(y.getSeconds());
var z=new Date("2022-6-15");
var m=z.getTime()-y.getTime(); /*距离2022.6.15还有多少毫秒*/
console.log(parseInt((m/(24*3600*1000)))); /*转换为天数的整数*/
/*自定义函数,规定日期格式*/
function fun1(){
var x=new Date();
var yyyy,mm,dd,hh,mm,ss;
yyyy=x.getFullYear();
mm=x.getMonth()+1;
dd=x.getDate();
hh=x.getHours();
mm=x.getMinutes();
ss=x.getSeconds();
var time=yyyy+"-"+mm+"-"+dd+" "+hh+"-"+mm+"-"+ss;
return time;
}
console.log(fun1());
3.数学函数
var x=15.68354;
console.log(Math.round(x)); /*四舍五入*/
console.log(x.toFixed(2)); /*保留2位小数,四舍五入*/
console.log(x.toFixed(0));
console.log(Math.min(2,6,8,1));
console.log(Math.max(2,6,8,1));
console.log(Math.abs(-4));
4.数组
var arr1= new Array(); /*实例化创建:声明或创建了一个不指定长度名为arr1的数组*/
var arr2= new Array(5); /*声明或创建了一个长度为5名为arr2的数组*/
var arr3= new Array(2,5,"e","f",8); /*声明或创建了一个带默认值的数组*/
var arr4=[2,5,"e","f",8]; /*创建一个数组并赋值的简写,又称隐式创建数组*/
console.log(arr4[0]);
console.log(arr4[5]); /*下标超界*/
/*专门遍历数组的for循环*/
for(var x in arr4){ /*x保存的是数组的下标*/
console.log(x);
console.log(arr4[x]);
}
/*普通for循环*/
var n=arr4.length;
for(var i=0;i<n;i++){
console.log(arr4[i]);
}