前端（二）——JavaScript（JS介绍、数据类型、运算符、函数、d框与事件）、JS与DOM（获取节点对象、改变html、改变css样式）

前端（二）——JavaScript（JS介绍、数据类型、运算符、函数、d框与事件）、JS与DOM（获取节点对象、改变html、改变css样式） 前端（二）——Javascript 一、Javascript 介绍 1、Javascript 是什么

Javascript 简称 “ js ”。关于 js 是什么，这里不多叙述，百度到处都有，这里截图百度百科的一段来介绍：

2、js 组成部分

1.ECMAscript：主要提供一些js的基础的语法(重点)
2.文档对象模型：DOM 主要用于来 *** 作节点(html标签)对象(重点)
3.浏览器对象模型：（BOM）主要提供了一些与浏览器进行交互的接口与方法，主要用于与浏览器进行交互(重
点)

3、js 作用

1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。

二、JS 基础语法

由于很多东西都跟 java 很像，这里就快速略过

1、变量

1.概念：在程序运行期间，值会发生改变的量就是变量，例如：年龄、余额。

2.js定义变量的语法:var 变量的名称 = 变量值

3.注意点：
	A.关键字 var js中是在赋值的时候确定其数据类型
	B.js中变量名称不能与关键字重名

关键字很多都跟 java 一样，这里就不说了。

2、数据类型 a、基础数据类型

Javascript中： 
Number 数值类型(包括小数与整数) 

string(字符串类型) 

boolean(布尔类型)
 
undefined(未定义类型)

null 空类型

typeof()==>获取其数据类型

b、引用数据类型

1.java中引用数据类型:对象 数组 集合 .....

2.js中的对象也表示引用数据类型，对象的表示形式就是 json {}==>对象 []==>数组

3.例子：js 表示一个学生对象：{uid:12,uname:"张三",upwd:"123456"}。

4.例子：js中的数组：[{uid:12,uname:"张三",upwd:"123456"},{uid:12,uname:"张三",upwd:"123456"}]

3、运算符 a、逻辑运算符

b、算术运算符

c、关系运算符

d、赋值运算符

e、三元运算符

1.语法：表达式1 ? 表达式2 ：表达式3
2.注意点:
	A.表达式返回值类型必须是 boolean 类型
	B.表达式2与表达式， 可以是任意的数据类型，但是必须是同一种数据类型。

4、选择结构

if 和 else 选择结构 或者 switch 结构都跟 Java 基本一样。这里懒得介绍了

5、循环结构

for 循环和 while 循环 和 do…while 循环基本都跟 Java 一样，这里懒得介绍了。

6、函数

1.js方法的语法定义:
	function 方法的名称(参数列表){
		方法体
		return 返回值
	}
2.注意点:
	A.function 是js定义函数的关键字
	B.js中定义方法的参数列表不需要声明其数据类型

三、JS 的应用 1、js 的三种d框

2、js 事件

js 事件很多，这里就只举例一部分。

1.onchange————当内容或者条目发生改变时，触发事件。
2.onclick————点击事件
3.onload————页面加载完成时，触发事件。
4.onmouseout————鼠标移出元素时，触发事件。
5.onmouseover————鼠标移入元素时，触发事件。
6.onsubmit————表单提交的事件。

四、JS 与 DOM 1、DOM 简介

浏览器在加载 html 标签的时候，会形成一个 dom 树对象，通过 dom 对象来获取 html 中的元素。

2、获取节点对象

注意：获取节点对象这里，除了 ID 是只返回一个，其他的都返回的是一个数组，哪怕只有一个元素，也是返回一个数组！

3、改变 html

a、innerHTML

举个例子：

点击之后，原本的文本就会发生变化。

点击之后：

或者获取其中的文本）：

b、innerText

点击之后虽然会发生变化，但是不能识别标签：
点击后：

或者获取其中的文本：

c、getElementsByTagName(“img”)[0].src（"…"）

这种方式可以改变图片。

4、改变 css 的样式

语法：节点对象.style.属性名="属性值"