JavaScript整体笔记简要版

@[TOC]JavaScript整体笔记简要版

简介

这是关于JavaScript的笔记,可以作为自己学习js过程的复习和巩固的文章,文章中多的是关于一些js知识的概要,比较少的案例,不适合做入门的学习,适合作为一个复习的概要,通过这些知识点区理清学习js的思路。

1.基本语法

1.1 编写位置

  1. 将js代码编写到网页的标签中
  2. 编写到一个js文件中,然后通过引入
//第一个js案例
//hello world是学习一门语言的开始案例,代表着我们编写的程序是一个生命,这一刻它已经诞生了
<script>
        console.log("Hello world!");//在控制台的输出的语句
</srript>

1.2 js是严格区分大小写的

JavaScript是严格区分大小写的,对于变量a 和 A 会被解析为不同的变量,在编写的时候一定要区分大小写。

1.3标识符及命名规则

含义:指的是变量、函数、属性的名称,或者函数的参数
规则:

  1. 第一个字符必须是字母、下划线或者一个美元符号($);
  2. 其他的字符可以是字母、下划线、美元符好或者数字;
  3. 按照惯例,标识符命名一般采用的是驼峰命名法;
  4. 不能是JavaScript中已经使用的关键字和保留字(这里就展示关键字和保留字了,编辑器一般会有提示)。

1.4 变量的定义及声明

作用:给我们创建的值或者对象一个名称,便于我们在后面的代码中反复使用
语法:(使用var关键字生命一个变量,同时也可以使用"=" 对变量进行赋值)

var a ;//申明了一个a变量
var b = 1 ;
/*申明了一个b,赋值为 1,在后面的使用b的时候,
该值就会自动替换为 1 进行计算。*/

1.5 数据类型

作用:上面的学习如何生命一个变量,就必须知道变量的数据类型,便于我们进行相应的操作,如对一个数字类型的变量,可以进行加减乘除等的数学运算。

js中有5种基本数据类型

1 字符串类型(String)

