JavaScript基础知识

1 什么是JavaScript

JavaScript一种直译式脚本语言,一种基于对象和事件驱动并具有安全性的客户端脚本语言;也是一种广泛应用客户端web开发的脚本语言。简单地说,JavaScript是一种运行在浏览器中的解释型的编程语言。

2 JavaScript的基本结构

<script type="text/javascript">
    JS语句;
</script>

3 JS的使用方法

1 HTML标签中内嵌JS;
  <button onclick="alert('欢迎进入JavaScript世界')">点击me</button>
2 HTML页面中直接使用JS:
  <script type="text/javascript">
    JS语句;
  </script>
3 引用外部JS文件:
  <script language="JScript" src="JS文件路径"></script>

4 变量

变量:是用于存储信息的"容器",是命名的内存空间,可以使用变量名称找到该内存空间;JavaScript 的变量是松散类型(弱类型)的,就是用来保存任何类型的数据。在定义变量的时候不需要指定变量的数据类型。
JavaScript 定义变量有四种方法:const、let、var,还有一种是直接赋值,比如a = " a"(不规范,不推荐使用)
var 定义的变量可以修改,如果不初始化会输出undefined,不会报错。
let let是块级作用域,定义的变量只在let 命令所在的代码块内有效,变量需要先声明再使用。
const 定义的变量不可以修改,而且必须初始化,const定义的是一个恒定的常量,声明一个只读的常量或多个,一旦声明,常量值就不能改变。

在函数外声明的变量作用域是全局的,全局变量在 JavaScript 程序的任何地方都可以访问;在函数内声明的变量作用域是局部的(函数内),函数内使用 var 声明的变量只能在函数内容访问。

声明变量注意:
1 JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行。
2 同一变量可在多次不同赋值时,修改变量的数据类型。
3 变量的命名规范
4 变量命名名要符合驼峰法则:变量开头为小写,之后每个单词首字母大写。

5 JavaScript 变量的命名规则

1 变量命名必须以字母、下划线”_”或者”$”为开头。其他字符可以是字母、_、美元符号或数字。
2 变量名中不允许使用空格和其他标点符号,首个字不能为数字。
3 变量名长度不能超过255个字符。
4 变量名称对大小写敏感(y 和 Y 是不同的变量),JavaScript 语句和 JavaScript 变量都 对大小写敏感。
5 变量名必须放在同一行中。
6 不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。

6 JS中的变量的数据类型

String:字符串类型。用""和''包裹的内容,称为字符串。
Number:数值类型。可以是小数,也可以是正数。
boolean:真假,可选值true/false。
Object(复杂数据类型)
Null:表示为空的引用。var a = null;
Undefined:未定义,用var声明的变量,没有进行初始化赋值。var a;

7 JavaScript对象

JavaScript 对象是拥有属性和方法的数据,是变量的容器。
对象:是封装一个事物的属性和功能的程序结构,是内存中保存多个属性和方法的一块存储空间。
JavaScript中所有事物都是对象:数字、字符串、日期、数组等。
JavaScript对象可以是字面量创建、分配给变量,数组和其他对象的属性、作为参数传递给函数、有属性和作为返回值。
用字面量创建:
    function MyFun(){};
分配给其他对象的变量,数组和属性:
    var myFun = function(){};
    myArray.push(function(){});
    myObject.myFun = function(){};
作为参数传递给其他函数:
    function myFun(someFunc){
        someFunc();
    }
    myFunc(function(){});
有属性:
    var myFunc = function(){};
作为返回值:
    function myFunc(){ return function(){};}

在JavaScript中定义对象有5种方式:
  1.基于已有对象扩充其属性和方法
  2.工厂方式
  3.构造函数方式
  4.原型(“prototype”)方式
  5.动态原型方式
JS 中的对象分为三类:
    内置对象(静态对象):js本身已经写好的对象,我们可以直接使用不需要定义它。
    常见的内置对象有 Global、Math(它们也是本地对象,根据定义每个内置对象都是本地对象)。
    本地对象(非静态对象):必须实例化才能使用其方法和属性的就是本地对象。
    常见的本地对象有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error等
    宿主对象:js运行和存活的地方,它的生活环境就是DOM(文档对象模式)和BOM(浏览器对象模式)。

8 JavaScript函数

使用函数前要先定义才能调用,函数的定义分为三部分:函数名,参数列表,函数体
定义函数的格式:
function 函数名([参数1,参数2...]){
    函数执行部分;
    return 表达式;
}
函数有三种定义方法:
    1 函数定义语句
    2 函数直接量表达式
    3 Function构造函数
函数有四种调用模式:
    1 函数调用模式(通过函数调用)
    2 方法调用模式(通过对象属性调用)
    3构造函数模式(如果是作为构造函数来调用,那么this指向new创建的新对象)
    4 函数上下文(借用方法模式:它的this指向可以改变,而前三种模式是固定的);函数上下文就是函数作用域;基本语法:apply 和 call 后面都是跟两个参数。)
    
在javascript函数中,函数的参数一共有两种形式:(实际参数与形式参数)
形参:在函数定义时所指定的参数就称之为“函数的形参”。
实参:在函数调用时所指定的参数就称之为“函数的实参”。

9 运算符

算术运算符:主要是用来进行JavaScript中的算术操作。(+、-、*、/、%、++、--)
赋值运算符: = 用于给JavaScript 变量赋值,其作用就是把右侧的值赋给左侧的变量。
关系运算符:用于进行比较的运算符。主要有小于(<)、大于(>)、等于(==)、大于等于(>=)、小于等于(<=)、不等(!=)、恒等(===)、不恒等(!==)。
逻辑运算符:逻辑运算符通常用于布尔值的操作,返回结果是一个布尔类型,一般和关系运算符配合使用,有三个逻辑运算符:逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。
字符串连接运算符:是用于两个字符串型数据之间的运算符,它的作用是将两个字符串连接起来。在JavaScript中,可以使用+和+=运算符对两个字符串进行连接运算。
三目操作符(条件运算符):? 根据不同的条件,执行不同的操作/返回不同的值。

