一、JavaScript介绍
什么是JavaScript?
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
特点
- 直译性(解释器直接执行)
- 安全性(js不能直接操作磁盘内容)
- 跨平台性
JavaScript的作用
- 对html,css的样式实现动态修改
- 对事件作出响应
- 数据校验
- 实现后台操作
JavaScript引入方式
- Head标签中编写
二、js的基本语法
变量
var 变量名 = 值;
双引号和单引号没有区别
运算符
算术运算符:+,-,*,/,++,%
注意:/有小数
赋值运算符:=,+=
比较运算符:>, <, ==,>=,<=,!=,= = =
注意:==只比较数值,= == 比较数值和类型
数据类型
- number数值类型
- String字符串
- boolean布尔类型
- null空类型
- array数组类型
- object对象类型
- Undefined
流程控制
- 分支:if/switch
- 循环:while /do-while/for/for(…in…)
var arr = ["aa","bb","cc"];
/*for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}*/
for(var i in arr){
console.log(arr[i]);
}
三、js的函数
1.自定义函数
//声明一个无参函数
function func(){
alert(1);
}
//调用函数
//func();
//带参函数
function calc(num1,num2,num3){
console.log(num1+num2)
}
//calc(1,9);
//带返回值
function calc1(num1,num2){
return num1 + num2;
}
var num3 = calc1(1,2);
//console.log(num3)
2.内置函数
parseInt()将字符串转换为整数
console.log(parseInt(a+b));
parseFloat()将字符串转换为小数
console.log(parseFloat(a+b))
isNAN判断是否为数字
isNaN(c)
eval()实现字符串的运算
console.log(eval( "3+4*4"))
四、js的操作
dom:文档对象模型。定义了html的访问和操作的标准方法,将整篇html文档映射为一颗dom树,有元素节点,属性节点,文本节点
节点的访问:
//通过id获取
var oP = document.getElementById("p1");
//var oDiv = document.getElementById("div1");
//通过标签名称
var aP = document.getElementsByTagName("p");
//console.log(aP[0]);
//通过name值获取元素
var aInput = document.getElementsByName("username");
console.log(aInput);
对html的访问和操作
内容获取和修改:
//获取值
console.log(oP.innerHTML);
//修改值
oP.innerHTML = "aaa";
属性的获取和修改
属性的获取和修改:
节点.attrName=value;
对样式的修改
oP.style.color="red";
oP.style.fontSize="12px";
五、js的事件
1.UI事件
页面加载事件:onload
window.onload=function(){
var oP = document.getElementsByTagName("p")[0];
console.log(oP);
}
页面滚动事件:onscroll
document.onscroll=function(){
console.log("aaa");
}
鼠标事件
- Onclick:单击事件
- Ondalclick:双击事件
- Onmouseover:鼠标移入事件
- Onmouseout:鼠标移出事件
键盘事件
- onkeydown: 按键按下时触发
- onkeyup: 抬起时触发
document.onkeydown = function(ev){
if(ev.keyCode==13){
console.log("回车");
}
}
document.onkeyup = function(ev){
console.log("keyup");
}
焦点事件
- onfocus获取焦点
- onblur失去焦点
六、正则表达式
- /…./:模式开始和结束
- ^:开始
- $:结束
- \d:一位数字 [0-9]
- \D:一位非数字
- \w:一位数字,字母和下划线[a-zA-z0-9]
- .:除了换行之外的任意字符
- {m}:出现m次
- {m,n}:出现m-n次
- {m,}:出现m到无限次
- +:1-无限次
- *:0-无限次
- ?:0-1次
字符串匹配正则表达式 返回值为null不能匹配
console.log(str1.match(regex));
console.log(regex.test(str1)); true/false