作用:用于表示一个字符序列,即字符串,js中用 单引号(’)或者(")括起来
包含着一些转义字符

转义字符 含义
\n 换行
\t 制表
\b 空格
\r 回车
\ 斜杠
单引号
" 双引号

其他类型的可以使用方法:toString()、Sting()、字符串拼接的方式来转换成字符串类型

2 数值型(Number)
  • 作用:用于表示整数和浮点数(一般是10进制的整数和浮点数)
  • 范围: ± 1.7976931348623157e+308 (一般是够用的,超过了这个范围就会返回± Infinity)
  • NaN:(含义:Not a Number)是一个特殊的数值,在js单重可以对数值进行数学运算,没有结果返回时就有NaN。
  • 数值转化:可以使用Number()、parseInt()和parseFloat()三个方法把字符串等转换为数值类型
3 布尔型(Boolean)

别称:逻辑值类型和真假值类型
取值:true(真) 或 false(假)
转化:通过Boolean()函数来转为布尔类型

4 null型(Null)
  • 含义:表示一个空的对象
  • 取值(只有一个):null
  • typeof检查null的时候会返回一个Object
  • 注意:如果是将undefined和null进行是否相等的比较化返回的true
5 undefined型(Undefinded)
  • 含义:使用var生命变量但为将其初始化的时候,这个变量的值就是undefined
  • 取值(只有一个):undefined
  • 注意:typeof对没有声明或没有初始化的变量都会放回undefined。
    上面之外的基本数据类型之外,其他的都为Object,因此可以说JavaScript中有六种数据类型

typeof运算符:可以用于检查一个变量的数据类型

typeof操作的数据类型 结果
typeof 数值 number
typeof 字符串 string
typeof 布尔型 boolean
typeof undefined undefined
typeof null Object

1.6 运算符

JavaScript中定义了一系列对数据进行运算的运算符
分类

1.6.1 算数运算符

作用:进行加减乘除等数学运算的运算符

运算符 说明
+ 加法
- 减法
* 乘法
/ 除法
% 取模
++a 前置:使用前先+1
a++ 后置:使用后再+1
- -a 前置,使用前先-1
a- - 后置,使用后再-1
1.6.2 逻辑运算符

主要有三个: ! (非)、&&(与)、|| (或)。

运算符 说明 短路规格
! 逻辑非(NOT)
&& 逻辑与(AND) 左边的条件为false,立刻停止,不继续对后面的进行判断
II 逻辑或(OR) 左边的条件true,立刻停止,不继续对后面的进行判断
1.6.3 关系运算符
作用 符号
大小比较 小于(<) 、大于(>) 、小于等于(<=)和大于等于(>=)
相等比较 ==(判断两个值是否相等),!=(表示两个值是否不相等), ===(判断两个值是否相等)
1.6.4 三元运算符(条件运算符)

语法:判断条件? 取值1 : 取值2;

//三元运算符的使用
var a=1,b =2 ;
var max = a>b? a: b;
//这里相当于
if(a>b){
	max =a ;
}else{
	max = b;
}
1.6.4 运算符的优先级
  1. . 、[]、 new
  2. ()
  3. ++、–
  4. !、~、+(单目)、-(单目)、typeof、 void、delete
  5. +(双目)、-(双目)
  6. <<、>>、>:>>
  7. < 、< =、>、>=
  8. == 、!= 、===
  9. &
  10. ^
  11. |
  12. &&
  13. ||
  14. ?:
  15. =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、 &=、 ^= 、|=

1.7 语句

程序相当于文章,之前的部分相当单词的学习,最多可以把var a =1 ;这样的当成一个语句,这个语句还是只说了一半,为了让我们的“文章”富有逻辑,就必须学习语句,语句是“文章”中的基本单位,只有一句句从头读到尾,才能明白一篇“文章”的内容。

1.7.1 条件语句

  • 作用:条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句

  • if…else语句

//形式1
if(条件表达式){
	语句...
}
//形式2
if(条件表达式){
	语句...
}else{
	语句...
}
//形式3
if(条件表达式){
	语句...
}else if{
	语句...
}else{
	语句1...
}
  • switch…case语句
    作用:switch语句更适用于多条分支使用同一条语句的情况。
switch(语句){  
	case  表达式1: 语句...;
	break;
	case  表达式2:  语句...;
	break;     
	default:  语句...;
}

1.7.2 循环语句

作用:满足所给的条件将会一直执行循环体内的语句

  1. while语句(while循环)
    语法:
//条件为true的时候就执行。
while(条件表达式){  
	 语句...    
}
  1. do…while语句
    语法:
//先执行循环体的内容,再进行条件判断语句,true的时候退出
do{ 
	语句...   
}while(条件表达式);
  1. for循环
    语法
for(初始化表达式 ; 条件表达式 ;  更新表达式){   
	语句...
}

1.7.3 break 和continue语句

作用:break 和 continue 语句用于在循环中精确地控制代码的执行。
使用的位置:只在循环和switch语句中使用。

  • break 在循环和switch语句中使用
  • continue 在循环语句中使用

2.对象

2.1 对象的相关概念

  • 含义:Object类型,是JavaScript中的引用数据类型,是基本类型和其它对象的复合类型。
  • 对象也可以看做是属性的无序集合,每个属性都是一个名/值对
    创建方式
//创建对象的方式
//方式1:
var person1 = new Object();
person.name = "库隐";
person.age = 18;//永远年轻

var person2 = {
	name:"库库",
	age:19
}

对象属性值的访问

//形式1:对象.属性名
person.name;
//形式2:对象['属性名']
person2['name']

构造函数

  • 含义:用于构造对象的函数
  • 创建对象、修改属性值、删除属性:
/*语法:function 构造函数名(形参1,...,形参n){
	语句...
}
*/

function Person(name ,age){
	this.name = name ;
	this.age = age;
}

//修改属性值:
//语法:对象名.属性名  = 新属性值 ;
person1.name = "大牛";

//删除属性
//语法:delete 对象.属性名
delete person1.age ;


其实面向对象是JavaScript的一个重点,这里讲太详细的话,不够篇幅。

2.2数组Array

  • 作用:用于表达有顺序关系的值的集合的语言结构, 数组也是对象的一种。
  • 创建方式
//语法:使用var 数组名=[数组元素,...,数组元素n];
var array1=[];
var array2 = [1,2,3];
var array3 = new Array();
var array4 = new Array(1,2,3);
  • 使用数组中的元素
//语法:数组名[索引]
var a = array1[0];//将array1中的第一个元素赋值给变量a

2.3函数

  • 含义:函数是由一连串的子程序(语句的集合)所组成的,可以被外部程序调用。向函数传递参数之后,会执行函数体中的语句,函数可以返回一定的值。
    注意:在js中函数的一个对象。

函数的声明与调用:

  • js中所有参数的传递都是按值传递的
//语法
/*
方式1:
function 函数名 (形参1,...,形参n){  
return 返回值;  
}
*/

function add( a ,b){
	return a + b ;
}

var result1 = add(1,2);

/*
方式2:
var 变量名 = function (形参1,...,形参n){  
return 返回值;  
}
*/
var sum = function (a , b){  
return a + b;  
}

//调用
var result2 = sum(1,2);

函数的内部属性:arguments 和 this

  • 该对对象实际上是一个数组,用于保存函数的参数,同时还有一个属性callee来保存单签函数
  • this 引用的是一个对象,会根据代码的上下文语境自动改变其引用对象
函数的调用方式 this引用的对象
构造函数 所生成的对象
调用对象的方法 当前对象
apply或call调用 参数指定的对象
其他方式 全局对象(window)

3.DOM

含义:DOM是Document Object Model的缩写,即文档对象模型。

  • 文档(Document):表示这个HTML网页文档(浏览器帮我们创建了一个document对象,可以直接使用)。
  • 对象(Object):可以将对象 中的每一个部分和结点转化为一个对象,便于我们对该节点的内容进行获取和设置。
  • 模型(Model):表示对象之间的关系,这样可以更加方便地获取到需要的对象。
    作用:js可以通过DOM来对HTML文档进行操作,这样就可以根据需要去操作web页面

3.1 Node(节点)

3.1.1 分类

  • Document(整个HTML文档)):文档节点。
  • Element(HTML标签):元素节点,div 、span、a标签等。
  • Attr(标签属性):属性节点,id属性、class属性等。
  • Text(文本):文本节点 ,标签体之间的文本内容。

