javascript (1)--基本

1.编程语言

• 编程: 让计算机为解决某个问题而是用某种程序设计语言编写的成语代码，并最终得到结果的过程
• 计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令
• 计算机语言：指用于人与计算机之间的通讯语言，它是人与计算机之间传递信息的媒介
• 计算机语言的种类非常多，总的来说可以分成机器语言、汇编语言和高级语言三大类
• 实际上计算机最终所执行的都是机器语言，它是有“0”和“1”组成的二进制数，二进制是计算机语言的基础
• 编程语言：用来控制计算机一系列指令。他有固定的格式和词汇
  ·· 汇编语言和高级语言

编程语言==》翻译器==》机器语言

• 编程语言和标记语言区别：

   编程语言：有很强的逻辑和行为能力
   标记语言：常用于格式化和链接。标记语言的存在是用来被读取的，是被动的
  

2.计算机基础

• 计算机组成： 硬件和软件

   硬件：输入设备、输出设备、CPU、硬盘、内存
   软件：系统软件、应用软件
  

2.1数据存储

1. 计算机内部使用二进制0和1表示数据
2. 所有数据、包括文件、图片等最终都是以二进制数据（0,1）的形式放在硬盘中
3. 所有程序，包括操作系统，本质上都是数据，一二进制形式存储在硬件中
4. 硬盘、内存都是保存的二进制数据

数据存储单位

3.JAVASCRIPT（javascript）

1. 是一种运行在客户端的脚本语言(Script是脚本的意思) //客户端（自己的电脑） 远程服务器
2. 脚本语言：不用编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
3. 可以基于node.js技术来进行服务器端编程

3.1 作用：

1． 表单动态校验（密码强度检测）
2． 网页特效
3． 服务端开发（node.js）
4． 桌面程序（Electron）
5． App（Cordova）
6． 控制硬件–物联网（Ruff）
7． 游戏开发（cocos2d-js）

3.2 html/css/js 的关系

• html/css:标记语言—描述类语言
• js:脚本语言—编程类语言:实现业务逻辑和液面控制（决定功能）

3.3 浏览器执行js

• 浏览器分成两部分：渲染引擎和JS引擎

  1. 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器blink,老版本的webkit
  2. JS引擎：也称为JS解释器。用力读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

• 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行

3.3 JS组成

1. ECMAScript: JavaScript语法
2. DOM：页面文档对象模型
3. BOM：浏览器对象模型

ECMAScript：JavaScript(网景公司)和Jscript(微软公司)

ECMAScript：规定了JS的编程语法和基础核心知识

DOM—文档对象模型

就是对页面上各类元素进行操作（大小、颜色、位置）

BOM—浏览器对象模型

提供独立于内容的、可以与浏览器窗口进行互动的对象结果。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等等

3.4 引用JS

• JS可以书写三种位置，行内式、内嵌式、外部

1. 行内式，直接写到元素的头部

 <input type="button" value="唐伯虎" onclick="alert('秋香')">

2. 内嵌式：
   在标签中

<script>
        alert("沙漠")
    </script>

3. 外部：
   新建后缀名为.js的文件名引用：

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

3.4 JS注释

1. 单行注释： 快捷键：ctrl+/

 // 1. 单行注释

2. 多行注释： 快捷键 shift + alt + a

/*   
df
*/

修改注释健：ctrl + shit + /

3.5 JavaScript输入输出语句

1. alert(msg)：浏览器弹出警示框 归属为浏览器
2. console.log(msg)：浏览器控制台打印输出信息 归属为浏览器
3. prompt(info)：浏览器弹出输入框，用户可以输入 归属为浏览器

代码演示：

 <script>
        //输入框
        prompt("请输入你的年龄：")
        // 弹出警示框  展示给用户的
        alert("计算的结果是")
        // console 控制台输出，给写程序的人看的
        console.log("程序员能看到的"+text)
    </script> 

3.6 JS中变量

3.6.1 变量概述

变量就是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改
变量本质是程序在内存中申请的一块用来存放数据的空间

3.6.2 变量使用

分两步：1. 声明变量  2. 赋值

声明变量

var是一个JS关键字，用来声明变量。
// 声明变量
var age;   //声明了一个名称为age的变量

赋值

age = 18;

结果输出

console.log(age);

变量初始化：声明变量并赋值：

var myname = ‘小花’;
console.log(myname);

案例：输入弹出

