JavaScript基础-01

 

任务：

• JavaScript的简介（了解）

• JavaScript的使用（精通）

• JavaScript的注释（熟练）

• JavaScript的输入与输出（熟练）

• JavaScript的变量（精通）

• JavaScript的数据类型（精通）

• JavaScript的运算符(熟练)

 

JavaScript的简介

1）首先我们来了解一下程序：

生活中的程序： 完成某件事件的流程或步骤，比如赶地铁。先买票，过安检、进闸机，坐地铁，出闸机，顺序不能打乱。

计算机中的程序：为了能够解决某件事情而编写的一系列有序指令的集合，指令即代码。实质上程序就是一堆代码。

2）然后我们来了解一下编程语言：

编程语言：编写计算机程序的计算机语言。

常见语言：

• JavaScript

• java

  • c

  • c#

  • python

  • php

  • go

3）最后我们来了解一下JavaScript 的基础概念：

• 为什么使用JavaScript

  • 作为网页的"灵魂",是完成一个动态页面必不可少的一部分。

  • 也能够完成主流编程语言的所有工作，而且有专门的国际组织进行维护

  • 入门简单，使用环境简单。

  • JavaScript应用场景广泛。比如动态页面、app开发、后台开发等。

• JavaScript发展 组成

  • JavaScript出生：网景为了对抗ie，在95年找了程序员用10天开发出了JavaScript。JavaScript能够带来用户跟网页交互。ie为了对抗，也开发出了类似的JScript。为了网页编程语言的更好发展，网景吧javascript1.0 提交给了ecma组织(欧洲计算机标准组织)来规范及统一标准。ecma吧JavaScript命名为ECMAScript。

  • 版本

    ECMAScript 3 ：98年，规定了JavaScript的主要内容和板块，算是第一个比较完善的版本，也是第一个流行的版本。

    ECMAScript 5： 2009年出来的。新增了很多实用的模块。也是目前所有主流浏览器都支持的版本，除了ie8.

    ECMAScript 6：指从2015年发布及之后的新版本的统称，ECMAScript2015新增了很多新模块。ecma也决定了每年发布一个新版本。官方版本号是以发布年份来决定的。比如2015年发布叫ECMAScript2015，依次类推。但是从2015年之后的版本是在ECMAScript2015基础上进行修改，所有有的机构直接将ECMAScript2015及以后的版本统称为es6。

  • 组成(实际使用的JavaScript的组成部分)

    • 浏览器端(动态页面、app)

      • ECMAScript ：ecma组织定义的JavaScript核心语法，简称ES。跟使用环境无关。

      • BOM: 浏览器对象模型，操作浏览器窗口本身。比如新建、关闭窗口或前进、后退或刷新页面等功能

      • DOM：文档对象模型，用于操作网页，对HTML标签的增删查改以及修改css样式等等。

       

    • nodejs(后台开发)

      • ECMAScript ：ecma组织定义的JavaScript核心语法，简称ES。跟使用环境无关。

  • 兼容性

    • ECMAScript

      • 基本所有浏览器都支持ECMAScript 5 。ie8除外

      • ie全系不支持es6

 

JavaScript的使用

在node中使用JavaScript

安装：

• 直接去官网下载安装文件。win7下载低版本，比如10及以下

• 一路next，安装即可

• 测试nodejs：打开命令行窗口(cmd),输入查看版本命令

node -v

• 如果有版本号信息，那么安装成功

使用：

• 随便一个文件夹下创建一个以.js为后缀的文件，在里面加入以下js代码:

console.log("hello world");

- 在js所在文件夹打开命令行窗口-cmd.输入以下指令，来执行js文件

node  js文件名

- 正常情况下，命令行会打印一句helloworld ，表示js运行成功

###

在浏览器端使用JavaScript

二种使用方式

方式1: 外链式

通过

方式2：内嵌式

- 通过``标签中书写js代码

• 两种方式的区别

  • 使用js文件，可以把js代码单独放置一个文件中，可以统一管理，同时和HTML以及css代码隔开，更容易阅读。

注意： 
1. script标签中type是可选属性，如果要写，一定保证type=”text/javascript“
2. script 标签引入位置通常在head头部或者结束body之前(推荐结束body之前)
3. 外链式：不能再script标签中书写js代码，会被引入的xx.js文件中代码覆盖掉

 

JavaScript的注释

概念: 对代码进行解释性说明，即描述这段代码是来干嘛的，本身对程序没有任何影响。

作用：用于方便代码阅读以及理解

特点：当代码执行时会忽略所有注释

单行注释:     // 单行注释  将当前一行为注释

多行注释: 
作用同单行注释
区别：支持多行注释
使用：/*  多行注释内容 */