10 JavaScript条件语句

分为四种条件语句:
If 语句:只有当指定条件为true时,使用该语句来执行代码
if-else 语句:当条件为true时执行代码,当条件为false时执行其他代码
if-else if-else 语句:使用该语句来选择多个代码块之一来执行
switch 语句:同上,switch的工作原理呢?首先设置表达式n(通常是一个变量),随后表达式的值会与结构中的每个case值作比较;如果存在匹配则该关联代码块执行;然后使用break来阻止代码自动的向下一个case运行;default关键词来规定匹配不存在时做的事情。

11 JavaScript 不同类型的循环

常见的循环主要是三种:for 循环、while 循环、do/while 循环。
for 循环:代码块有一定的次数。for 有三个表达式:1 声明循环变量  2 判断循环条件  3 更新循环变量
特点:先判断再执行,与while相同。
while 循环:当指定的条件为true时循环指定的代码块
do/while 循环:同while循环一样。
特点:先执行再判断,即使初始条件不成立,do/while循环至少执行一次。

循环结构的执行步骤:
1 声明变量
2 判断循环条件
3 执行循环体操作
4 更新循环变量
5 最后执行循环2-4,直到条件不成立,跳出循环

12 JavaScript Break 和Continue 语句

break:跳出本层循环,继续执行循环后面的语句。
    如果循环有多层,则break只能跳出一层。
continue:跳过本次循环剩余的代码,继续执行下一次循环。
    对与for循环,continue之后执行的语句,是循环变量更新语句i++;
    对于while、do-while循环,continue之后执行的语句,是循环条件判断;
    因此,使用这两个循环时,必须将continue放到i++之后使用,否则,continue将跳过i++进入死循环。

13 JavaScript 错误处理使用 try ... catch ... finally

一种是程序写的逻辑不对,导致代码执行异常;一种是执行过程中,程序可能遇到无法预测的异常情况而报错。
throw 声明
onerror 事件

14 JS 对象

JavaScript中所有事物都是对象:数字、字符串、日期、数组等
在 JavaScript 中,对象是拥有属性和方法的数据。
在JavaScript中定义对象可以采用以下几种方式:
  1.基于已有对象扩充其属性和方法
  2.工厂方式
  3.构造函数方式
  4.原型(“prototype”)方式
  5.动态原型方式
JS 中的对象分为三类:
    内置对象(静态对象):js本身已经写好的对象,我们可以直接使用不需要定义它。常见的内置对象有 Global、Math(它们也是本地对象,根据定义每个内置对象都是本地对象)。
    本地对象(非静态对象):必须实例化才能使用其方法和属性的就是本地对象。常见的本地对象有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error等
    宿主对象:js运行和存活的地方,它的生活环境就是DOM(文档对象模式)和BOM(浏览器对象模式)。

15 JavaScript 框架(库)

1、jQuery 库
   jQuery 函数是 $() 函数(jQuery 函数)。
   jQuery 库包含以下功能:
   HTML 元素选取、元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities
   面向对象编程包括 创建对象、原型继承、class继承。
   类是对象的类型模板;实例是根据类创建的对象。
   jQuery 优点:
        分布规模小
        学习曲线平缓,在线帮助多
        语法简洁
        容易延伸
   缺点:
        增加了本机API的速度开销
        浏览器兼容性的改善降低了它的性能
        用法扁平
        有些开发人员抵制使用
   jQuery的好处:消除了浏览器差异;简洁的操作DOM的方法;轻松实现动画、修改CSS等各种操作。

2、AngularJs企业级框架 
其最为核心的特性为:MVC、模块化、自动化双向数据绑定、语义化标签及依赖注入等。

3、React框架
React被称为构建用户接口而提供的Javascript库;主要用来构建UI,其专注于MVC的V部分。

4、vue未来的主流
vue.js 是用来构建web应用接口的一个库,技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。

5、Require Js 
RequireJs是一个javascript模块加载器,提高网页的加载速度和质量。

6、Backone框架 
Backone是一个帮助开发重量级Javascript应用的框架,但它本身简单的框架。其文件体积很小,压缩后只有5.3KB,提供了全功能的MVC框架及路由。Backone强制依赖于Underscore.js,非强制依赖于jQuery/Zepto。

7、D3.js 
数据可视化和图表是Web应用中不可或缺的一部分。d3.js就是最流行的可视化库之一,它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。

16 JavaScript this

方法中的this指向调用它所在方法的对象。
单独使用this,指向全局对象。
函数中,函数所属者默认绑定到this上。

this使用场合:
1 全局环境
2 构造函数
3 对象的方法
4 Node

17 JavaScript闭包

闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包就是创建了一个不销毁的作用域。
闭包需要了解的几个概念: 作用域链、执行上下文、变量对象。
闭包的好处有:
    缓存
    面向对象中的对象
    实现封装,防止变量跑到外层作用域中,发生命名冲突
    匿名自执行函数,匿名自执行函数可以减少内存消耗
坏处:
    内存消耗
    涉及到跨作用域访问是时会导致性能耗损

18 JS Window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

19 JavaScript JSON

JSON 是一种轻量级的数据交换格式;JSON是独立的语言 ;JSON 易于理解。
语法规则:
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象。
方括号保存数组。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章