JS - 初体验与基础

Javascript

1.JS 历史

• Js 前生叫做 Live Script

• 1995 年 2 月 网景（Netscape）公司为了推广这个脚本，蹭了一下 Java 热度，正式改名为 JavaScript。

• 由于 js 特受欢迎，第二年，微软（Microsoft）公司在 IE3 浏览器 开发 Jscript

• 1997 年，ECMA（欧洲计算机制造商会）在 JavaScript1.1 的基础上制定了一个前端脚本标准，编号 ECMA-262 , 这个脚本的名称就变成了 ECMAscript

• 1998 年 ISO 采用了这个 ECMA-262 标准，改名为 ISO-16262 标准

• 从此，所有浏览器厂家以 ECMAscript 为标准开发前端脚本语言

• JavaScript 只是 ECMAscript 标准的一个实现

• 2011 年 ECMAscript 2011 发布 ES5/ES5.1

• 2015 年 发布 ES6 同时改名 ECMAscript 2015

• 之后发布的就叫 ECMAscript 2016 / 2018 / 2020 ….

2. JS 组成

• JS 语言核心组成三部分

组成部分	描述
ECMAsctipt	核心语法
DOM	Document Object Model 文档（html/xml）对象模型
BOM	Browser Object Model 浏览器窗口对象模型

• 定时器：Timeout() ,宿主环境提供的 api

• 执行环境：

  • 浏览器

  • 命令行

  • Node.js

• web 开发 主要是浏览器执行环境

3.基础案例

3.1 注释

• 使用与 PHP 相同的注释方法

  | 名称 | 演示 |
  | ———— | ————————— |
  | 单行注释 | // balabala... |
  | 多行注释 | /* balabala...*/ |

3.2 标签属性

• js 要写到 html 文档 <script></script> 标签中

• 当然 也可以链接外部 js 文档 <script src="teat.js"></script>

  • 注意 一旦使用 src 链接外部 js 那么这段标签中的 js 内容将会失效，需要另写一对<script></script>实现

• 这对标签可以放到 html 文档中任何地方 head 中 body 中 html 中 甚至 HTML 之外 都可以 就像是 PHP 的 <?php ?>

• 注意 HTML 是超文本标记语言，是按上下顺序执行加载， 当然也可以用<script></script>中的属性定义它的加载方式

属性名	演示	功能
defer	<script defer ></script>	当页面所有 html 加载完成后 再执行或加载 js 或者直接将 script 元素放到文档最下面是一样的效果
async	<script async ></script>	异步加载，当 html 加载遇到 js 文档时，会分两个线程，1.继续加载 html 2.加载该 js 文档 ，js 文档加载完成后不管 html 文档有没有加载完，都立即执行 js 文档

3.3 函数与变量

• js 字符编码集：Unicode 每个字符采用两个字节表示。
• 可以使用中文作为变量名，但不要用！
• 关于转义字符/：出现在正常的字符前无效

3.3.1 变量

在 JS 中声明变量使用关键字 var;
打印到控制台使用console.log()

//示例
var username = "admin";
// 打印
console.log(admin);

• 注意 js 的打印是输出到控制台中，并非页面中 浏览器按 F12 选择 Console 查看

• js 中变量跟 php 一样是区分大小写的！ var username = "admin"; 与 var Username = "peter"; 这是两个完全不同的变量

• js 中允许变量更新 以及重新声明

var username = "admin";
console.log(username); //输出  admin
// 更新
username = "peter";
console.log(username); //输出  peter
// 重新声明
var username = "sunny";
console.log(username); //输出  sunny

• js 中可以访问在前 声明在后 那么变量的值默认为undefined

// 访问在前
console.log(username); // 输出 undefined
// 声明在后
var username = "admin";
console.log(username); // 输出 admin

3.3.2 函数

• 函数声明与 php 相同 关键字function

• 注意 在 JS 中 函数同样区分大小写 这是与 PHP 不同点之一；

// 声明一个变量 小写
function name() {
  console.log("hello name");
}
// 大写
function Name() {
  console.log("hello Name");
}
// 调用
name();
Name();

• 关于函数的作用域
  • js 中函数作用域可以直接访问全局中的变量

var username = "admin";
// 创建函数
function func() {
  // 在js中 连接字符串使用 +
  console.log("username = " + username);
}
// 调用
func();

3.4 块作用域

• 作用域是一个对象，用来查找变量的工具

• js 与 php 一样存在函数作用域与全局作用域

• 但均不存在块作用域！

• 当然 es6 中已经支持块作用域了；

   {
      // 块作用域
      // es6 语法
      let admin = "peter";
      // 块内访问
      console.log(admin); //正常输出
    }
    // 全局访问
    console.log(admin); //报错

4. 总结

感觉 js 天生是为php 分担压力的， 将所有数据传到前端让js处理 减轻服务器压力