快捷键：      
单行注释： ctrl + /
多行注释： shift + alt + a

 

JavaScript的输入与输出

3种输出

1. 控制台输出： console.log("输出内容")

2. 弹出框输出: alert("输出内容")

3. 网页输出: docuement.write("输出内容");

注意：如果网页输出的内容是HTML标签代码，那么浏览器会将其变为真正的HTML标签。

输出html代码： document.write("

我是大标题

")

输入

BOM：

prompt("提示性文字");
​

• 会以弹出框的形式获取用户通过键盘输入的信息.可以结合输出，将用户的输入的数据输出出来

• 获取的是一个字符串

document.write(prompt('请输入银行卡号和密码'));
// 可以使用变量去接受它
let 变量名 = prompt("提示性文字");

 

JavaScript的变量

1. 背景：当需要子程序里面多次使用同一个数据的时候，每次都需要重新输入，导致程序使用不便。数据重复使用--变量（变化的数据）

2. 概念：指可以保存一个数据的容器，该容器可以多次使用。

3. 作用：解决一个数据多次 重复使用的问题(用于存储程序中临时的数据)。

4. 定义变量

   定义变量 = 声明变量 + 赋值

   1）三种声明变量方式： ECMAScript

   ES5  var                语法： var 变量名；
   ES6  let                语法： let  变量名；（推荐使用）
   ES6  const              语法： const 变量名；

   三种声明变量的方式的区别：

   var定义变量可以重新声明和赋值

   let定义变量不能重新声明但是可以重新赋值

   const定义变量不能重新声明也不能重新赋值

   2）赋值

   语法： 变量名 = 值;

   name=‘彭于晏’;
   age = 17;
   sex=‘男’;

   3）声明变量同时赋值

   语法： var/let/const 变量名 = 要保存的数据

   var name = ‘彭于晏’;
   let age = 17;
   const sex=‘男’;

   4) 定义多个变量

   使用let同时定义多个变量，变量之间用逗号隔开。

   let name = ‘彭于晏’,
           age = 17,
           sex=‘男’;

   注意：变量之间是用逗号隔开，最后一个变量后面要使用分号。

5. 使用变量

   在需要使用变量的地方直接使用。例如： console.log(已声明的变量)；

   注意： 变量只能定义之后才能使用

6. 修改变量：即修改变量所保存的数据

语法： 已定义的变量名 =  新数据;

注意： 修改变量是不用重新定义的。

1. 变量名规范

• 只能包含 数字、字母、_、$

• 不能以数字开头

• 不能关键字及保留字

• 不能使用中文命名 (服务器不能识别中文) ，尽量用英文，以及见词达义。比如number total result

• 不能使用特殊字符

• 常用的变量名规范写法

  • 大驼峰：每个单词首字母大写， GetArrayMax

    • 用于类名（面向对象）

  • 小驼峰：第一个单词全小写，从第二个单词开始，首字母大写。getArrayMax

    • 一般用于变量名、函数名等

 

 

JavaScript的数据类型

编程语言中数据类型就是给数据进行分类区分，目的是为了让计算机可以进行合理的分配内存和进行数据的运算。

JavaScript中一共包含了7种数据类型：

基本类型（7种）

1. Number:数字类型，又分为两种：整数（int）和小数（float）

   1). 整数（int）

   十进制： 日常中使用的数字

   let num1 = 15; // 十进制表示法

   八进制： 以0开头的数字（了解）

   let num2 = 017; // 八进制表示法

   十六进制： 以0开头的数字（了解）

   let num3 = 0xF; // 十六进制表示法

   二进制：以0或者1组成的数字(了解)

   ​

   注意： 程序的输出都会转换为十进制表示法输出。

 

2). 小数（float）： 带有小数点的数字

    let  width = 0.79;

 

3). 特殊值：

NaN（not a number）: 不是一个数字，计算错误，类型转换失败

 

1. String:字符串。

   在程序中字符串表现为一串被引号所包围的文字、字符（使用单引号或者双引号都是一样的）。

   let name = '王二麻子';
   let age = '46'; // 46为数字类型，加了引号'46'就是字符串类型了

   注意： 相同引号之间不能重复嵌套。

    

2. Boolean:布尔类型

   布尔类型就两个数据。即true false，代表真假性。

   • true表示程序中逻辑的正确（真）

   • false:表示程序中逻辑的错误（假）

     let isMan = true;

     注意： 如果true加了引号，就是字符串类型了，而不是布尔类型。

      

3. undefined: 未定义（特殊值）

   数据类型undefined就只有一个值，为undefined。

   一个变量声明了但是没有赋值，那么它的默认值就是undefined，这个变量叫做‘未定义变量’。

   let price；
   console.log(price); // undefined

   注意： 区分什么是未定义变量和未声明变量

   未声明变量： 变量还未声明就直接使用，那么就会报错。

   未定义变量： 变量声明了但是没有赋值，它有默认值undefined。

    