3.2 获取节点

3.2.1获取元素节点

通过document对象调用

  • getElementById(“id名称”):通过唯一的id属性获取一个元素节点对象
  • getElementsByTagName(“标签名”):获取一组元素对象节点
  • getElementsByName(“name名称”):通过name属性来获取一组元素对象节点

3.2.2获取元素节点

  • getElementsByTagName():返回当前节点制定标签名后代节点
  • childNodes:属性,表示单签节点的所有子节点
  • firstChild:属性,表示当前节点的第一个子节点
  • lastChild:属性,表示当前节点的最后一个节点

3.2.3获取父节点和兄弟节点

  • parentNode:属性,获取该节点的父节点
  • previousSibling:属性,获取前一个兄弟节点
  • nextSibling:属性,表示单签节点的后一个兄弟节点

3.3 获取和设置节点的属性

获取:元素对象.属性名

  • element.value
  • element.id
  • element.className

设置:元素对象.属性名 = 新属性值

  • element.value = “新文本内容”;
  • element.id = “i001”;
  • element.className = “newClass”;

其他属性

  • nodeValue:文本节点可以通过nodeValue属性获取和设置文本节点的内容
  • innerHTML:元素节点通过该属性获取和设置标签内部的html代码

使用CSS选择器查询(使用document对象调用)

  • querySelector():查询获取第一个
  • querySelectorAll():查询所有的

节点修改

  • 创建:document.createElement(标签名)
  • 删除:父节点.removeChild(子节点)

插入

  • 形式1:父节点.appendChild(子节点)
  • 形式2:父节点.insertBefore(新节点 , 旧节点)

4 事件

作用:通过事件绑定相应的函数,可以使用户和浏览器进行交互

4.1绑定事件

  • 通过HTML元素来绑定事件
 <button onclick="alert('hello');alert('world')"> 按钮</button>
  • 通过dom对象来绑定事件(推荐)
var btn = document.getElementById("btn");
btn.onclick = alert("我被点击了");
  • 通过设置事件监听器来绑定事件(一个事件可以绑定多个处理函数):
//语法:元素对象.addEventListener();
btn.addEventListener('click' , function(){alert("hello");});

事件中的this

  • 设定了该事件处理程序的元素,即该事件所属的节点元素

4.2 事件对象

  • 在事件触发的时候,会产生一个事件对象,这个对象包含着所有事件相关的信息;包含导致事件的元素、事件的类型以及其他特定事件相关的信息。
  • DOM标准的浏览器会将一个event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个event对象
  • 可以通过传入参数event获取

