JavaScript简介
JavaScript introduce
JavaScript
发布日期:   2018-05-20
文章字数:   1.5k
阅读时长:   5 分
阅读次数:  

JavaScript的历史

什么是JavaScript?

JavaScript( 简称: JS )，是网景（Netscape）公司开发的一个浏览器直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

JS的诞生

网络的时代经历过 调制解调器 时代（猫，电话线），网速非常慢，用户提交数据都是 直接传给服务器 ，倘若出错，会先经过服务器判断处理，在返回到客户端，用户重新填写提交数据，服务器压力大，用户体验也非常不好。

JS的运行

特点

  1. 需要JavaScript引擎
  2. 不需要经过编译，按顺序执行

浏览器能识别JS代码是因为浏览器自带JavaScriot引擎

常见浏览器及内核

浏览器 内核 CSS兼容前缀
Chrome webkit/Blink -webkit-
FIrefox Gecko -moz-
Opera Presto -o-
Safari webkit -webkit-
IE Tradient -ms-

浏览器内核的作用就是提供 渲染机制，其中Chrome浏览器提供 JSV8引擎

  1. 渲染引擎: 主要负责获取页面内容和排版渲染页面
  2. JS引擎: 解析和执行JS来实现页面的动态效果, 以及交互内容

PS：大部分 国产浏览器 使用的 双核 其实指的是Chrome的 Webkit/Blink 内核以及IE的 Tradient 内核

JS的组成

  1. ECMAScript（简称ES, 欧洲计算机脚本语言组织）制定了JS的 语法 和 基本对象
  2. BOM，浏览器对象
  3. DOM，文档对象（其实就是W3C的标准，网页的API）

JS的目的

  1. 控制web标准（HTML+CSS+JS）的前两者（HTML+CSS）
  2. 可以实现相关动画
  3. 减轻服务器的压力，增强用户体验

误区

JavaScript 和 Java 没有任何关系，相当于雷峰塔与雷锋的关系

JS的使用方式

  1. 行内JS，写在元素标签中，只能绑定事件

  2. 内嵌JS，写在<script>标签中

  3. 外联JS，写在JS文件中

    <script src="js文件url"></script>
<script>
    /* 使用引用框架(JS文件)的功能 */
</script>

注意点

  1. 引入外联JS文件的<script>标签内部如果有JS代码，该部分代码不会执行

  2. <script>标签可以书写在HTML文件中的任何位置，但 建议书写在<body>元素的结束标签前，原因：JS代码自上而下执行，放在内容结构中或者前面会影响网页的加载速度

    <body>
    <!-- 网页的内容结构 -->
    <script></script>
</body>

  3. 内嵌JS的<script>标签写在<body>元素前时，需要给window对象绑定loaded事件才能进行DOM操作（如获取HTML文档中的元素标签）

    <head>
    <!-- 网页元数据 -->
    <script>
        window.onloaded = function(){
            /* JS代码 */
        }
    </script>
</head>

JS相关概念

变量

变量就是变化的量，是一个储存内容或者数据的容器

在书写JS代码时，能用变量就别用常量

注意点：

  1. JS代码中，变量用var定义，弱类型变量
  2. 先声明再使用，否则会出现代码报错，后面所有代码不能执行
  3. 变量名不能以数字或者特殊字符开头（$和_除外）
  4. 变量名不能使用JS关键字或者保留字
  5. 定义多个变量时可以只书写一个声明变量var，用逗号隔开，末尾加分号
<script>
    var 变量名1 = 储存的内容或者数据1,
        变量名2 = 储存的内容或者数据2,
        变量名n = 储存的内容或者数据n;
    //等同于
    var 变量名1 = 储存的内容或者数据1;
    var 变量名2 = 储存的内容或者数据2;
    var 变量名n = 储存的内容或者数据n;
</script>

数据类型

5大类

  • string 字符串类型

  • number 数字类型

  • boolean 布尔型（只有true和false2个值）

  • Object 对象型 （null空对象指针、Function函数、Object基本对象、Array数组 ……）

  • undefined 未定义（只有undefined一个值）

    注意点：

    a）声明变量不赋值, 该变量就是undefined

    b）可以用typeof(数据)检测数据类型，返回的是 类型结果的字符串

注意点：undefined是null的衍生
null undefined
定义 空对象指针 声明变量未初始化就是undefined
typeof object undefined
Boolean false false

类型分类

  • 基本数据类型
    • string
    • number
    • boolean
    • null
    • undefined
  • 引用数据类型
    • 对象
      1. Array 数组
      2. Object 基础对象
      3. Date 日期对象
      4. Math 数学对象
      5. Error 错误对象
      6. RegExp 正则对象
    • 函数
      • Function 函数(功能/方法)
    • 包装数据类型
      1. String
      2. Number
      3. Boolean

数据类型的内存分布

  1. 基本数据类型 在内存是放在栈中，变量和数据存放在一起
  2. 引用数据类型 在内存是放在堆中，指针 (变量)存放在 栈 中通过 堆 中 数据 的 内存地址 和变量产生联系
注意点：但凡看见引用数据类型就需要在堆内存中开辟空间

运算符

运算符分三大类：比较运算符，逻辑运算符，算术运算符

比较运算符

比较运算符会产生（返回）布尔值
  1. == 相等，可以比较不同的数据类型,涉及隐式类型转换
  2. != 不等
  3. === 全等，先比较类型，在比较值
  4. !== 不全等
  5. < 小于
  6. <= 小于等于
  7. >大于
  8. >= 大于等于

逻辑运算符

一般为了配合比较运算符
  1. && 且
  2. || 或
  3. ! 非，将布尔值取反
返回值问题
  • &&结果为true时，返回 最后一个 结果为true的值，结果为false时，返回 第一个 结果为false的值
  • ||结果为true时，返回 第一个 结果为true的值，结果为false时，返回 最后一个 结果为false的值

算术运算符

  1. + 加
  2. - 减
  3. * 乘
  4. / 除
  5. % 取余

运算符优先级

  1. []获取对象成员/数组元素（如 arr[index]，obj[key]）；.获取对象成员（如obj.key）；()提高运算优先级，函数执行（调用）
  2. 一元运算符 ++、--、!
  3. 算术运算符，先*、/、%后+、-
  4. 关系运算符>、>=、<、<=
  5. 相等运算符==、!=、===、!==
  6. 逻辑运算符，先&&后||
  7. 赋值运算符=

   转载规则


《JavaScript简介》 由 Tenderness 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录