4. null: 空（特殊值）

   数据类型null就只有一个值，为null,表示某个对象是空的状态。

   可以给一个变量赋值为 null 来清除变量的内容从而回收这个变量。

   let price = 998;
   price = null

 

1. Symbol: 唯一值

   是ES6新增数据类型，可以提供程序的唯一的数据。常用于设置为对象的属性

    

2. BigInt: 超大数

   是ES10新增数据类型，来表示大于 253 - 1 的整数，可以表示任意大的整数，常用来表示科学计数。

 

引用类型( 1种 )

Object:对象类型

可以表示复合型的数据，数组、函数都是对象。

 

查看基本数据类型方法

语法：typeof 变量名/值

console.log( typeof 12 )        //number
console.log( typeof '曹操' )    //string
console.log( typeof true )      //boolean
console.log( typeof undefined ) //undefined
console.log( typeof null )      //object 这是个bug
console.log( typeof Symbol() )  //symbol

例子：

console.log(typeof 0);
console.log(typeof "");
console.log(typeof {});
console.log(typeof []);
console.log(typeof NaN);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof false);
console.log(typeof function(){});

 

数据类型之间的转换

为什么需要类型转换？因为数据之间的运算只有同类型之间的运算, 如果不同类型之间存在运算的话,需要将其转换为同一种类型后再进行运算。

强制类型转换(重点)

1. 将其它类型转为Number类型： parseInt() parseFloat() Number()

   1） parseInt()

   语法： parseInt(变量名/值)

   字符串： 只有首字符是数字可以得到具体的数值，否则得到NaN。

   其他类型： NaN。

   parseInt('20px')//20
   parseInt('3.45px')//3
   parseInt('ak47')//NaN
   parseInt('aaa')//NaN
   parseInt(true)//NaN
   parseInt(undefined)//NaN
   parseInt(null)//NaN

   2）parseFloat()

   语法： parseFloat(变量名/值)

   字符串： 只有首字符是数字可以得到具体的数值，否则得到NaN。

   其他类型： NaN。

   parseFloat('20px')//20
   parseFloat('3.45px')//3.45
   parseFloat('ak47')//NaN
   parseFloat('aaa')//NaN
   parseFloat(true)//NaN
   parseFloat(undefined)//NaN
   parseFloat(null)//NaN

   3) Number()

   语法： Number(变量名/值)

   字符串： 纯数字的字符串可以得到具体的数值，否则得到NaN。

   boolean: true: 1 false: 0

   undefined: NaN null: 0

   Number('20')//20
   Number('20px')//NaN
   Number('3.45px')//NaN
   Number('ak47')//NaN
   Number('aaa')//NaN
   Number(true)//1
   Number(false)//0
   Number(undefined)//NaN
   Number(null)//0

    

2. 将其它类型转为Boolean类型 : Boolean()

   语法： Boolean(变量名/值)

   只有6个值得到fasle: “” 0 null undefined NaN false

   其他的都得到true。

   Boolean('20')//true
   Boolean('')// fasle
   Boolean(' ')//true
   Boolean('ak47')//true
   Boolean(true)//true
   Boolean(false)//fasle
   Boolean(undefined)//fasle
   Boolean(null)//fasle
   Boolean(NaN)//fasle
   Boolean(0)//fasle
   Boolean(‘0’)//true

 

1. 将其它类型转为String类型： String()

   语法： String(变量名/值)

   String('20px')//'20px'
   String(20)//'20'
   String(true)//‘true’
   String(undefined)//‘undefined’
   String(null)//‘null’

   简便语法： 变量名/值 + “”

 

自动类型转换（隐式转换）

运行过程中Javascript会自动进行类型转换，就叫自动类型转换。

let num1 = "100";
let num2 = 10;
console.log(num1 - num2); // 90
//减法的语意： 将会按照数字进行运算

 

注意：

1. 其他类型快速转换为字符串类型，可以直接 +"" 。

2. 纯数字的字符串快速转换为数字类型，可以直接 - 0 。

 

运算符

概念：JavaScript中用于进行运算的特殊符号统称为运算符

分类：算术运算符、关系运算符(比较运算符)、逻辑运算符、赋值运算符、条件运算符。

算术运算符

• +： 加

• -： 减

• *： 乘

• /： 除

• %： 余，取模运算符，除不尽剩下的整数(取余数) 。

注意： 注意： 当+号两边有一个是字符串时，那么就成为了字符串拼接，会直接将两个数据拼接一起。只有当两边都是数字类型时，才会进行加法运算。

 