var age = prompt('请输入您的年龄');
alert(age);

3.6.3 变量语法扩展

1. 更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后的一次赋的值为准

2. 可以同时声明多个变量：

只需要写一个var，多个变量之间用英文逗号隔开

var age = 18,myname = "小花";

3. 声明变量的特殊情况

① 只声明不赋值 // 值为undefined
② 不声明不赋值，直接使用 //报错，显示意思为没有定义
③ 不声明直接复制使用 //可以直接使用
④ 声明并且给值 // 完美

变量命名规范

 由字母（A-Z，a-z）、数字（0-9）、下划线（_）、美元符号（$）组成；如：usrAge
 严格区分大小写。app和App是两个变量
 不能以数字开头。18age是错误的
 不能是关键字、保留字。例如：var、for、while
 变量名必须有意义。MMD BBD nl  age
 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。比如：myFirstName
 name既不是关键字，也不是保留字，但是在有的浏览器中是有含义的，所以不建议使用name作为变量名

3.6.4 小结

1. 为什么需要变量？
   因为我们一些数据需要保存，所以需要变量
2. 变量是什么？
   变量就是一个容器，用来存放数据的。方便我们后面使用里面的诗句
3. 变量的本质是？
   变量是内存里的一块空间，用来存储数据
4. 变量怎么使用的？
   我们使用变量的时候，一定要声明变量，然后赋值
   声明变量的本质是去内存申请空间
5. 声明时变量初始化
   声明变量并赋值我们称之为变量的初始化
6. 变量命名规范有哪些
   变量名尽量要规范，见名知意----驼峰命名法
   区分哪些变量名的不合法
7. 交换2个变量值的思路
   学会交换2个变量

3.7数据类型

3.7.1数据类型简介

为什么需要数据类型
 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
 数据类型就是数据的类别型号
变量的数据类型
 变量是用来存储值的所在处，他们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定
 JS的数据类型是只有程序在运行过程中，根据等号右边的值来进行判断的
 JS具有动态类型，同时也意味着相同的变量可用作不同的类型

var x = 10;   //x 为数字型
var x = “Blind”;   //x为字符串型

3.7.2 数据类型分类

 简单数据类型（Number、String、Boolean、Undefined、Null）
 复杂数据类型（object）

3.7.3简单数据类型

 Number： 数字型，包含 整数型和浮点型值，如21、0.2。默认值为0
 Boolean：布尔值类型，如true、false，等价于1和0。默认值为false
 String：字符串类型，如“张三”，JS中字符串都是带引号的。默认值为””
 Undefined：var a; 声明了变量a但是没有给值，此时a=undefined。
 Null：var a = null; 声明了变量a 为空值。默认值为null

Number 数字型

1. 数字型进制：二进制、八进制、十进制、十六进制

二进制表示：
八进制表示：0-7。程序里面数字前面加0，表示八进制，语法：var num1 = 010;
十进制就是8
十六进制：0-9，A-F。 数字的前面加0x表示十六进制。语法：var num3 = 0xa；  十进制就是10

2. 数值型范围

最大值：Numer.MAX_VALUE
 1.7976931348623157e+308
最小值：Number.MIN_VALUE
 5e-324

3. 数字型三个特殊值

console.log(Number.MAX_VALUE*2);     //   Infinity 无穷大
 console.log(-Number.MAX_VALUE*2);    //   -Infinity 无穷小
 console.log(“abc”-100);               //   非数字

• Infinity：代表无穷大，大于任何数值
• Infinity：代表无穷小，小于任何数值
• NaN，Not a Number：代表一个非数值

4. isNaN()

这个方法是用来判断是不是非数字。并返回一个值，如果是数字，返回的是false；如果不是数字，返回的是true。
语法：

console.log(isNaN(12));    // 输出为false      
console.log(isNaN("abc"));   //输出为true

String 字符串型

• 字符串可以是引号中的任何文本。语法为：双引号””（更推荐使用）、单引号‘’

1. 字符串引号嵌套

字符串引号嵌套：JS可以使用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

2. 字符串转义符

转义符都是\开头的，常用的转义符如下：
\n：换行符，n是newline的意思
\\：斜杠
\’：’ 单引号
\”：” 双引号
\t：tab缩进
\b：空格，b是blank的意思

3.字符串的长度

字符串通过length属性可以获取整个字符串的长度
语法：

     var str = "my name is xiaohua";
    console.log(str.length)

4.字符串拼接

