JavaScript 1

JavaScript 1

初识JavaScript

1

​ JavaScript 是是一种轻量级脚本语言,不能被编译,直接执行,js在浏览器当中是从上到下一行一行的执行，

当遇到错误的时候，就会停下来，不再执行。js是运行在script标签之中的，可以插入到html页面里。

script标签，现在一般把它放在页面的结尾部分。

2

​ Js它的核心是ECMAScript，它是一个标准。它描述并定义了js语言的语法、基本的对象，

			 \- 语法、类型、语句、关键字、保留字、运算符、对象

3 .

​ ECMAScript，它可以为不同宿主环境提供核心脚本的编程能力，宿主环境其实就是运行js的环境，

​ - 浏览器可以是一个宿主环境；

- 以前的flash，也是一个运行js的宿主环境；

• 现在流行的node，它更是一个运行js的宿主环境；

​ 例如，物联网流行的起来，它也是在硬件的层面上，实现一个可以运行js的运行环境，这也是一个宿主环境。

4.

​ 一个完整的JavaScript是由三部分构成，

​ - ECMAScript，js的核心标准

​ - BOM，浏览器对象模型

​ - DOM，文档对象模型

​ js是由事件驱动的,js想要运行,需要有事件触发,js才可以运行

输出语句

​

console.log()  // 在控制台打印
alert()		// 弹出警告框  会停留在这一处,点击确定才会往下执行,会阻塞js运行
document.write()

变量

变量，是用来保存数据的容器。声明一个变量，要使用var关键字，例如，var _val = 123;可以用来保存任何类型的值。

变量的生命周期

定义在函数中的变量,

​ - 函数被调用时，创建变量并赋值；

​ - 函数执行结束之后，变量就会被销毁。

在函数外部访问,会报错

​ 为什么会报错？

​ 1、从全局、局部作用域的角度考虑

​ 2、第二个角度来说，就是函数执行完了，_v的变量已经没了,所以再打印_v，会报错。

变量的命名方式

1、区分大小写；

2、字母、_、$，这三种开头

数据类型

基本数据类型

​ – 数字(Number),字符串(String),布尔(Boolean),undefined.null

​ —可以使用typeof 检测数据类型

​ --undefined只有一个值,就是undefined

​ --null, 空指针,在js中就是空对象的引用,不和任何值相等(es5中)

​ 引入null和undefined的目的，就是为了区分 空对象和未初始化的变量。

引用数据类型

​ --对象,数组…

if…else

if( 条件 ){
如果条件为true，执行这个逻辑分支
} else {
如果条件为false，执行这个逻辑分支
}
// 比较运算符   == 比较值是否相等   ===全等,比较值和数据类型是否相等

for循环

// 根据条件，可以多次循环执行的代码块；

for(起始条件1; 结束条件2; 运行条件3){
	//多次循环执行的代码块
}
for(var i = 0;i<arr.length;i++){
    console.log(arr[i]);
}

for循环嵌套

// 一般就二层，如果多于2层，说明你js设计有问题
for(var i = 0;i<arr.length;i++){
    for(var j = 0;j<arr.length;j++){
    console.log(arr[i]);
}
}

递增\递减运算符

++,--
var i=1;
i++   ++i// 相当于 i = i+1
i-- --i//相当于 i = i-1
/*
不论是前缀自增自减还是后缀自增自减,i的值都会改变,只是(i++,i--,++i,--i的值不同)
前缀自增,先自增后赋值,后缀自增先赋值,后自增
*/

数组

​ 在一个变量名里，保存一系列的值。数组成员以,号分隔。创建数组有很多方法，最常用的就是以字面量的方式创建.数组是一系列有序的数据集合(自己理解),有长度length

var xx = [];//这是创建一个空数组，保存在一个变量里；

//这是创建一个“有三个数组成员”的数组，并将其保存在一个变量里
var xx2 = [1,2,3];
xx2.length = 3  // 表示数组的长度，就是有几个数组成员
/*
	[下标]表示法获取数组整的成员  arr[0].....,数组索引从0开始
*/

对象

它是一组无序的键值对的集合

// 第一种创建方式 以字面量的方式创建
var xx = {a:1,b:2,c:3}
//这就是一个对象，它里面保存3组值。

for…in…循环

因为对象是无序的，所以它没有 .length 的属性值，不能使用普通循环

var _tempObj = {
	name:'我是老尚',
	age:'年满18',
	face:'长的白、且帅',
	money:'有钱',
	xx:123
}
// 输出，查看此对象里保存了哪些数据
// console.log( _tempObj );
// 获取某一项的值
// console.log( _tempObj.name );
for(var i in _tempObj){
	// 这个变量i里面保存的，就是对象里的键
	console.log( i );
	// 通过方括号表示法，对象里的键，所对应的值
	console.log( _tempObj[i] );
}

js概念

一般情况下,js文件都在html文件的结尾处引入,为了效率考虑.因为html是在浏览器里一行一行的加载，而js是单线程的，会引起阻塞。所以都在html文件的结尾来引入 .js中数据来驱动视图

操作Dom

​ 要操作某个dom，就必须要先获取某dom节点,简单来说,dom就是html标签.

获取某dom节点,要用到 Document 对象.每个浏览器打开（就是加载）的html网页（也就是html文件），浏览器打开的那个html网页，它就变成了 Document 对象,Document 对象有很多方法.

document.getElementById() 获取id**

事件

点击事件

​ dom节点.onclick = function(){},onclick会在dom节点被 点击 时触发。

鼠标事件

​ onmouseover 鼠标移入

​ onmouseout 鼠标移出

数据

​ 页面要显示的文字,图片等都属于数据,一般数据都是保存在数组、对象…之中

创建DOM节点

//本质就是创建一个html标签。要创建的html标签名，必须是html中已经存在的
var 变量 = document.createElement('要创建的html标签名');
//设置dom里面的html内容. 
变量.innerHTML = '内容'
//向html页面中，已经存在的子节点中，添加新的子节点   appendChild()
var xx = document.createElement('div');
var _body = document.body.appendChild(xx);
//实例
// 创建一个dom节点，此时div节点里面是空的
var _div = document.createElement('div');
_div.innerHTML = '12346';
console.log( _div );
// 把新创建的dom节点，添加到html页面中，指定的dom节点上。
_ul_id.appendChild( _div );

原生js获取子节点

// 变量 = 变量.children[0]
children是一个类数组格式,可以通过方括号
var popUp = this.children[0] // 获取第一个子元素,不包括文本节点