web编程基础---1.javascript基础（介绍，变量，数据类型）

网页、网站和应用程序

网页： 单独的一个页面

网站： 一些相关的网页组成在一起，就变成了网站

应用程序： 可以和用户产生交互，并且实现某种功能

使用web技术也可以用来做应用程序（百度脑图演示）

JavaScript能做啥？

1. impressJS
2. 百度脑图
3. 极客战记

JavaScript介绍

JavaScript是什么

它最初由Netscape的Brendan Eich设计。Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受 Java 启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，ECMA国际创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。

JavaScript 是一种运行在 客户端 的 脚本语言

JavaScript 的解释器称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

JavaScript最初的目的

为了减少网络请求响应时间，在客户端进行表单验证。

JavaScript的目前的应用场景

JavaScript 无所不能

1. 网页特效
2. 服务端开发(Node.js)
3. 命令行工具（Node.js）
4. 桌面应用（Electron）
5. App(Cordova)
6. 硬件控制-物联网（Ruff）
7. 游戏开发（Cocos2d-JS）
   etc.

JavaScript 与 HTML、CSS的区别

1. HTML 提供网页结构，提供网页中的内容
2. CSS 用于美化页面
3. JavaScript 用来控制页面内容，给页面增加动态效果

JavaScript的组成

• ECMAScript

  ECMA 欧洲计算机联合会

定义了JavaScript的语法规范。它是JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScirpt是一套标准，定义了语言的标准，与具体的实现是无关的。

• BOM - 浏览器模型对象 一套操作浏览器功能的API，比如 弹出框、控制浏览器跳转，获取分辨率等等

• DOM - 文档对象模型 一套操作页面的API，把HTML看成是一个文档树，通过DOM的API可以对树上的节点进行操作。

JavaScript初体验

css书写位置

js书写位置

• 行内JS
• 内部JS
• 外部js

==不能在引入外部js的同时，书写内部js代码==

<script src="demo.js">
  alert('1')
</script>
//这个1永远不会出现
复制代码

变量

什么是变量

• 变量是计算机内存中存储数据的标识符，根据变量名称可以取得内存中存储的数据
• 为什么要使用变量
  • 使用变量可以方便获取或者修改内存中的数据

如何使用变量

• var 声明变量

var age;
复制代码

• 变量赋值

var age;
age = 10;
复制代码

• 变量的初始化

// 在声明的同时赋值 --- 变量的初始化
var age = 10;
复制代码

• 同时声明多个变量

var age, name, sex;
age = 10;
name = '张三';
复制代码

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

var age = 18,name = '张三',sex = '男';
console.log(age, name, sex);
复制代码

变量的命名规则和规范

• 规则 - 必须遵守，不遵守就会报错
  • 由字母、数字、下划线、$符号组成，不能以数字开头
  • 不能是关键字和保留字，例如： for while 等等
  • 区分大小写
• 规范 - 建议遵守，不遵守也不会报错

  userName
  

字面量

数值固定值的表示方法

8，9，10，'张三',false ,true

数据类型

简单数据类型

==Number、String、Boolean、undefined、null==

var age = 16;
  var name = '张三';

    // 在c 、 Java  c#中声明变量的时候就确定了数据类型
    // int age = 18;
    // 在JavaScript中，声明变量的时候并没有确定变量的数据类型，
    // JavaScript是一门弱类型的语言，是一门动态类型的语言
    // age = 'abc'; // 这样也是合法的
    // 在代码的执行过程中，才会确定变量的类型
复制代码

Number类型

• 进制

// 十进制
   var num = 9;
   // 在计算机中，存储的时候都是2进制，但是在计算中，一般都转换成10进制
// 其它进制表示方法

// 十六进制
var num = 0xA;

// 八进制
var num = 07;
复制代码

• 浮点数

因为存储的都是2进制，所以浮点数会存在精度问题，==永远不要用浮动数去做比较，要扩大倍数转换成整数比较。==

let a = 0.1+0.2 //a  0.30000000000000004
 0.1+0.2==0.3 // false
复制代码

• 数值的取值范围

// 最大值：
Number.MAX_VALUE //1.7976931348623157e+308
// 最小值：
Number.MIN_VALUE //5e-324
//无穷大：
Infinity
// 负无穷
-Infinity

let a = 1;
a/0 //Infinity
复制代码

• 数值判断
  • NaN not a number 不是一个数字
    • ==++NaN 与任何值都不相等，包括他本身++==
  • isNaN() 用来判断是不是一个数字

String类型

• 字符串字面量

  '程序员','某某学院'

• 如何打印一下字符串

  • 我是一个"正直"的人
  • 我很喜欢"某某'学院'"

• 转义字符

• 获取字符串长度

  msg.length

• 字符串拼接

  'hello' + 'world'

Boolean类型

