前端学习(23)~js学习(一)

标签：消息   组合   rac   不可   chrome   操作   网络请求   java   render   

Web前端有三层：

• HTML：从语义的角度，描述页面结构

• CSS：从审美的角度，描述样式（美化页面）

• JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制）

浏览器的介绍

浏览器是网页运行的平台，常用的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。

浏览器的组成

浏览器分成两部分：

• 渲染引擎

• JS 引擎

1、渲染引擎：（浏览器内核）

浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

常见浏览器的内核如下：

2、JS 引擎：

也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行。

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

常见浏览器的 JS 引擎如下：

浏览器工作原理

1、User Interface 用户界面，我们所看到的浏览器

2、Browser engine 浏览器引擎，用来查询和操作渲染引擎

3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS

4、Networking 网络，负责发送网络请求

5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码

6、UI Backend UI后端，用来绘制类似组合框和弹出窗口

7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage

JavaScript介绍

JavaScript入门易学性

• JavaScript对初学者比较友好、简单易用。可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。

• JavaScript是有界面效果的（相比之下，C语言只有白底黑字）。

• JavaScript是弱变量类型的语言，变量只需要用 var/let/const 来声明。而Java中变量的声明，要根据变量的类型来定义。

而JavaScript中，只需要用一种方式来定义：

// ES5 写法
var a;

// ES6 写法
const a;
let a;

JavaScript是前端语言

JavaScript是前端语言，而不是后台语言。

JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称之为“前端语言”。就是服务于页面的交互效果、美化，不能操作数据库。

后台语言是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。

备注：Node.js是用 JavaScript 开发的，现在也可以基于 Node.js 技术进行服务器端编程。

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：Document Object Model（文档对象模型），操作页面上的元素的API。比如让盒子移动、变色、改变大小、轮播图等等。

• BOM：Browser Object Model（浏览器对象模型），操作浏览器部分功能的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

JavaScript 的特点

特点1：解释型语言

JavaScript 是解释型语言，不需要事先被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。

特点2：单线程

特点3：ECMAScript标准

ECMAScript是一种由 ECMA 国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定和发布的脚本语言规范。

简单来说，ECMAScript不是一门语言，而是一个标准。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不会那么快去追上这个标准，需要时间。

编程语言的分类

翻译器

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所编写的语言翻译成机器语言，计算机才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

由此可见，所谓的“翻译”，指的是翻译成计算机能够执行的指令。

翻译器翻译的方式有两种：一种是编译，另一种是解释。两种方式之间的区别在于翻译的时机不同。

• 编译器：在代码执行之前，事前把所有的代码一次性翻译好，生成中间代码文件，然后整体执行。

• 解释器：边翻译，边执行（在代码执行时进行及时翻译，并立即执行）。当编译器以解释的方式运行时，也称之为解释器。

对应的语言，称之为“编译型语言”、“解释型语言”。

编译型语言

• 定义：事先把所有的代码一次性翻译好，然后整体执行。

• 优点：运行更快。

• 不足：移植性不好，不跨平台。

• 编译型语言举例：c、c++

解释型语言

• 定义：边翻译边执行（翻译一行，执行一行），不需要事先一次性翻译。

• 优点：移植性好，跨平台。

• 缺点：运行更慢。

• 解释型语言举例：JavaScript、php、Python。

Java语言

Java 语言既不是编译型语言，也不是解释型语言。翻译过程：

（1）编译：.java代码文件先通过 javac 命令编译成.class文件。

（2）执行：.class文件再通过 jvm 虚拟机，解释执行。有了 jvm 的存在，让 java 跨平台了。

开始写第一行JavaScript代码

JavaScript 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 js 代码，有哪几种方式。

方式1：行内式

代码举例：

input type="button" value="点我点我" onclick="alert(‘千古壹号‘)" />

完整的可执行代码如下：

