当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇

【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇

2020年07月31日  | 移动技术网IT编程  | 我要评论

文章目录

前言 · 学习模式推荐

前期——服务器端思想：

系统 linux系统（ubuntu16.04）
编辑器 vim
执行环境 node.js
学习重点 ES5，ES6语法
兼容性问题 不存在

在node.js中，不存在兼容性问题，因为node.js中压根就没有DOM / BOM。因此切记不要在node.js中执行任何DOM / BOM代码。

由于不存在兼容性问题，node.js可以大量发挥js高级标准——ES6，所以刚开始在学习基础语法的时候，更推荐大家在linux系统上的node.js环境下学习。

后期——浏览器端思想：

系统 Windows / Mac os
编辑器 vscode等
执行环境 chrome / Firefox等浏览器
学习重点 BOM，DOM
兼容性问题 存在

由于node.js中无法执行DOM / BOM代码，所以后续学习就必须得切换到浏览器端学习。
当然之前的基础语法也可以继续巩固，但是由于ES6的部分高级语法在某些浏览器上存在兼容性问题，所以学习时要注意。

一. 历史背景

JavaScript诞生于1995年，当时的主要目的是为了运行在浏览器中进行简单的表单验证。

JavaScript其实本来叫LiveScript，但在发布前夕，为了搭上势头正劲的java顺风车， 临时把LiveScript改名为JavaScript。（没错，JavaScript与java其实并没有关系，蹭热度实锤，哈哈）

二. JS组成

组成部分 作用 提供者 兼容性
ECMAScript 核心语法 ECMA 不存在
（ES6的部分高级语法仍存在）
BOM
(Browser Object Model)		 浏览器对象模型
用来控制浏览器的代码		 浏览器厂商 存在
DOM
(Document Object Model)		 文档对象模型
用来控制html / css 的代码		 浏览器厂商 存在

三. 与Java的区别对比（特点）

JavaScript Java
数据类型 弱类型语言
① 变量的数据类型在初始化的时候确定；
② 变量的数据类型可以随时变化；
③ 类型细分不明显；		 强类型语言
① 变量的数据类型在声明的时候确定；
② 变量的数据类型一旦确定不能更改；
③ 类型细分明显；
定位 基于对象和事件驱动的脚本语言 完全面向对象的编程语言
执行方式 解释性语言，执行前无需编译 执行前必须编译为.class文件
联编方式 动态联编
（JS的对象引用在运行时进行检查）		 静态联编
（Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查）

拓展问题：那到底是强类型语言学习难度大还是弱类型语言学习难度大？

学习难度上肯定是弱类型语言比较难。
这就相当于小公司和大公司的区别：
在小公司中工作划分不明显，有时候会需要承担多个岗位的工作，比如偶尔客串设计，后端攻城狮等等；
大公司分工明确，做好自己的本职工作即可。

四. 书写位置

JavaScript是需要嵌入到HTML文档里发挥作用。

4.1 内嵌式：

理论上JavaScript代码可以写在HTML文档的任意位置。建议写在<body>结束标签之前。

    <script>
      alert("内嵌式")
    </script>
  </body>
</html>

4.2 外链式：

单独新建一个后缀名为.js的JS文件，编写好HTML文件，在<head>标签中添加<script> 标签来导入JS文件。

<script src="js文件路径地址"></script>

4.3 行内式：

比如：直接写在开始标签里的点击事件属性。

<button onclick="alert('提交成功！');">提交</button>

五. 注释

5.1 单行注释

var a = 2;//单行注释

5.2 多行注释

/*
  第一行注释
  第二行注释
*/
var a = 2;
let b = 3;

六. 关键字&保留字

6.1 关键字：(在js中有特殊功能)

break do try typeof
case else new var
catch finally return void
continue for switch while
debugger this function with
default if throw instanceof
delete in

6.2 保留字：(将来可能成为关键字)

abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger double implements protected
volatile import public

七. 变量

