js基础、语法、事件及函数

一、js基础

js是世界上最流行的语言之一，是一种运行在客户端的脚本语言
（不需要编译）
1、作用
表单动态校验，网页特效，服务器开发，桌面程序，app，物联网，游戏开发
2、浏览器执行js

• 渲染引擎：用来解析HTML和css，俗称内核
• js引擎：也称为js解释器，用来读取和处理js代码
  3、组成
  ECMAScript（js语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）
  4、书写位置
  （1）行内式

<input type="button" onclick="alert('弹出内容')">

（2）嵌入式

<script>
  alert('弹出内容');
</script>

（3）外联式
新建js文件

<script src="文件名"></script> 引入

二、js语法

1、输入输出语句


2、变量
变量是用于存放数据的容器，可以通过变量名来获取和改变数据
（1）使用

• 变量声明：var 变量名;
• 赋值：变量名=10；
  或者
• var 变量名 = 10;（初始化）
  （2）变量语法扩展
• 更新变量：一个变量被重新赋值后，原有的值就会被覆盖
• 可同时声明多个变量，用逗号分隔
• 特殊情况：a.只声明不赋值：结果是undefined
  b.不声明不赋值：报错
  c.不声明只赋值：可以使用
  （3）命名规范
  3、数据类型
  js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
  变量的数据类型是可以变化的
  （1）分类
• 简单数据类型
  
  a.数字型
  数字型的最大值：alert(Number.MAX_VALUE)
  数字型的最小型：alert(Number.MIN_VALUE)
  数字型的三个特殊值
  用isNaN()判断是否为数字
  b.string字符串型
  推荐使用单引号
  转义字符
  字符串长度：str.length
  字符串的拼接：两个字符串（其他类型也可以）用加号拼接
  c.布尔类型
  true当1，false当0
  typeof来获取变量的数据类型（prompt取过来的是字符型）
  （2）数据类型转换
• 转换为字符串
  
• 转为数字型
  
• 转为布尔型
  Boolean()函数
  代表空、否定的值会被转化成false，其余值都为true
  4、运算符
  运算符也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号
  （1）算数运算符
  +、-、*、/、%
  不能直接用两个浮点数相比较
  （2）自增自减运算符
  前置：++num 先自加1，后返回值
  后置：num++ 先返回值，后自加1
  （3）比较运算符（关系运算符）
  
  == 会默认转换数据类型
  （4）逻辑运算符
  
  **短路运算：**当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算后边的表达式的值
• 逻辑与：表达式1&&表达式2
  如果第一个表达式的值为真，则返回表达式2
  如果第一个表达式的值为假，则返回表达式1
• 逻辑或：表达式1||表达式2
  如果第一个表达式的值为真，则返回表达式1
  如果第一个表达式的值为假，则返回表达式2
  （5）赋值运算符
  
  运算符优先级
  
  5、流程控制-分支
  由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果
  两种分支语句：
• if语句
• switch语句
  （1）if语句

if(条件表达式){
执行语句
}

if (条件表达式) {执行语句1}
else {执行语句2}

if (条件表达式1) {语句1}
else if (条件表达式2) {语句2}
else {语句3}
<!--多分支语句-->

• 三元表达式

条件表达式 ？ 表达式1 ： 表达式2

（2）switch语句

switch(表达式) {
     case value1:
         执行语句1； break;
     case value2:
         执行语句2； break;
     ...
     default:
         执行最后的语句；
    }

表达式的值与case里的值相匹配时必须是全等，即值和数据类型一致
6、流程控制-循环
可以重复执行某些代码
三种类型循环语句：

• for循环
• while循环
• do…while循环
  （1）for循环

for(初始化变量;条件表达式;操作表达式) {循环体}

断点调试
F12–>sources–>找到要调试的文件–>在某一行设置断点
watch：监视变量的值的变化
F11：程序单步执行

• 在一行中打印多个图形：(追加字符串）

var str='';
for (var i=1;i<=5;i++){
     str=str + '图形';
     }

（2）while循环

while (条件表达式){
     循环体代码
     }

（3）do while循环

do {
     循环体
     } while (条件表达式)

先执行循环体，再判断条件
关键字：
（1）continue
continue关键字用于立即跳出本次循环，继续下一次循环
（2）break
break关键字用于立即跳出整个循环（循环结束）
7、数组
（1）利用new创建数组

var 数组名 = new Array();
<!--创建一个新的空数组-->

（2）利用数组字面量创建数组

var arr = [];

（3）获取（访问）数组元素

数组名[索引]

（4）数组的长度
"数组名.length"可以访问数组元素的数量
（5）新增数组元素
a.修改数组长度
b.通过修改数组索引的方式追加数组元素

三、函数

使某一代码块重复使用
1、使用
声明函数 + 调用函数

<!--声明函数-->
function 函数名() {
        函数体
        }
<!--调用函数-->
函数名();

2、带参数的函数

function 函数名(形参1,形参2...) {}
函数名(实参1,实参2...);

如果形参个数少于与形参个数，最终会取到形参个数
如果形参个数多于与形参个数，多余的形参定义为undefined，最终的结果是NaN
3、return语句

function 函数名() {
       return 需要返回的结果
        }

注：

• return后面的代码不会被执行
• return只能返回一个值，并且是最后一个值
• 如果没有return，则返回undefined
  4、arguments的使用
  当不确定有多少个参数传递时，可以用arguments来获取，arguments对象中存储了传递的所有实参
  
  不需要写形参，直接使用arguments访问
  5、函数的两种声明方式：
  （1）利用函数关键字自定义函数（命名函数）
  （2）var 变量名 = () {} （没有函数名）

四、事件基础

- DOM
文档对象模型，简称DOM，通过DOM接口可以改变网页的内容、结构和样式
（1）文档：一个页面为一个文档，DOM中使用document表示
元素：页面中所有标签都是元素，DOM中使用document表示
节点：网页中所有内容都是节点，DOM中使用node表示
（2）获取页面元素
a.根据ID获取：使用getElementById()方法获取元素，返回的是一个元素对象
b.根据标签名获取：使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合，返回的是获取过来的元素对象的集合，以伪数组的形式存储
还可获取某个元素（父元素）内部所有指定标签名的子元素：
element.getElementsByTagName(‘标签名’);
父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
c.通过HTML5新增的方法获取：
document.getElementsByClassName(‘类名’);
document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); 返回所有元素对象集合
（3）获取body和html元素
body：document.body
html：document.documentElement

事件是可以被js侦测到的行为（触发–响应机制）
**1、组成：**事件由事件源、事件类型、事件处理程序构成
（1）事件源：事件被触发的对象
（2）事件类型：如何触发，如鼠标点击（onclick）鼠标经过 键盘按下
（3）事件处理程序：如通过一个函数赋值的方式完成

<button id="btn">按钮</button>
<script>
   var btn = document.getElementById('btn');  事件源
   btn.onclick = function(){
          alert('内容');
          }

2、执行事件的步骤
获取事件源，注册事件（绑定事件），添加事件处理程序（采取函数赋值形式）
常见的鼠标事件