• 字面量 true,false
• 计算机内部，1为true,0为false

undefined和null

1. undefiend 表示一个变量声明了，但是没有赋值
2. null表示 变量内容为null,必须通过手动设置。

获取变量的类型

typeof 用于获取变量的类型。

var age =18;
    var name='zs';
    console.log(typeof age);//number
    console.log(typeof name);//string

复制代码

注释

// 单行注释

/*
多行注释

多行注释 一般用于描述 整个文档，或者描述某个函数

**/


复制代码

数据类型转换

使用谷歌浏览器，==查看数据类型打印的样式 字符串是 黑色，数值类型和布尔类型 是蓝色 ，undefined和null 是灰色==

转换成字符串

• toString()方法
• String() 方法
• 通过字符串拼接的方法

var age = 18;
    var name  = 'zs';
    var isRight = true;
    var a;
    var b = null;
    // 五种数据类型在 console中打印的样式
    // console.log(age);
    // console.log(name);
    // console.log(isRight);
    // console.log(a);
    // console.log(b);


    // 转换成字符串的方法
    // 1.直接调用toString方法
    var num = 18;
    var isRight = true;
    var a;

    // console.log(typeof num.toString());
    // console.log(typeof irRight.toString());

    // null 和 undefined方法没有 toString方法
    // console.log(a.toString());//报错


    // 2. String() 强制类型转换
    //console.log(typeof String(num));
    //console.log(typeof String(isRight));

    //console.log(typeof String(a));

    // 3.字符串拼接(强制类型转换，并且undefined和null类型可以使用)
    console.log(typeof (num + ''));
    console.log(typeof (isRight + ''));
    console.log(typeof (a + ''));//undefined
复制代码

转换成数值类型

• ==Number() 强制类型转换==
  • 只要字符串中包含字母，就是NaN
  • 布尔类型转换成 0 或 1
• ==parseInt() 转换成整数==
  • 非数字 是 NaN
  • 布尔类型 是 NaN
  • 数字开头的字符串是 数字
  • 字母开头的字符串 是字母
• ==parseFloat() 转换成浮点数==
  • 与parseInt非常类似
  • 解析第一个 . ，遇到第二个. 或者 非数字结束
  • 如果解析的内容只有整数，那么就返回整数
• ==取正数 或者 负数 或者 - 0 运算==
  • 隐式转换
  • 如果带有非数字就是NaN
  • 能转换布尔类型
  • 注意不能 使用+ ,此时是 字符串拼接符

// 1. Number 强制类型转换
    var str = 'abc';
    var isRight = true;

    // console.log(Number(str)); // NaN
    // console.log(Number(isRight));

    // console.log(Number('123'));
    // console.log(Number('123abc'));// Number进行强制类型转换的时候，如果字符串中有一个 字符不是数字的，那么值是NaN

    // 2.parseInt 转换成整数类型

    console.log(parseInt(str));
    // parseInt 无法把布尔类型 转换成 数值
    console.log(parseInt(isRight));

    console.log(parseInt('123'));
    // parseInt在转换的时候，遇到数字则转换成数字，遇到非数字，则返回
    console.log(parseInt('123abc')); //


    // 3.parseFloat  用法跟parseInt 相似
    console.log(parseFloat('123.333.221.22')); // 123.333


    // 4. 取正 或取负  或者 进行 数学运算  隐式转换
    console.log(+'123');
    console.log(-'555');
    console.log(+'abc');
    console.log(+'123abc');
    console.log('444'-0);
复制代码

转换成布尔类型

只有Boolean() 强制类型转换

==转换成false 的情况==

• ==null== -== undefined==

• ==''==

• ==0==

• ==NaN==

  其它情况都是true

var str = 'abc';
    var num = 123;
    var a;
    var b = null;
    console.log(Boolean(str));
    console.log(Boolean(num));
    console.log(Boolean(a));
    console.log(Boolean(b));
    // 转换成  false的五种情况
    // 数字0
    //  字符串 ''
    // undefined
    // null
    // NaN
复制代码

作业

• 交换两个变量的值 ，思考：有几种方法？

  //  交换两个变量的值
  var num1 = 5;
  var num2 = 6;
  
  
  
  //1.常见的临时变量（不推荐）
  var t;
  t = num1;
  num1 = num2;
  num2 = t;
  
  //2.ES6的解构赋值特性
  [num1, num2] = [num2, num1];
  
  //3.巧妙使用运算符的顺序（推荐使用）
  //根据运算符优先级，首先执行num2=num1,然后数组索引使得num1 = num2;
  num1=[num2,num2=num1][0]
  
  //4.巧用数组
  num1 = [num1, num2];
  num2 = num1[0];
  num1 = num2[1];
  
  //5.巧用对象
  num1 = {num1:num2,num2:num1};
  num2 = num1.num2;
  num1 = num1.num1;
  复制代码