js语法基础入门（1.2）

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{

                width: 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