学习前端的第十八天——初识JS

端午放假连续玩了好几天，玩爽了，不过也该收收心了，学习js这一块的难度就会越来越大，逻辑思维的运用也越来越多。

一、计算机常识

什么是计算机?

1. 顾名思义，就是能够进行数据运算的机器(台式电脑、笔记本电脑、平板电脑、智能手机）
2. 计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。
3. 计算机 详细描述

计算机的发明者是谁 ?

关于电子计算机的发明者是谁这一问题，有好几种答案:

1. 1936年英国数学家图灵首先提出了一种以程序和输入数据相互作用产生输出的计算机构想，后人将这种机器命名为通用图灵计算机
2. 1938年克兰德·楚泽发明了首台采用继电器进行工作的计算机,这台计算机命名为Z1，但是继电器是机械式的，并不是完全的电子器材
3. 1942年阿坦那索夫和贝利发明了首台采用真空管的计算机，这台计算机命名为ABC
4. 1946年ENIAC诞生,它拥有了今天计算机的主要结构和功能，是通用计算机
5. 现在世界上公认的第一台现代电子计算机是1946年在美国宾夕法尼亚大学诞生的ENIAC(Electronic Numerical Integrator And Calculator)

计算机特点是什么 ?

1. 计算机是一种电器, 所以计算机只能识别两种状态, 一种是通电一种是断电
2. 正是因为如此, 最初ENIAC的程序是由很多开关和连接电线来完成的。但是这样导致改动一次程序要花很长时间(需要人工重新设置很多开关的状态和连接线)
3. 为了提高效率,工程师们想能不能把程序和数据都放在存储器中, 数学家冯·诺依曼将这个思想以数学语言系统阐述，提出了存储程序计算机模型(这是所谓的冯·诺依曼机)

那利用数学语言如何表示计算机能够识别的通电和断电两种状态呢?

• 非常简单用0和1表示即可
• 所有计算机能识别的所有指令都是由0和1组成的
• 所有计算机中存储和操作的数据也都是由0和1组成的

什么是计算机程序 ?

1. 计算机程序是为了告诉计算机"做某件事或解决某个问题而用计算机语言编写的命令集合(语句)
2. 只要让计算机执行这个程序,计算机就会自动地、有条不紊地进行工作,计算机的一切操作都是由程序控制的,离开程序,计算机将一事无成

• 现实生活中你如何告诉别人如何做某件事或者解决某个问题?
• • 通过人能听懂的语言: 哥们儿，你去楼下买烟的时候, 顺便帮我带杯奶茶
• • 其实我们通过人能听懂的语言告诉别人做某件事就是在发送一条条的指令
• • 计算机中也一样, 我们可以通过计算机语言告诉计算机我们想做什么, 每做一件事情就是一条指令, 一条或多条指令的集合我们就称之为一个计算机程序

什么计算机语言 ?

• 中国人和中国人交流,使用中文语言
• 美国人和美国人交流,使用英文语言
• 人想要和计算机交流 — 人机交互,使用计算机语言
• 可以看出在日常生活、工作中人们使用的语言种类很多

• 如果一个很牛人可能同时掌握了中文语言和英文语言, 那么想要和这个人交流既可以使用中文语言,也可以使用英文语言
• 计算机其实就是一个很牛的人, 计算机同时掌握了几十门甚至上百门语言, 所以我们只要使用任何一种计算机已经掌握的语言就可以和计算机交流

常见的计算机语言类型有哪些 ?

机器语言

• 所有的代码里面只有0和1, 0表示不加电,1表示加电(纸带存储时 1有孔,0没孔)
• 优点：直接对硬件产生作用，程序的执行效率非常非常高
• 缺点：指令又多又难记、可读性差、无可移植性

汇编语言

• 符号化的机器语言，用一个符号（英文单词、数字）来代表一条机器指令
• 优点：直接对硬件产生作用，程序的执行效率非常高、可读性稍好
• 缺点：符号非常多和难记、无可移植性

高级语言

• 非常接近自然语言的高级语言，语法和结构类似于普通英文
• 优点：简单、易用、易于理解、远离对硬件的直接操作、有可移植性
• 缺点：有些高级语言写出的程序执行效率并不高

对比(利用3种类型语言编写1+1)

机器语言
10111000 00000001 00000000 00000101 00000001 00000000

汇编语言
MOV AX, 1 ADD AX, 1

高级语言
1 + 1

二、JavaScript概述

js的发展

用途：

• JavaScript用来制作web页面交互效果，提升用户体验
• 可以制作轮播图、Tab栏（选项卡）、地图、表单验证等等

特点：

• 简单易用
  可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
• 解释执行（解释语言）
  事先不编译，逐行执行，无需进行严格的变量声明
• 基于对象
  内置大量现成对象，编写少量程序可以完成目标

历史背景介绍：

• 布兰登·艾奇（Brendan Eich，1961年～）1995年在网景公司，用了十天左右的时间就发明了JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，为了蹭热点，就改名为JavaScript。
• 同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript完败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。

Javascript 与html、css之间的关系：

• Html： 是用来制作网页，简单来说就是编写网页结构（结构）
• css： 用来修饰网页（表现）
• JavaScript:： 实现网页与客户之间互动的桥梁，让网页具有丰富的生命力（行为 ）

JavaScript和ECMAScript的关系

• ECMAScript是一种由ECMA也就是前身为欧洲计算机制造商协会，制定的标准。
• JavaScript是由公司开发而成的，公司开发而成的东西在某些情况是有一些问题的，不便于其他的公司拓展和使用。
• 所以欧洲这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
• 简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。

js简单介绍

• 概念：JavaScript是一种轻量级的、基于对象和事件驱动的、跨平台的客户端脚本语言。
• JavaScript是嵌入到浏览器软件当中去的，只要你的电脑有浏览器就可以执行JS程序代码了。而不像其他语言一样，需要配置语言运行的软件环境，配置起来特别麻烦。所以是轻量级的。
• http://JavaScript是一种基于对象的程序语言。在程序中，对象是由“属性”和“方法”构成。
• 事件驱动：简单来说就是在js中的我们对网页操作的一些行为，比如鼠标的点击，移入移出，键盘敲击等。这些行为或动作我们统称为事件，也就是事件来驱动我做这些事情。
• 跨平台：JS程序可以在多个平台下运行，如：windows、Linux、mac、IOS等。
• 客户端脚本程序：JS只能在客户端的浏览器来运行，不能在服务器端运行。浏览器是一个翻译器，可以翻译三种代码：HTML代码、CSS代码，JavaScript代码。
• 脚本：生活中的脚本是指表演戏剧、拍摄电影等所依据的底本又或者书稿的底本。脚本可以说是故事的发展大纲，用以确定故事的发展方向。计算机中的脚本语言是指：依据一定的格式编写的可执行文件，比如：第一步做什么第二步做什么，也相当于是一个“大纲”。

js组成

1. 核心(ECMAScript)
2. 文档对象模型(DOM：Document Object Model) document 操作标签加行为—可以img动起来 给div加width
3. 浏览器对象模型(BOM：Browser Object Model) window-- alert() ECMAScript它定义了这门语言的基础，描述了该语言的语法和基本对象。 到目前最新的版本是ES10（2019）
4. DOM描述了处理网页内容的方法和接口。
5. BOM描述了与浏览器进行交互的方法和接口。

js语言执行环境

• css执行的环境是什么？样式表，把代码写在样式表里面浏览器就可以识别它了
• js执行也需要一个语言环境，这个环境有三种方法：
• 内部方法：使用script标记执行js代码，适用于代码量较少的时候
  html属性：
  type=“text/JavaScript” 定义文档类型
• 外部方法：使用script标记 src属性，可以引入一个外部js文件
  html属性:
  type=“text/JavaScript” 定义文档类型，js文件类型，type属性可以省略不写
  src=“路径” 引入外部js文件
• 内联方法：直接使用html提供的属性，把代码写在标记的行内
  οnclick=“js代码” 点击事件
• 注意点：
  1、js代码中，如果遇到要设置两个引号的情况下，外层使用了双引号，内层必须使用单引号，反之亦然
  2、外部引入js文件的方法，里面不能执行js代码了
  3、在js代码中，除了数字执行时不需要加引号外，其他的字符都需要加引号

js输出方法：

• window.alert() 网页弹窗 window代表当前窗口，是一个窗口对象，可以省略不写
• document.write() 在网页中输出内容 document文档（网页）write写
  1、可以在网页中输出字符
  2、也可以给字符设置标记，然后在网页中输出，可以解析标记
  3、可以给设置的标记设置样式，通过document.write()输出的标记在页面中是真实存在的
• console.log() 可以在控制台里面输出字符
• prompt(参数1, 参数2) 在网页中可以弹出一个输入框
  1、参数1表示提示信息（框外）
  2、参数2表示输入内容提示（和input标记的属性value类似）

变量

介绍：

• 存储信息的容器
• 可以把数据进行保存，方便下次使用
• 变量是可以变化的数据

语法：

• 使用一个系统提供的关键字（规定）var，声明变量
• 组成：
  1、简写：var 变量名称 = 值;
  2、分写：var 变量名称; 变量名称 = 值;
  3、同名的变量，后面的会把前面的给覆盖掉
• 浏览器遇到变量时做了哪些操作：
  1、声明了一个变量，当浏览器遇到var关键字时，会先在内存中开辟一块空间（区域），然后把变量的值存储进
  开辟的空间
  2、声明变量时，如果使用的是简写的形式，浏览器解析时也会分为两步，变量声明，赋值操作
• 命名规则：
  变量名可以包含字母、数字、下划线、美元符号$。
  变量名不能以数字开头，可以以字母或下划线开头。
  变量名不能是系统关键字，如：var、switch、try、case、else、while等。
  js中的变量名是区分大小写的。如：name和Name是两个变量。
  js中变量的名称一定要有意义，也就是常说的语义化。
• 命名法：
  a、“驼峰式命名”：第一个单词全是小写，后面的每个单词首字母大写。如：getUserName（获取用户名）
  b、“下划线式命名”：所有单词全小写，中间用下划线连接。如：var get_user_name， var _a
  c、匈牙利命名法（Hungarian）：在变量名最前面添加相应小写字母来标识变量的类型，后面的单词首字母大写。

变量数据类型：

• 在实际开发中会遇到各种数据，每一种数据都有自己的类型
• js里面从大的范围划分有两类数据类型
• 基本（原始）数据类型：
  number 数值型，分为整型和浮点型
  string 字符串
  boolean 布尔类型
  null 空型
  undefined 未定义类型
• 引用数据类型：
  object 对象
  Array 数组
  function 函数
• js里面的数据类型和其他语言不一样，js数据类型根据变量的值来确定，其他的语言必须声明变量时，先声明
  类型再进行赋值操作
• typeof() 可以查看数据类型

数值类型：

• number
• 数值类型就是数字
• 数值类型分为整型和浮点型
  1、整型 – 整数
  2、浮点型 – 小数

字符串类型：

• string
• 使用双引号或者单引号包裹起来的字符就是字符串
• 注意：
  1、数字使用引号包裹起来也是字符串类型
  2、数值和字符串相加，变成字符串拼接操作
• 字符串拼接
  1、怎么把多个变量连接起来
  2、字符串拼接使用加号（+）
  3、+号在js里面有两种意思，表示加法，表示拼接

布尔类型：

• boolean
• 值，true（真）、false（假）
• 主要用于判断条件
• 条件为真就行执行，为假就不执行（判断结构）

空型：

• null
• 表示拿到的数据为空，就是没有的意思
• 清除变量的值
• 起一个占位的作用
• 注意：
  1、null的typeof的返回值不是null，是object
  2、尽量不要去使用name，因为它也是关键字，变量命名的时候top表示的是window，不能使用
• null型小故事：
  语言设计者最初设计语言的时候，因为其他语言里面数据类型也有空型，js在被设计的时候其实也借鉴了
  很多其他语言的语法和思想，例如，java、c等等。把空型直接归纳在了基本数据类型里面，结果最后发现
  null返回的结果是object，所以为了区分又在空型上衍生出了一个新的基本数据类型undefined

未定义类型 ：

• undefined
• 一个变量声明了但是未赋值，返回的是undefined
• undefined主要是为了和null做区分
• 注意：
  1、一个未被声明的变量，提示信息也是未定义（报错信息）
  2、如果前面的代码报错，后面的代码就不再执行了（阻塞）

又到了枯燥乏味的概念学习了，不过前面的概念学习也是为了之后更好的理解代码，如何更好的运用做好准备，加油吧