初识JavaScript

灏HA
241 阅读9分钟

初识JavaScript

前端发展简史

  • 第一阶段：C/S(Client / Server) -> B/S (Browser / Server)
    • 岗位：网页制作（页面仔）
    • 技术栈：PhotoShop、HTML、CSS
  • 第二阶段：静态到动态，前后端分离
    • 岗位：前端工程师（Front-end Engineer，简称FE）
    • 前后端分离：
      • 后端：负责数据处理、业务逻辑编写（包括api接口）
      • 前端：还原设计稿（切图），通过api接口拿到数据绑定到html中，传递服务器需要的数据
      • 技术栈：javascript（js）、Ajax(包含jsonp等跨域技术)、jQuery ....
  • 第三阶段：从前端到全端（pc到移动端）
    • 岗位：前端工程师
    • 技术栈：HTML5/CSS3、rem响应式、flex布局、zepto...、Hybrid App（混合app）、微信小程序...
  • 第四阶段：从全端到全栈
    • 岗位：全栈工程师（前后端都由前端来开发，严格就是说用一门语言完成前端和后端的开发）
    • 技术栈：NODE（让js代码运行在服务器上的环境）、Express、Koa ...
  • JavaScript的编译器 webstorm vscode 都是IDE(integrated development environment 集成开发环境)

浏览器内核&W3C

  • 大纲
    1. 了解W3C组织、及作用
    2. 了解浏览器内核作用
    3. 了解浏览器兼容问题由来
  • W3C

W3C: 是一个组织，万维网联盟；指定行业、编程语言的规范和标准； 标准：开发者按照标准和规范编写代码，浏览器开发商按照规范和标准开发浏览器。

  • 浏览器的组成

浏览器主要有两部分组成：shell外壳部分和内核部分，其实内核还包括了很多东西。

  1. 渲染引擎，内核里的渲染引擎主要作用于html和css部分，定义了语法规则、渲染规则以及渲染路径和速度等等。
  2. js引擎。 2001年发布了ie6，首次实现对js引擎的优化。

2008年Google发布了Chrome，它是采用优化后的js引擎，引擎代号V8，因能把js代码直接转化成机械码0101来执行，进而以速度快而闻名。

后来Firefox也推出了具有强大功能的js引擎

Firefox 3.5 TraceMonkey（对频繁执行的代码做了路径优化）

Firefox 4.0 JeagerMonkey

  1. 其他模块。
  • 浏览器内核

浏览器内核：内核就是把按照规范开发的代码按照规范渲染成图形或者页面；

  • 常见的浏览器内核：

    1. webkit: 谷歌浏览器内核（chrome）、国产浏览器的极速模式
    2. gecko: FireFox(FF)火狐浏览器
    3. trident: IE 浏览器

    ....

  • 浏览器的兼容问题：

    1. 浏览器开发商在实现规范的时候，为了突出自己更优秀，采用的方式不一样，导致结果不一致
    2. 浏览器开发商还会开发出新功能，在这个功能没有成为规范之前，就存在兼容问题

JavaScript的特点

  1. 解释性语言——不需要编译代码，可以跨平台。
    像php、js、jsp都是解释性语言。

  2. 单线程——js是单线程的语言，同时只能执行一件事情。

  3. ECMA标准——为了统一js的规则，推出了ECMA标准，因此js也称为ECMAScript。

JavaScript执行队列

js中有一个重要的概念就是执行队列。 js只有一个主线程，它是单线程的。

其他模块把任务分解成好多的小模块，这些小模块排成一个队列，队列最前面的进入主线程执行，执行完之后第二个进入主线程执行，这个队列就是js的执行队列。有点像操作系统里面的轮转时间片。

JavaScript三大部分：ECMAScript、DOM、BOM

  • ECMAScript是符合ECMA标准的基本javascript。
  • DOM是Document Object Model文档对象模型，可以操作页面的代码，可以操作html和css部分。DOM是非常非常重要的部分。
  • BOM是Browser Object Model浏览器对象模型，操作浏览器shell的。因为每一个浏览器厂家的不同，导致我们在每一个浏览器操作BOM都不一样，因此这里大概了解一下就可以了。

如何引入JavaScript代码

到这里我们大概了解javascript是什么东西了，那么我们如何在html页面里面引入js代码呢？

  1. 页面内嵌script标签

我们可以在<head>标签里面或者<body>标签里面写一个<script></script>，这个标签有一个type属性，如果要写的话就写完整的”text/javascript”，要不然就不写，浏览器会默认是这个type值，如果写还写错的话浏览器就会报错。

写完标签之后，我们就可以在这个标签里面写js代码了。

  1. 引入外部js文件

script标签除了可以在里面直接写代码之外，还可以写一个src属性来引入外部的js文件。

  • 有一点值得注意的是，一个script标签只能在里面写代码或者引入外部js文件，不能既引入又在里面写代码。

  • 一个script标签就是一个代码块，一个页面可以引入多个代码块。

  • 为了符合传统页面的web标准（w3c标准的一项）：结构、样式、行为相分离，我们一般采用第二种引入外部js文件的方法。我们的html、css、js最好放在专门的文件里面，然后在html里面引入外部文件。

  • 浏览器在加载我们的html文件的时候，当遇到link标签的时候会异步加载，但是到script标签的时候并不会异步加载，而是会完全不加载后面的内容，而是去下载这个js文件，并且执行js文件里面的内容，之后下载并且执行完全部的js内容之后，浏览器才会继续执行html后面的代码。