变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型 ，可以用来保存任何类型的数据。

弱类型特点：
① 变量的数据类型在初始化的时候确定；
② 变量的数据类型可以随时发生变化；
③ 类型细分不明显；

7.1 var

var(variable 变量)这种声明变量的方法是ES5中的做法，它存在以下三大特点：

  1. 变量可以重复声明；（体现JS弱类型语言特点：变量的数据类型可以随时变化）
var a = 2;
var a = "hello world";
  1. 变量声明会被提升（函数的声明也会），提升到所有代码执行之前；
console.log(a);
var a = 2;

执行这两句代码会输出undefined而不是报错。按理说应该是从上到下顺序执行，但是JS会在所有代码执行之前，进行预处理，会去寻找整个js代码中所有var的声明，并提升到所有代码执行之前。
相当于如下代码：

var a;
console.log(a);
a = 2;
  1. var在函数外声明的变量作用域是全局的，全局变量在 JavaScript 程序的任何地方都可以访问；函数内使用 var 声明的变量只能在函数内访问，如果不使用 var 则是全局变量。
function fun(){
   if(true){
      var a = 3;
      console.log(a); //输出：3 正常访问
   }
   console.log(a); //输出：3 变量a定义在函数内，函数内任意位置都可以访问
};
console.log(a); //会报错：函数外不能访问
fun();

7.2 let

let 声明的变量只在 let 命令所在的代码块{}内有效。

{ 
    let a = 2;
}
// 这里不能访问a变量

7.3 const

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

const GLOBAL = 10;

7.4 变量名的命名规则

  • 变量名由字母，数字，下划线以及$组成；
  • 不要使用下划线或者数字作为变量名的开头；
  • 变量名应该具有一定的意义，使用驼峰命名规则（比如：myGoodsList）；
  • 不要使用关键字或是保留字；

八. 流程控制语句

8. 1分支语句

8.1.1 if语句

if（exp）{
   //if代码块
};

如果exp为true或者可以被转换为true的时候，大括号内的代码可以被执行。

if（exp）{
   //if代码块
}else{
   //else代码块
};

如果exp为true或者可以被转换为true的时候，执行if代码块的内容；否则执行else代码块的内容。

if（exp1）{
   //if代码块1
}else if（exp2）{
   //if代码块2
}else{
   //else代码块
};

如果exp1为true或者可以被转换为true的时候，执行if代码块1的内容；否则继续判断exp2，如果exp2为true时，执行if代码块2的内容；否则执行else代码块的内容。

8.1.2 switch语句

if-else分支较多时，代码很繁琐，用switch更简洁一些。

switch（v）{
    case v1:
       ...
       break;
    case v2:
       ...
       break;
    case v3:
       ...
       break;
    default:
       ...
}

v与v1，v2，v3等依次进行全等（===）运算，结果为true时，执行该case段代码，然后break跳出switch循环。
default代码块可以位于switch的任意位置，但要注意，如果不是位于最下方，一定要在default代码块中添加break。

8.2 循环语句

8.2.1 for

for（初始化条件；结束判定条件；迭代）{
     循环体
}

一重循环——例如1 ~ 100累加：

var num = 0;
for（var i = 0 ; i < 100 ; i ++）{
    num += i;
};
console.log（num）; //输出：5050

多重循环——九九乘法表：
for（var i = 0 ; i < 9 ; i ++）{

8.2.2 while（前置判断循环）

初始化条件
while（结束判断条件）{
    
    迭代
};

var i = 1;
var result = 0;
while（i < = 100）{
    result += i;
    i++;
};
console.log（result）; // 5050

8.2.3 do-while

初始化条件
do {
    
    迭代
}  while（结束判断条件）;

var i = 1;
var result = 0;
do {
    result += i;
    i++;
} while（i < = 100）;
console.log（result）; //5050

8.2.4 for-in

本文地址：https://blog.csdn.net/JZevin/article/details/107616493

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网