JavaScript学习笔记

重新学一下js巩固（黑马最新版的javaweb课程，比较熟悉的知识点会直接滤过或者简写）

• 什么是js？

js是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。ECMAScript 6(ES6)是最新的JavaScript版本（发布于2015年）。

• js引入方式

内部脚本（一般放在body元素底部，改善显示速度）：<script>alert("'hello")</script>

外部脚本：<script src=“js/demo.js”></script>

• js基础语法

1. 区分大小写
2. 每行结尾的分号可有可无
3. 注释：//单行注释、/*多行注释*/
4. {}表示代码块
5. 输出语句
6. 变量
7. 数据类型&运算符&流程控制语句

   ---

    

输出语句

①使用window.alert()写入警告框

②使用document.write()写入HTML输出

③使用console.log()写入浏览器控制台

---

变量

①var关键字声明变量

②js是一门弱类型语言，变量可以存放不同类型的值

③var声明的变量是全局变量

④var定义的变量可以重复定义

⑤ECMAScript6中新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块类有效，且不允许重复声明。

⑥ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

    例：const pi = 3.14;

---

数据类型

①原始类型

• number：数字（整数、小数、NaN(Not a Number))
• string：字符串，单双引皆可
• boolean：布尔。true，false
• null：对象为空
• undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

例：

var a = 20;

 alert(typeof a);

②引用类型

运算符

①比较运算符：除了比较运算符===与java不同，其他都一样

==会进行类型转换

===全等运算符，不会进行类型转换

②类型转换

字符串类型转为数字（parseInt())：将字符串转为数字，如果字面值不是数字，则转为NaN

其他类型转为boolean：

   Number：0和NaN为false，其他均转为true

   String：空字符串为false，其他均转为true

   Null和undefined：均转为false

流程控制语句

if...else if...else...、switch、for、while、do...while

 

---

 

• js函数

 

 注：在js中，函数调用可以传递任意个数的参数

---

• js对象

1. Array数组

2. String字符串

3. JSON

4. BOM

5. DOM

Array

①js中Array对象用于定义数组

②定义：

var 变量名=new Array(元素列表);

例：var arr = new Array(1,2,3,4);

var 变量名 = [元素列表];

例：var arr = [1,2,3,4];

③访问：arr[0]=“hello”;

④长度可变，类型可变

⑤常用属性和方法

• 属性：length（表示数组中元素的数量）
• 方法：

 --forEach()：遍历数组中每个有值的元素，并  调用一次传入的函数

--push()：将新元素添加到数组的末尾，并返  回新的长度

--splice()：从数组中删除元素

String

①定义：

var 变量名 = new String(''...'');

例：var str = new String(“hello”);

var 变量名 = “...”;

例：var str = “hello”;

②属性：length，表示字符串的长度

③方法；

• charAt()：返回在指定位置的字符
• indexOf()：检索字符串
• trim()：去除字符串两边的空格
• substring()：提取字符串中两个指定的索引之间的字符，含头不含尾

JSON

①自定义对象

• 定义格式

var 对象名 = {

属性名1：属性值1,

属性名2：属性值2,

属性名3：属性值3,

函数名[：function](形参列表){函数体}

};

例：var user = {

name:“Tom”,

age:20,

gender:“male”,

eat:function(){alert(“吃饭～”);}

//等价于eat(){alert(“吃饭～”);}

};

• 调用格式

对象名.属性名;

对象名.函数名();

例：

console.log(user,name);

user.eat();

②JSON

• 概念

--JavaScript Object Notation，JavaScript对象标记法。

--JSON是通过JavaScript对象标记法书写的文本。

--由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

• 基本语法

①定义：var 变量名='{“key1”:value1,“key2”:value2}';

value的数据类型为：

• 数字（整数/浮点数）
• 字符串（在双引号中）
• 逻辑值（true或false）
• 数组（在方括号中）
• 对象（在花括号中）
• null

例：var userStr = '{“name”:“Jerry”,“age”:18,“addr”:[“北京”,“上海”,“西安”]}';

②JSON字符串转为js对象

var jsObject = JSON.parse(userStr)

③js对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM

①Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象

②组成

• window：浏览器窗口对象（重点）

--获取：直接使用window，其中window.可忽略。

例：window.alert(“hello”);

//alert(“hello”);

--属性

1. history；对History对象的只读引用。
2. location：用于窗口或框架的Location对象。
3. navigator：对Navigator对象的只读引用。

--方法

1. alert()：显示带有一段消息和一个确认按钮的警告框
2. confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
3. setInterval(function(){},毫秒数)：按照指定的周期（以毫秒计）执行某个函数
4. setTimeout(function(){},毫秒数)：在指定的毫秒数后调用函数或计算表达式，只执行这个函数一次

• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史记录对象
• Location：地址栏对象（重点）

--获取：window.location，window.可省略

window.location.属性

//location.属性

--属性

href：设置或返回完整的URL

例：location.href = “http://www.itcast.cn”;

DOM

①概念：Document Object Model，文档对象模型

②将标记语言的各个组成部分封装为对应的对象：

• Document：整个文档对象模型
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

③JavaScript通过DOM，就能够对HTML进行操作

• 改变HTML元素的内容
• 改变HTML元素的样式（css）
• 对HTML DOM事件作出反应
• 添加和删除HTML元素

④DOM是w3c（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

• Core DOM-所有文档类型的标准模型

--Document：整个文档对象

--Element：元素对象

--Attribute：属性对象

--Text：文本对象

--Comment：注释对象

• XML DOM-XML文档的标准模型
• HTML DOM-HTML文档的标准模型

--Image：<img>

--Button：<input type='button'>

⑤HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

⑥Document对象中提供了一下获取Element元素对象的函数

--根据id属性值获取，返回单个Element对象

var h1=document.getElementById('h1');

--根据标签名称获取，返回Element对象数组

var divs=document.getElementsByTagName('div');

--根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

--根据class属性值获取，返回Element对象数组

var clss=document.getElementsByClassName('cls');

 

• ---

  js事件监听