Event对象的同一属性/方法

属性/方法 类型 读写 说明
bubbles Boolean 只读 事件是否冒泡
cancelable Boolean 只读 是否可以取消事件的默认行为
currentTarget Element 只读 当前正在处理的事件元素
defaultPrevented Boolean 只读 是否调用了preventDefault()
detail Number 只读 与事件相关的细节信息
eventPhase Number 只读 阶段:1.捕获、2.目标 、3.冒泡
preventDefault() Function 只读 取消事件的默认行为
stopimmediatePropagation() Function 只读 取消事件的进一步捕获或冒泡
stopPropagation function 只读 取消事件的进一步捕获或冒泡
target Element 只读 事件的目标
trusted Boolean 只读 是否是浏览器内置事件
type String 只读 被触发的事件类型

IE中的事件对象(兼容性问题)

  • 要访问 IE 中的 event 对象有几种不同的方式,取决于指定事件处理程序的方法
  • 在IE中event对象作为window对象的属性存在的,可以使用window.event来获取event对象
  • 在使用attachEvent()的情况下,也会在处理程序中传递一个event对象,也可以按照前边的方式使用
属性 /方法 类型 读/写 说明
cancelBubble Boolean 读/写 是否取消冒泡
returnValue Boolean 读/写 是否执行默认行为
srcElement Element 只读 事件目标
type String 只读 被触发的事件类型

4.3 事件触发

事件的发生主要是用户操作引起的

  • 比如用户移动鼠标,单击了按钮、超链接等

4.4 事件的传播

事件的处理机制分为捕获阶段、目标阶段、事件冒泡这三个阶段。
JavaScript整体笔记简要版_第1张图片
1.捕获截断阶段

  • 这一阶段会从window对象开始向下一直遍历到目标对象,如果发现有对象绑定了响应事件则做相应的处理
  • 特点:由上自下

2.目标阶段

  • 执行目标对象上绑定的响应函数

3.事件冒泡阶段

  • 事件的传播方式和捕获阶段正好相反,会从事件目标一直向上遍历,直至window对象结束,这时对象上绑定的响应函数也会执行。
  • 取消事件的传播
//使用event对象的方法
//方式1
event.stopPropagation();
//方式2
event.stopImmediatePropagation()
  • 取消默认行为
//使用 preventDefault()来取消默认行为
event. preventDefault();

5 BOM

  • 作用:提供了很多对象,用于访问浏览器的功能,与任何网页内容无关,BOM将浏览器中的各部分转化成了一个个的对象。

window对象

  • 1.BOM的核心,是一个浏览器的实例。
  • 2.作用域:全局,代表你可以任何位置中使用该对象,而你在全局作用域值生命的变量、对象、都会变成window对象的属性和方法

属性:

  • 窗口大小(提供四个属性来确定窗口的大小)
  • a.网页窗口的大小: innerWidth 和 innerHeight
  • b. 浏览器本身的尺寸:outerWidth 和 outerHeight
    window.open():方法
  • 作用:使用window.open(),方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口
  • 参数:(需要加载的url地址, 窗口的目标,一个特性的字符串,是否创建新的历史记录)

setTimeout():方法

  • 超过一定时间以后执行指定函数
  • 参数:(要执行的内容,超过的时间)

clearTimeout():方法,取消超时调用

  • 超时调用都是在全局作用域中执行的。

setInterval():方法,每隔一段时间执行指定代码

  • 参数:(要执行的代码,间隔的时间)
    clearInterval():方法;取消间隔调用。

系统对话框

  • alert()confirm()prompt() 方法可以调用系统对话框向用户显示消息。
  • 备注:它们的外观由操作系统及(或)浏览器设置决定,而不是由 CSS 决定

location对象

  • 含义:location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能
  • href属性:href属性可以获取或修改当前页面的完整的URL地址,使浏览器跳转到指定页面。
  • assign() 方法:所用和href一样,使浏览器跳转页面,新地址错误参数传递到assign ()方法中。
  • replace() 方法:功能一样,只不过使用replace方法跳转地址不会体现到历史记录中 。
  • reload() 方法 :用于强制刷新当前页面。

navigator对象

  • avigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。
  • 有时会使用navigator的userAgent属性来检查用户浏览器的版本。

screen对象:

  • screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。

你可能感兴趣的:(js学习笔记,JavaScript的总结)