# WEB前端
**Repository Path**: dashantu/web_front_end
## Basic Information
- **Project Name**: WEB前端
- **Description**: WEB前端 课程资料及代码管理
- **Primary Language**: JavaScript
- **License**: Zlib
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-08-10
- **Last Updated**: 2022-07-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# JavaScript概述
## 软件架构模式
- C/S
- Client/Server
- 客户端/服务器
- 用户需要下载、安装特定的客户端程序，才可使用，客户端主要进行用户交互，服务器端负责数据管理。
- QQ、微信、LOL等
- B/S
- Browser/Server
- 浏览器/服务器
- 用户不需要下载、安装特定的客户端程序，可直接使用系统自带的浏览器来使用，所有的程序和数据都放在服务器上，用户通过浏览器来进行资源访问；
- 淘宝、京东等
## URL
- 网址
- URL（Uniform Resource Locator）统一资源定位符
- 格式
- 协议://主机:端口/资源路径?参数
- `https://www.coolneng.com/`
- ```
https://www.baidu.com:443/index.php
```
- 协议:http或者https
- 主机:域名（`www.woniuxy.com`）或者IP(`192.168.1.113`)
- 端口:有默认值，可省(https->443,http->80)
- 资源路径:有默认值，index
## 历史
- 九十年代，随着互联网的蓬勃发展，进行简单的表单数据校验与服务器交互多次成为痛点，而且用户不满足只有图片、文字的简单，没有动态效果网页，急需一种可以对用户数据进行校验、且实现动态网页效果的技术。JavaScript就应运而生。
- 95年，网景公司的Brendan Eich研发出LiveScript，为了赶进度，与sun结成开发联盟，后改名为JavaScript。同年，微软借鉴了JavaScript，研发出自己的脚本语言，JScript；多脚本语言共存，没有统一的脚本语言标准，成为业内的担忧。
- 97年，JavaScript1.1交个欧洲计算机协会(ECMA)组织，希望能制定出一种统一的、跨平台的，厂商中立的脚本语言的语义与语法标准，也就是后来的ECMAScript。
- 98年，国际标准化组织(ISO)和国际电工委员会(IEC)将ECMAScript纳入国际标准，各个浏览器厂商都将ECMAScript作为自己的脚本实现依据。
## 概述
- JavaScript是一种目前世界上最流行的轻量级、解释型脚本语言，简称JS。
- 主要作用
1. 实现用户数据校验与数据交互；
2. 实现页面动态效果(动画);
- 组成
- ECMAScript:最核心、基础部分，所有浏览器都能解析执行；
- BOM:Browser Object Model 浏览器对象模型，提供与浏览器进行交换的接口，浏览器独有；
- DOM:Document Object Model 文档对象模型，提供与页面内容进行交换的接口，浏览器独有；
- 版本
- ES5(主)、ES6(辅)
- 兼容性
- ES5：所有主流浏览器都支持，IE9支持部分，IE11、IE12完美支持；
- ES6：2015年以后的浏览器支持，IE全系列不支持，Edge12支持；
- 运行环境
- 浏览器
- 所有浏览器的脚本解释引擎默认都为JavaScript解析引擎；
- Nodejs
- 一个独立运行JS代码的服务器环境;
## 注意
1. 严格区分大小写,区分中英文;
2. 建议每条命令后都以分号结尾;
3. JS默认为顺序执行(从上到下，从左到右依次执行);
## 输入与输出
- 输入
- `prompt('请输入手机号:');`
- 输出
- 页面输出
- `document.write(输出内容)；`
- 控制台输出
- `console.log(输出内容);`
- 弹框输出
- `alert(输出内容);`
# JavaScript基础
## JavaScript与HTML结合
1. 内部JS
- 在``或``中使用``,在其中编写JS代码;
```
```
2. 外部JS
- 事先将JS代码写在JS文件(.js结尾的文件)中，然后在``或``中，使用``标签的`src`属性关联对应JS文件；
```
```
## 注释
- 对代码进行解释说明的文字，不会被解释执行，提高代码的可读性；
- 分类
- 单行
- 格式
`//注释内容`
- 多行
- 格式
- `/* 注释内容 (可以换行) */`
- 文档
- 格式
- `/** 注释内容 */`
## 注意
1. 严格区分大小写,区分中英文;
2. 建议每条命令后都以分号结尾;
3. JS默认为顺序执行(从上到下，从左到右依次执行);
## 输入与输出
- 输入
- `prompt('请输入手机号:');`
```
prompt('请输入手机号:');
```
- 输出
- 页面输出
- `document.write(输出内容)；`
```
document.write('Hello World!');
```
- 控制台输出
- `console.log(输出内容);`
```
console.log('Hello World!');
```
- 弹框输出
- `alert(输出内容);`
```
alert('Hello World!');
```
## 变量
- 向系统申请一个存储空间，并为该空间取一个名字，后期可通过该名字使用空间;
- 语法
- 声明变量
- 向系统申请空间，并命名
- `var 变量名称1,变量名称2,...;`
```
var num1,num2;
```
- 赋值
- `变量名称=值;`
```
num1=22;num2=prompt('num1:');
```
- 取值
- `变量名称;`
```
document.write(num1-num2);
```
- 可将声明与赋值合为一步完成
- `var 变量名称=值,变量名称=值;`
```
var num1=22,num2=prompt('num2:');
```
## 标识符
1. 只能由数字、字母、下划线(_)、美元符号($)组成;
2. 数字不能开头;
3. 不能与关键字(保留字)冲突;
## 驼峰规则
- 大驼峰
- 每个单词首字母大写，其它字母全小写;
- `StringBuilder`、`HelloWorld`
- 小驼峰
- 第一个单词全小写，其它单词首字母大写，其它字母全小写;
- `userName`、`toUpperCase`
- 用法
- 变量名、函数使用小驼峰
- 类名使用大驼峰
- 建议
- 见名知意;
## 数据类型
- 简单数据类型
- Number
- 数字类型，包含整数、小数;
```
var age=18;var weight=150;var height=1.85;
```
- Boolean
- 布尔类型，取值只能是`true`和`false`
```
var isMarry=true;
```
- String
- 字符串类型,使用单引号或双引号引着的一串字符，ES新增使用反单引号创建字符模板;
```
var myName='李四';var gender="男";//空字符串var str='';//字符模板var str1=`Hello ${myName} World ${gender}`;
```
- undefined
- 未定义，一个特殊值，当变量未赋值，直接使用时，为undefined，变量的默认值
- null
- 空,对象为空,一个特殊值
```
var obj=null;
```
- Symbol
- 唯一值，ES6新增
```
var myId=Symbol();var otherId=Symbol();
```
- 复合数据类型
- Object
- 对象
```
var obj={ id:Symbol(), name:'张三', age:18};
```
## typeof
- 获取变量的数据类型
- 格式
- `typeof 变量名称;`
```
var num=18;document.write(typeof num);
```
## 强类型与弱类型
- 强类型
- 向系统申请空间时绑定目标数据类型。
```
int num;
```
- 弱类型
- 向系统申请空间时不绑定目标数据类型，可以存储各种数据类型;
```
var demo=22;demo=true;demo='admin';
```
- JavaScript属于弱类型。
## 注意
1. 用户输入的数据，系统默认按字符串类型处理
2. 只有`+`任意一个操作数类型为字符串(String)类型，该符号取字符拼接意义
## String与Number间转换
- String转为Number
1. String转为Number（整数或小数）
```
var str='22';var num=Number(str);
```
- 包含非数字或非`-`号的字符串的结果为NaN。
2. String转为整数
```
var str='22';var num=parseInt(str);
```
- 注意
1. 如果有小数，会被舍弃;
2. 如果第一个字符为数字或`-`符号，会从左到右将能正常转换部分转换，不能转换部分舍弃;
3. 如果第一个字符为非数字或非`-`号，则结果为NaN(not a number)
3. String转为小数
```
var str='22.5';var num=parseFloat(str);
```
1. 如果第一个字符为数字或`-`符号，会从左到右将能正常转换部分转换，不能转换部分舍弃;
2. 如果第一个字符为非数字或非`-`号，则结果为NaN(not a number)
- Number转String
1. 利用`+`实现字符拼接
```
var num=88;var str=num + '';
```
2. 利用`toString()`
```
var num=88;var str=num.toString();
```
3. 将小数保留指定位数转为字符串类型
```
var num=22.123456;var str=num.toFixed(2);
```