• 多个字符串之间可以使用+进行拼接，其拼接方式 字符串+任何类型 = 拼接之后的新字符串
  语法：

 console.log("nine-"+"seven")

加强语法：

 var age = 18;
  console.log("小花今年"+ age +"岁") 

Boolean 布尔型

• 布尔类型有两个值：true和false，其中true表示真(对)，而false表示假(错)
• 布尔型和数字型相加的时候，true的值为1，false的值为0

语法：

 var flag = true;
 var flag = true + 1;   // 2

unidefined 和 null

unidefined:

• 一个申明后没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

语法：

       var num;
       console.log(num);                //undefined
       var num1 = undefined;          
       console.log(num1+"xioahua");   //undefinedxiaohua
       console.log(num1+1);           // NaN

NaN：

undefined和数字相加 最后的结果是 NaN

null:

语法：

       var space = null;
       console.log(space+"xiaohua")   // nullxiaohua
       console.log(space+2)           // 2

3.7.4 获取变量数据类型

获取检测变量的数据类型

typeof可以用来获取检测变量的数据类型
语法：

     var num = 10;
       console.log(typeof num);   // number
		var timer = null;
		console.log(type timer);  // object

prompt 取过来的值是 字符型的
var age = prompt("请输入您的年龄")
       console.log(age)
       console.log(typeof age)

• 不同类型控制台颜色：
  Number 蓝色
  String 黑色
  Boolean 深蓝色
  unidefined 、null ：灰色

3.7.5 字面量

• 字面量是源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

数字字面量：8,9,10
字符串字面量：“web”、“xiaohua”
布尔字面量：true、false

3.7.6 数据类型转换

• 什么是数据类型的转换?
  就是把一种数据类型的变量转换成另外一种数据类型
• 通常3种方式的转换

1. 其他类型转换为字符串类型
2. 其他类型转换为数字型
3. 其他类型转换为布尔型

转换为字符串

① toString(): 装换为字符串。 var num = 1; alert(num.toString())
② String()：强制装换，转换为字符串。var num = 1; alert(String(num))
③ 加号拼接字符串：和字符串拼接的结果都是字符串。var num = 1; alert(num+””) 隐式转换

转换为数字型

① parseInt(string)函数：将string类型转换为整数数值型。parseInt(‘78’)
如果要求装换的是小数，那么会直接去掉小数点和小数点后面的数字

      parsetInt(“120px”)  //可以去掉px，输出为120
	  var age = prompt("请输入你的年龄：") //接收的是字符串
       var ageInt = parseInt(age)
       console.log(ageInt)   // 数值型的18
		parseInt("3.14")  //3
       parseInt("3.94")  //3
       parseInt("120px")  //120

② parseFloat(string)函数：将string类型转换成浮点数数值型。parseFloat(’78.21’)
语法：

   parseFloat("3.14")  //3.14
   parseFloat("120px")

③ Number()强制转换函数：将string类型转换为数值型。

  Number(‘12’)
 console.log(Number("123"))

④ Js隐式转换(-*/)：利用算术运算隐式转换为数值型。‘12’-0
语法

console.log("123"*2)  // 246
 console.log("123"-1)  // 122
 console.log("123"/3)   //41

转换为布尔类型

① Boolean()函数：其他类型转成布尔型

• 代表空、否定的值会被转换为false，如’’、0、NaN、null、undefined 其余值都会被转换为true

语法：

console.log(Boolean(''));     //false
        console.log(Boolean(0));       //false
        console.log(Boolean(NaN));    //false
        console.log(Boolean(null));   //false
        console.log(Boolean(undefined));    //false

        //其他都为true
        console.log("123")     //true

3.8 扩展阅读

解释性语言和编译性语言

概述

• 计算机不能直接理解任何除机器语言以外的语言，所以必须把程序员所写的程序语言翻译成机器语言才能执行程序。
• 编译翻译的方式有两种：一个是编译，另外一个是解释。两者方式之间的区别在于翻译的时间点不同。
  ① 编译器是在代码执行之前进行编译，生成中间代码文件
  ② 解释器是在运行时进行以及解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

标识符、关键字、保留字

• 标识符

就是开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字和保留字

• 关键字

是指JS本身已经使用了的字，不能再使用它们充当变量名、方法名
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等

• 保留字

实际上是预留的”关键字”,意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名
包括：boolean、byte、char、class、const、debugger、double、enum、export、extens、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。