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代码的服务器环境;

注意

严格区分大小写,区分中英文;
建议每条命令后都以分号结尾;
JS默认为顺序执行(从上到下，从左到右依次执行);

输入与输出

输入
- prompt('请输入手机号:');
输出
- 页面输出
  - document.write(输出内容)；
- 控制台输出
  - console.log(输出内容);
- 弹框输出
  - alert(输出内容);

JavaScript基础

JavaScript与HTML结合

内部JS
- 在<head>或<body>中使用<script></script>,在其中编写JS代码;
```
<script>        alert('Hello World!');</script>
```
外部JS
- 事先将JS代码写在JS文件(.js结尾的文件)中，然后在<head>或<body>中，使用<script></script>标签的src属性关联对应JS文件；
```
<script src="../js/FirtJS.js"></script>
```

注释

对代码进行解释说明的文字，不会被解释执行，提高代码的可读性；
分类
- 单行
  - 格式
    
    //注释内容
- 多行
  - 格式
    - /* 注释内容 (可以换行) */
- 文档
  - 格式
    - /** 注释内容 */

注意

严格区分大小写,区分中英文;
建议每条命令后都以分号结尾;
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:');

标识符

只能由数字、字母、下划线(_)、美元符号($)组成;
数字不能开头;
不能与关键字(保留字)冲突;

驼峰规则

大驼峰
- 每个单词首字母大写，其它字母全小写;
- 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属于弱类型。

注意

用户输入的数据，系统默认按字符串类型处理
只有+任意一个操作数类型为字符串(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);
```

shuke / WEB前端

JavaScript概述

软件架构模式

URL

历史

概述

注意

输入与输出

JavaScript基础

JavaScript与HTML结合

注释

注意

输入与输出

变量

标识符

驼峰规则

数据类型

typeof

强类型与弱类型

注意

String与Number间转换

简介

发行版

贡献者

近期动态

shuke / WEB前端 .gitee-modal { width: 500px !important; }

JavaScript概述

软件架构模式

URL

历史

概述

注意

输入与输出

JavaScript基础

JavaScript与HTML结合

注释

注意

输入与输出

变量

标识符

驼峰规则

数据类型

typeof

强类型与弱类型

注意

String与Number间转换

简介

发行版

贡献者

近期动态

搜索帮助

shuke / WEB前端