前端之路（JS基础篇）

JavaScript介绍

1.为什么要学JavaScript？

• 网页三部分：

  HTML：控制网页的 结构

  CSS：控制网页的 样式

  JavaScript：控制网页的行为

  不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。

• 最初的javascript

  • 用于判断客户端的输入（表单校验）

• 现在的JavaScript：现在的JS无所不能

  • 异步与服务器交互（AJAX）

  • 网页和特效（演示）

  • 服务端开发（nodejs）

  • 命令行工具开发（nodejs）

  • 桌面程序（Electron）

  • app开发（ReatNative）

  • 控制硬件--物联网（Ruff）

  • 游戏开发（cavans, cocos2d-js）

2.什么是JavaScript？

• 概念 : JavaScript 是一种运行在 客户端 的 脚本语言

• 客户端 : 相对服务端而言的 ; 移动客户端 + PC客户端 (浏览器)

• 脚本语言 :

  • 编译语言：Java/C/C++/OC/Swift... 运行代码之前,把所有的代码先编译一遍,再运行每一行代码

  • 脚本语言：JavaScript/PHP/Python... 运行一行解析一行,不需要提前 把所有的都编译一遍 , 非编译语言

3.JavaScript历史

• 开始阶段 :

• 1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（表单校验）

• 发展阶段:

• 后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇。

• 微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）

• 三足鼎立阶段：

  • CEnvi的scriptEase

  • Netscape的JavaScript

  • IE的JScript

• 标准化阶段：1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。

4.javascript的组成 (记忆)

• ECMAScript - JavaScript的核心，ECMAScript是一套标准，规范了语言的基本语法和数据类型，定义了一种语言的标准,与具体实现无关

• DOM：(Document Object Model)一套操作网页元素的API (方法)

• BOM：(Browser Object Model)一套操作浏览器功能的API

JavaScript入门

1.JavaScript书写位置

• 第一种 : 写在script标签中

<script>
  alert('Hello World!');
</script>

• 第二种 : 引入一个js文件

<script src="main.js"></script>

注意：

1. script 可以放在很多地方,,但是我们一般规范些在body里面,放在 html 下面;. .使用src 引入的标签 不能再在标签内写js代码里 (一个标签里面只能有一份js代码)

2.注释

注释代码不会被执行，仅仅起到一个提示的作用。注释可以对复杂的代码进行解释，方便后期的维护和开发。

• 单行注释 :

  // 这是单行注释， 单行注释只能写一行代码
  //  快捷键： ctrl + /  

• 多行注释 :

  /*
      这是多行注释，在多行注释中可以
      换行
      sublime Text :  快捷键  ctrl + shift + /
      vscode : 选中多行直接注释,即可,但是这种多行注释 如果需要得自己手写
  */
  ​
  在vscode中比较特殊一般情况下,不会出现多行注释,,显示出来的是多个单行注释

• 在写代码的时候，需要写注释，这是一个良好的习惯,

• 大家初学,一定多写注释 ! 把理解的知识再写一遍,效果会更好!!

3.输出语句 (5种)

• alert : 警告框

  //alert会弹出一个警告框
  alert("hello world");

• confirm : 确认框

  //confirm弹出一个确定框
  confirm("怎么样");

• prompt : 输入框

  //prompt:弹出一个输入框，可以输入值
  prompt("请输入你的真是年龄");

• document.write : 网页中写入内容

  //可以识别标签
  document.write("hello world");
  document.write("<h1>hello world</h1>");

• 控制台输出

  //F12打开控制台，在console中可以看到打印的信息
  console.log("hello word");

变量

变量 : 可以变化的量

变量的作用 : 存储数据

声明 : 用 var(哇) 来声明

1.变量使用的几种形式 

• 直接声明变量

  //  var 来声明变量的
  //  age : 变量名
  //  结构 : var + 变量名 ; 
   var age;
   console.log
  ​
  // undefined 只声明没有赋值
  

• 先声明,后赋值

  var name;  // 声明一个变量 name
  name = '张三'; // 一个等号 是赋值,,后面的值赋值给前面的
   console.log
  

• 同时声明+赋值

  var name = '张三' 
   console.log
  

• 同时声明多个变量并赋值

  ; => 代表一句代码结束
  , => 并列
  var age = 10,name= 'zs' 
  // 相当于
  var age = 10;
  var name = 'zs';
  

• 不声明变量，直接赋值(不会报错，但是不推荐)

  // 不推荐 
  height=100;
  console.log(height);
  

• 不声明变量，也不赋值变量，直接使用（会报错）

   //   weight is not defined 要知道是没有定义,,估计是变量名写错了
   console.log(heightt);

结论：

• 变量需要声明之后，才能使用，养成一个良好的编程习惯。

• javascript代码一旦报错了，后面的代码就不再执行了。

2.变量的命名规则和规范

• 规则 : ( 必须遵守的,不遵守会报错 )

  • 由字母、数字、下划线、$符号组成 ;

  • 不能以数字开头

  • 区分大小写

  • 不能是关键字和保留字 (不用死记 , 慢慢就见多了)

      //关键字：对于js来说有特殊意义的一些单词
      //保留字：js保留了一些单词，这些单词现在不用，但是以后要用
    

• 规范 : (建议遵守的 不遵守不会报错)

  • 变量名必须有意义

  • 遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!

    如：myName, userPassword

数据类型

javascript中数据类型分为简单数据类型和复杂数据类型，下面是简单数据类型 ( 5个 )

number、string、boolean、undefined、null

数值 字符串 布尔 声明未赋值 空类型

复杂类型 ( 3个 ) : 数组 array .. 函数 function ... 对象 object

一、number-数字类型

1.进制值 (简单了解)

在javascript中表示一个数字，除了有我们常用的十进制11, 22,33等，还可以使用八进制、十六进制表示等。

• 十进制

//我们最常用的进制，进行算术运算的时候，八进制和十六进制最终都要转换成十进制
//逢10进1
var num = 9;
var num = 29;

• 八进制

// 0开头的数字， 逢8进1
var num1 = 07;
var num2 = 012;
​
// 八进制 0-7  逢八进一 , 10
var ba = 0321; 
// 12 = 2*8^0 + 1*8^1 = 10
// 321 = 1*8^0 + 2*8^1 + 3*8^2 = 1+16+ 192 = 209
console.log(ba);

• 十六进制

// 0x开头的数字，逢16进1，  数字范围1-9A-F
var num = 0xA;
var num = 0x12;

​ tips : 关于二进制，计算机在只认识二进制，所以所有的代码最终都会转换成二进制数据。

2.浮点数

浮点数就是小数,，比如0.1

• 浮点数

var num = 0.1;

• 科学计数法

//e 10的多少此方  前面得有数字
//e+5 10^5
//e-3 10^-3
​
//当一次数字很大的时候，可以用科学计数法来表示
var num = 5e+5;  //5乘以10的5次方
var num = 3e-3;//3乘以10的-3次方

• 浮点数精度丢失问题

//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;
//尽量少用浮点数进行运算，不要让浮点数进行比较。
​
解决办法 : 根据小数点后面的位数量 乘以对应的整数;
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
0.01 + 0.02 呢?

二、字符串类型 - string

字符串类型，使用双引号 " 或者 ' 包裹起来的字符

//双引号和单引号必须成对出现
var str = 'hello world';
var str =