引言
JavaScript是一门嵌入式编程语言,主要是用于开发交互式的html页面（比如轮播图、定时弹广告、注册检测等），它是嵌入到html中，而且这个语言不需要编译,直接用浏览器就可以运行。
我们学习一门新的编程语言： 常量/变量 数据类型 if,switch 循环for,while 函数 事件 事件和函数绑定
js中的分类: ECMAScript：js的核心语法 BOM:浏览器对象（代表整个浏览器） DOM:Document Object Model.浏览器中的元素和内容
1、引入JavaScript的两种方法
内嵌式:
必须在一个标签<script>的开始和结束标签之间写
<script type="text/javascript"> 写js代码 </script>
JS代码写在<head>标签中
外联式:
写在另外一个文件,但是文件的后缀必须为.js
在HTML中通过<script>标签引入刚刚写的js文件
假设我们已经写了一个aa.js的外部js文件
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="外部js的路径" charset="utf-8"> //不能再次写代码 </script>
2、JavaScript基本语法
变量的命名规则：和java基本类似
变量的声明：
在java中: 数据类型 变量名; int a;
在JavaScript中:
var 变量; //注意: 在js中变量如果没有赋值 默认值 undefined赋值: a.定义变量同时赋值 var a = 10; b.先定义后赋值: var a; a=10;a="abc";
数据类型（弱类型语言：赋什么值，这个变量它就是什么类型）:
基本类型: a.Undefined 只有一个值 undefined,当定义变量并且不赋值的时候,默认值就是undefined b.Null 只有一个值 null,空值,但是在ECMAScript中把他们定义成了相等 c.Boolean，有两个值 true 和 false d.Number，表示任意数字 1 10000000000 3.13 3.13456732345678 J e.string,表示字符串,在js中字符串必须用""或者''引起来 引用类型: 也是一种叫做类(class),但是我们一般不会自己创建对象,而是直接使用 JS已经给我们准备好的对象, 所以说JS是基于对象,而不是面向对象
这里的输出就是这个age变量的引用类型
3、运算符:
算术运算符和逻辑运算符（与&&或||非!）：和java一模一样
比较运算符:
"=="：称为值等,只比较两个数据的值,不考虑类型 比如
var a = "10" a==10 //输出值为true，因为值一样
"==="：称为全等，即比较类型 也比较数值, 比如
var a = "10" a===10 //这是false,因为类型不一样
4、把其他类型的变量转换成Boolean类型
可以把其他其他类型的变量转换成Boolean类型的值，对应的转换关系如下：
转换规则
Tip：Boolean类型如果参与运算,那么true转成1，false 转成0，然后参与运算
等性运算
Tip：上面NaN==NaN，输出是false，原因是NaN代表“不是一个数字”，双等于号比的是里面的值，这个NaN可能指的是‘A’也可能是'B'，所以显然不一定相等
5、JavaScript基本操作:
alert(内容/变量); //以消息提示框的形式弹出内容或者变量的值JavaScript中的函数:
function 函数名(参数列表){
函数体;
}调用的格式:
函数名(实际参数);
函数也是写在<script>
Tips：
参数列表中，只需要写参数名，如果多个参数用逗号相隔
函数和java中的方法一样,不调用不运行
函数调用的时候,可以传递任意个实际参数，如果实际参数的个数小于形式参数个数 那么多出来的形式参数默认值为undefined，如果实际参数的个数大于形式参数个数 那么自动忽略多余的实际参数
JavaScript中没有重载这个概念，如果函数名一样，后面定义的函数会覆盖前面定义的函数，也就说在前面定义的函数相当于没写
本文内容：
`#点击事件
·#控制表单提交
·#正则表达式使用
·#定时器
·#修改CSS样式
1、绑定点击事件
当用户点击"submit"按钮时 会发生"表单提交事件"
如何绑定？
案例
注意这里onsubmit绑定的就是一个JavaScript的函数，而这个点击监听器是包含在<form>标签中的属性。
同时，我们发现绑定点击事件不是绑定在<form>的子标签上，而是直接绑定在<form>标签上！！！这个点击事件应该是自动寻找子标签中type="submit"的元素，然后自动绑定的。
Tip：JavaScript中如果某一个代码写错了，是没有错误提示的！！！所以最好是写一个小功能就立马进行测试。
2、返回值控制
显然这里的是一个发生在表单<form>中的点击事件，虽然这里绑定了点击事件，但是实际上只要点击这个
image.png
注意绑定点击事件的时候是onsubmit="return tijiao()"，这里是返回tijiao()这个函数的返回值。
同时我们在function tijiao()中return true;这个自然就是反映到onsubmit="return tijiao()"中就是onsubmit="true"，此时的效果是什么？
效果是该表单被成功提交！！！
如果是onsubmit="false"，那么此时的效果是什么？
效果是该表单没有被提交！！！
3、获取到<form>表单中的子标签的对象
相当于Android中的findViewById，这个代码是：
var inputElement = document.getElementById("uname");var username = inputElement.value; //对获取到的元素对象进行下一步操作4、JavaScript正则表达式使用
有如下几种正则表达式使用方法
var b = "需要判断规则的字符串".matches(/^正则表达式$/);
如果b是true 满足规则 如果b是false 不满足规则/^正则表达式$/.test("需要判断规则的字符串");[推荐]
5、定时器
引言
window对象是BOM中的内置对象,这个对象又称为全局对象，是用于在html页面中弹出一个对话框的效果
window.setInterval(code,millisec); //这个代码的含义就是循环执行这个code，间隔时间是自己设置的millisec的时间 code:代码段，可以是： a. "正常js代码" b. 函数名 millisec:时间间隔,单位是毫秒
这段代码的意思：设置一个定时器,这个定时器每隔millisec毫秒会触发一次,每次都会执行code代码段（window对象可以不写,直接调用setInterval方法也可以,但是不建议不写）
定时器
setInterval和setTimeout：
设置定时器：
setInterval(code,毫秒值);//周期定时器,反复周期执行，调用这个方法会返回一个id值，这个id用于取消定时器用setTimeout(code,毫秒值);//一次性定时器,只会执行一次，调用这个方法会返回这个定时器的id值，这个id用于取消定时器用取消定时器：
clearInterval(你要取消的定时器的id);//取消周期定时器clearTimeout(你要取消的定时器的id);//取消一次写定时器
6、修改一个<>标签的样式属性值
注意是样式属性值（即是用CSS写在<style>中那部分属性值），这部分属性值修改方法如下：obj.style.属性 //获得指定“属性”的值obj.style.属性=值 //给指定“属性”设置内容
Tip1：如果是用HTML写的属性值，直接
obj.属性=···即可Tip2：很多样式的值是string类型的，不是Number类型的！！
代码示例1
代码示例2
注意这里，window.代表的就是整个页面加载完成之后的监听器。这里的代码综合运用了5、6两个小节的内容。
但是这里你会发现最终的效果是无法让div扩大四倍的！！！！！！
为什么？因为这里var h和var w得到的是string类型的（即“100px”）！！！所以我们需要先进行类型转换：
类型转换
然后后面赋值的时候也要进行改变：
加"px"字样
这样就可以了
7、关于表单标签的内容和事件触发
获取HTML某个标签的内容
标签对象
···.innerHTML获取到该标签的内容，开始标签和结束标签之间的都是内容使用innerHTML更改标签内容
注意里面甚至可以直接写<h1>这种标签，JavaScript会自动对这个进行解析
有关事件的触发事件:
onsubmit：提交按钮点击后 触发的表单提交事件
onblur：失去焦点事件,本来鼠标是选择该标签的，然后选中了别的标签的时候
onfocus：获取焦点事件,本来鼠标是选择别的标签，然后选中了该标签
function部分
<body>中标签部分代码
作者：ZzzRicardo_Yue
链接：https://www.jianshu.com/p/afd635784e19
x
共同学习，写下你的评论
评论加载中...
作者其他优质文章