这样就导致了一个问题，如果js是操作DOM的话，我们页面的DOM还没有出来，js就操作，就会出现错误，而且写在前面如果js文件比较大的话，就会导致页面一直没有内容。

因此，为了避免这种情况的出现，我们一般把script标签写在body标签里面的最后一行。

JavaScript基本语法

  • 变量声明

js是一种弱数据类型的语言，任何类型的变量都用关键字var来声明。

var arr = [1, 2, 3];
var num = 123;
var string = “abc”;

赋值可以在声明的同时赋值也可以在后面赋值。

var num = 123;
var num;
num = 123;

这两种方法是一样的效果。

同时，我们有一种单一var模式，当我们要声明多个变量的时候，为了节省代码量，一般只写一个var：

  var num1 = 123,
      num2 = 123,
      num3 = 123;

变量名要上下对齐，这样结构能加清晰，也能节省很多代码。

  • 变量命名规则

  1. f以英文字母、_、$符号开头。

  2. 变量名可以包括数字。

  3. 不可以使用系统自带的关键字、保留字作为变量名。

  • 关键字是被系统定义了语法的单词，像var、window、if、else这一类都算作关键字。（关键字在编辑器里面是可以变色的）
  • 保留字是为以后升级可能会变成关键字做的保留，像java、int、enum、abstract、short、boolean等等都是保留字。

值类型

js中的数据的值主要分为两大类：

  1. 不可改变的原始值

主要有：Number、String、Boolean、undefined、null 这些数据一般叫做栈数据

undefined是未定义的意思，而null是空的意思，他们俩的区别在于，null有值，不过这个值是空值，而undefined是未定义，完全没有值的意思。null一般用作占位。

  var demo = null;
  console.log(demo); // null
  var a;
  console.log(a); //undefined

我们在浏览器上按F12，打开控制台，就可以看到console.log的结果了。

  1. 引用值

主要有：数组array、对象object、函数function 这些数据一般叫做堆数据

var arr = [1, 2, 3, 4];
var object = {
         name: ‘demo’,
      age: ‘18’
}
console.log(arr); //1,2,3,4
console.log(object); //[Object Object]
console.log(object.name); // demo

那么这两种数据类型的区别在哪里呢？

我们举一个例子：

var num = 123,
      num1 = num;
num = 234;
console.log(num); //234
console.log(num1); //123

我们发现num的改变对num1完全没有影响。

var arr = [1, 2, 3],
      arr1 = arr;
arr.push(4);
arr.push(5);
console.log(arr); //1,2,3,4,5
console.log(arr1); //1,2,3,4,5

我们发现我们根本没有改变arr1的值，只是改变了arr的值，但是arr1也跟着改变了，这就是二者之间的第一个区别。

不过，如果我们是给arr重新赋值一个新的数组的话，那么arr1并不是这个新的数组。

  • arr = [1, 2, 3, 4, 5];

  • arr1 –> 1, 2, 3

这是为什么呢？

因为原始值是存放在栈里面的，而引用值是存放在堆里面的，原始值的赋值是把值的内容赋值一份给另一个变量，但是引用值却不是这样。引用值的变量名存在栈里面，但是值却是存在堆里面的，栈里面的变量名只是指向了一个堆空间，这个堆空间存的是我们一开始赋的值，当我们写arr1 = arr的时候，其实是把arr1指向了和arr指向的同一个的堆空间，这样当我们改变arr的内容的时候，其实就是改变了这个堆空间的内容，自然同样指向这个堆空间的arr1的值也随着改变了。

  • 栈内存一点被赋值了，就不可以改变了，我们即使给num重新赋值为234，也是在栈里面重新开辟了一块空间赋值234，然后把num指向了这个空间，前面那个存放123的空间还存在，只是没有指针指向这里罢了。

第二点区别则是：原始值不可以被改变，引用值可以被改变。

var arr = [1, 2, 3, 4];
arr.length = 2;
console.log(arr); // 1,2
var str = “1234”;
str.length = 2;
console.log(str); //

这里涉及了一个包装类的概念，我们后面会提到。

JavaScript语句基本规则

  1. 语句后面要用英文分号结束 “;”
  2. js语法错误会引发后面的代码终止，但不会影响其他的js代码块。这里仅限于逻辑错误，低级的语法错误会导致代码全都执行不了。
  3. 书写要规范，=、+、-、/、%两边都要留有空格。
num + 1;
 
num = num + 2;
 
num = num / 2;

一些公司还会有自己的其他编码规范，比如百度公司就会要求小括号和大括号左右两边留有空格。

for () {}
 
if () {}

这些都是良好的编码习惯，养成这些习惯有助于我们以后的工作。

avatar
文章
阅读
粉丝