1.4.查找元素的方法
1.4.1.查找元素的方法
JavaScript可以去操作html元素，要实现对html元素的操作，首选应该找到这个元素，有点类似于css中的选择器
html代码：
<div id="box">螺钉课堂</div>
js代码：
oBox = document.getElementById('box')
console.log(oBox)
1.4.2.练习
把上面代码手写5遍，默写一遍
1.5.事件、函数、以及属性操作
1.5.1.事件和函数
事件就是发生的某件事情，在浏览器中表现为用户和页面交互时产生的一些行为，例如，鼠标点击、鼠标移入、鼠标抬起、键盘按下等
函数是什么？用人话讲，函数在代码中表现为一些代码的集合，把许多语句完成等功能封装起来，方便以后调用，这种封装起来的代码块可以理解为函数的表现形式，只需要记住一句话即可，函数是具有一定功能的代码块
函数定义：
function fn(){
alert(1)
}
函数调用：
fn()
事件函数绑定：
oBox = document.getElementById("box")
oBox.onclick = function(){
alert(1)
}
onclick 点击事件，当用户点击某个元素的时候发生，上面代码的执行顺序是， 当用户去点击box这个元素的时候，会去执行等号后面等函数，这个函数执行就会弹出数字 1， 这里要注意的是，如果用户不点击box这个元素，alert就不会执行
1.5.2.html属性操作
innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
<script type="text/javascript">
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerHTML = 'hello world!!!'
}
</script>
</body>
</html>
innerText
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerText = 'hello world!!!'
}
innerText和innerHTML的区别
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerText = '<a style="color:red">hello world!!!</a>'
}
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerHTML = '<a style="color:red">hello world!!!</a>'
}
获取／设置输入框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<input type="text" id="ipt" />
<script type="text/javascript">
oBtn = document.getElementById('btn')
oIpt = document.getElementById('ipt')
oBtn.onclick = function(){
// 获取值
console.log(oIpt.value)
// 设置值
oIpt.value = '螺钉课堂'
}
</script>
</body>
</html>
设置html元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
<script type="text/javascript">
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.style.backgroundColor = "orange"
}
</script>
</body>
</html>
1.5.3.练习
在输入框中输入两个数字，点击按钮的时候，计算出两个数字的差并且显示到id为result的div中
点击 + 号， id为p1的p元素中的字体变大2个像素 点击 - 号， id为p1的p元素中的字体变小3个像素
1.6.数据类型基础和操作符
1.6.1.什么是数据类型
用人话讲，数据类型也就是给数据分类，在JavaScript中将数据到值划分成了不同到类型，主要包括基本数据类型与引用数据类型。这里主要讨论JavaScript的基本数据类型：数字、字符串、布尔、undefined、null，其中undefined和null也有人称之为特殊数据类型
1.6.2.为什么要有数据类型
num1 = prompt('请输入数字1:')
num2 = prompt("请输入数字2:")
alert(num1 + num2)
alert(num1 - num2)
输入1：10， 输入2: 20 结果： 1020 上面结果运行出来结果和想想的不一样，最主要的原因就是数据类型不对，默认情况下，prompt获取的值是字符串类型，+号不仅是数学上的运算符号，在js中也表示字符串的连接
从上面的例子可以看出，如果不对数据进行分类，无法得到规定的结果，也没法进行计算
1.6.3.什么是运算符？
运算符就是用来表示具体运算规则的符号，例如数学计算中的加减乘除就是具体的运算规则，我们分别用“＋ － * /”等符号来表示
算术运算符
console.log(97%10);//输出7
console.log(100%10);//输出0
console.log(-97%10); //输出－7
console.log(97%-10); //输出7
%表示求两个数相除的余数，符号和被除数一致
比较运算符
比较运算符就是比较两个数据之间的大小，是否相等，最终得到一个布尔型的值。比较运算符包括：== != > >= < <= =(全等于) !(不全等于)
var a=5;
var b=6;
console.log(a>b);//false
console.log(a<b);//ture
比较运算符中，需要注意的是== 和 ===的区别，两个等号只是比较两边的值是否相等，三个等号不仅要比较两边的值是否相等，还要看两边的类型是否一样，只有类型和值都一样了才返回true
1.6.4 练习
在输入框中输入一个三位数，点击按钮后，在id为result的div中输出这个数的个位
1.7.流程控制
1.7.1.什么是流程控制？
程序的流程控制就是指程序运行时，个别指令运行或求值的顺序。复杂的程序时由若干个基本结构组成，每个基本结构可以包含一条或者若干条语句。程序中语句的执行顺序称为程序结构，如果程序语句是按照书写顺序执行的，则称之为顺序结构，如果是按照某个条件来决定是否执行，则称之为选择结构，如果某些语句要反复执行多次，则称之为循环结构。程序的运行顺序就是由这3大结构控制着，所有大语句都离不开这3大结构。学会来这3大结构，就可以写出比较复杂大程序了。下面我们来看看现实生活中一个比较复杂大程序。 用人话说，流程控制就是可以控制程序的执行顺序，哪句被执行，哪句不被执行，哪句执行一次，哪句执行多次
1.7.2.条件分之-if语句
num1 = prompt("请输入数字")
if(num1 >= 60){
console.log("及格")
}
if(num < 60){
console.log("不及格")
}
用if...else 语句合并上面两句代码
num1 = prompt("请输入数字")
if(num1 >= 60){
console.log("及格")
}else{
console.log("不及格")
}
1.7.3.练习
实现一个简单版计算器，支持加减乘除运算 用户输入数字1和数字2，选择进行何种运算，点击计算按钮，得到运算结果
螺钉课堂视频课程地址：http://edu.nodeing.com