day3——JavaScript

一、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