DOCTYPE html>
html lang="en">
    head>
        meta charset="UTF-8" />
        meta name="viewport" content="width=device-width, initial-scale=1.0" />
        title>Documenttitle>
    head>
    body>
        input type="button" value="点我点我" onclick="alert(‘千古壹号的方式1‘)" />
    body>
html>

View Code

分析：

• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），比如放在上面的 onclick点击事件中。

• 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS代码时，容易出错；引号多层嵌套时，也容易出错。

• 关于代码中的「引号」，在HTML标签中，我们推荐使用双引号, JS 中我们推荐使用单引号。

方式2、内嵌式

我们可以在html 页面的  标签里放入标签对儿，并在里书写JavaScript 代码：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
head>
body>
    script type="text/javascript">
        // 在这里写 js 代码
        alert(‘千古壹号的方式2‘);
        console.log(‘qianguyihao 方式2‘);
    script>
body>
html>

分析：

• text表示纯文本，因为JavaScript也是一个纯文本的语言。

• 可以将多行JS代码写到  标签中。

• 内嵌式 JS 是学习时常用的方式。

方式3：引入外部的 JS 文件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
head>
body>
    
    script src="tool.js">script>
body>
html>

上面这段代码，依然是放到body标签里，可以和内嵌的js代码并列。

另外，引用外部 JS文件的 script 标签中间不可以再写代码。

总结：

我们在实战开发中，基本都是采用方式3，因为这种方式，可以确保 html 文件和 js 文件是分开的，有利于代码的结构化和复用。很少会有人把一大堆 js 代码塞到 html 文件里。

JS一些简单的语法规则

（1）JavaScript对换行、缩进、空格不敏感。每一条语句以分号结尾。

也就是说：

代码一：

script type="text/javascript">
    alert("今天蓝天白云");
    alert("我很高兴");
script>

等价于代码二：

script type="text/javascript">
    alert("今天蓝天白云");alert("我很高兴");
script>

备注：每一条语句末尾要加上分号，虽然分号不是必须加的，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。

（2）所有的符号，都是英语的。比如括号、引号、分号。

（3）严格区分大小写。

注释

我们不要把 HTML、CSS、JavaScript三者的注释格式搞混淆了。

HTML 的注释

CSS的注释

style type="text/css">

    /*
        我是注释
    */

    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

style>

注意：CSS只有/* */这种注释，没有//这种注释。而且注释要写在标签里面才算生效哦。

JavaScript 的注释

单行注释：

// 我是注释

多行注释：

/*
    多行注释1
    多行注释2
*/

补充：VS Code中，单行注释的快捷键是「Ctrl + /」，多行注释的默认快捷键是「Alt + Shift + A」。

Javascript 输入输出语句

弹出警告框：alert语句

代码举例如下：

DOCTYPE html>
html lang="en">
    head>
        meta charset="UTF-8" />
        meta name="viewport" content="width=device-width, initial-scale=1.0" />
        title>Documenttitle>
    head>
    body>
        script>
            alert(‘千古壹号‘);
        script>
    body>
html>

控制台输出：console.log("")

console.log("")表示在控制台中输出。

在Chrome浏览器中，按F12即可打开控制台，选择「console」栏，即可看到打印的内容。

总结：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己调试用的。

弹出输入框：prompt()语句

prompt()就是专门用来弹出能够让用户输入的对话框。用得少，测试的时候偶尔会用。

JS代码如下：

var a = prompt("请随便输入点什么东西吧");
console.log(a);

上方代码中，用户输入的内容，将被传递到变量 a 里面，并在控制台打印出来。

prompt()语句中，用户不管输入什么内容，都是字符串。

alert()和prompt()的区别：

• alert() 可以直接使用。

• prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。

前端学习(23)~js学习(一)

标签：消息   组合   rac   不可   chrome   操作   网络请求   java   render   

原文地址：https://www.cnblogs.com/Vincent-yuan/p/12380977.html