关系运算符(比较运算符)

• >： 大于

• <： 小于

• ==: 不严格相等，比较值的大小，不比较值的类型 (只比较大小)

• ===：严格全等于，比较值的大小，又比较值的类型.(比较大小及类型)

• !=: 不等于，结果和==相反

• !==: 不全等于，结果和===相反

• >=: 大于或等于

• <=: 小于或等于

 

逻辑运算符

1. &&: 并且，逻辑与，多个条件需同时满足,同时满足则为true，否则为false。

   语法： 表达式1 && 表达式2

   console.log(1 === '1' && 5 >= 5 ); // false

2. ||: 或者，逻辑或，表示多个条件只需满足其中一个即为true，都不满足才为false。

   语法： 表达式1 && 表达式2

   console.log(1 === '1' && 5 >= 5 ); // true

3. !: 取反，逻辑非，原来为true，取反为false。原来为false，取反之后为true。

   语法： !表达式1

   console.log(!(1 !== '1')); // false

 

赋值运算符

• =: 赋值运算符,给变量进行赋值,将=号右边表达式的结果赋给左边的变量。

• -=: a -= b 完全等效于 a = a - b,将a-b运算之后的结果再赋值给a。

• +=: a += b 完全等效于 a = a + b,将a+b运算之后的结果再赋值给a。

• /=： a /= b 完全等效于 a = a / b,将a/b运算之后的结果再赋值给a。

• *=： a *= b 完全等效于 a = a * b,将a*b运算之后的结果再赋值给a。

• %=: a %= b 完全等效于 a = a % b,将a%b运算之后的结果再赋值给a。

• ++: a++ 完全等效于a = a + 1，表示自增1. 变量在自身的基础上加1

  • 前置++ ：

    语法： ++变量名

    运算过程中，先自增1，再参与其他运算。

    let a = 1, b = 2, c;
    c = ++a + b 
    console.log(c); // 9

     

  • 后置++

    语法： 变量名++

    运算过程中， 先参与其他运算,再自增1。

    let a = 1, b = 2, c;
    c = a++ + b 
    console.log(c); // 8

     

• --: a-- 完全等效于a = a - 1，表示自减1。变量在自身的基础上减1，用法同++

 

运算符优先级

先乘除后加减；赋值优先级最低；优先级相同情况下，从左到右依次计算；使用()可以提升优先级。

 

扩展知识

1. && : 运算时，遇到false就返回。

   a && b ,如果 a 为true，直接返回b，而不管b为true或者false ；如果 a 为false 那么直接返回a。

   let a = 0 && 1 && 2; // a = 0
   let b = 1 && 2 && 3; // b = 3
   let c = 1 && 0 && 2; // c = 0

2. ||: 运算时，遇到true就返回。

   a || b ,如果 a 为false，直接返回b，而不管b为true或者false ;如果 a 为true，直接返回a，而不会继续往下执行。

   let a = 0 || 1 || 2; // a = 1
   let b = 1 || 0 || 3; // b = 1

3. 面试题：为什么typeof null得到object而不是null？

   因为javascript中不同对象在底层都表示为二进制，而javascript 中会把二进制前三位都为0的判断为object类型，而null的二进制表示全都是0，自然前三位也是0，所以执行typeof时会返回'object。

4. 字符编码

   • 为什么会有乱码

     • 由一种字符编码来书写的文件用另一种字符编码去解析，那么就会乱码。比如说在生活中用中文写的东西需要中文的语法去解析。在程序中，用utf-8写的文件，那么就要用utf-8去解析。

   • 什么是字符编码

     • 计算机底层只能够识别0和1，不能直接读取文字，所以为了让计算机能够处理文字。那么就需要定义规则或语法规定计算机0和1 的不同组合表示不同的文字.这个规则就是字符编码。

   • 如何玩转字符编码

     • ascii:美国早期的字符编码，也是后续字符编码的基础。在ascii码下，可以表示128种字符，每个字符有对应的ASCII码。比如字符0的ASCII码为48,a的ASCII码为97。

       • 缺点：只支持西欧国家的语言以及一些 常见的特殊符号.

   • 在程序中完成字符和ASCII码的切换

     • 获取某个字符的ASCII码

     var str = "ABC";
     str.charCodeAt(0);
     - 0表示字符在字符串中的位置，以0开始。如果要获取C的ASCII吗，那么就为2

     • 通过ASCII码获取对应的字符

     String.fromCharCode();
     //例子
     var code = 48;
     var str = String.fromCharCode(code);
     document.write(str);//0

   • 常见字符编码

     • ASCII

     • 中国

       • gb2312

       • GBK(gb2312的优化)

     • utf-8(推荐使用的)

       • 存放所有已知的文字