前端开发——Javascript知识（介绍）

目录

有关JavaScript的知识 

JavaScript的优点 

 JavaScript的领域

JavaScript的组成

JavaScript的特点

第一个JavaScript程序

在 HTML 文档中嵌入 JavaScript 代码

在脚本文件中编写 JavaScript 代码

JavaScript内容 

Html内容 

JavaScript 代码执行顺序

JavaScript中的几个重要概念

标识符

关键字

保留字

区分大小写

直接量

JS（单行 or 多行）注释

有关JavaScript的知识 

关于前端网页的开发，Html是搭建页面的结构和内容

Css是美化页面的样式

JavaScript是给页面添加动态界面和动态数据

JavaScript的优点 

        JavaScript 是最流行的客户端脚本语言，有着简单易学的特点。学有所成后，可以使用一些基于 JavaScript 的框架来开发前端或后端应用程序；

        JavaScript 可以在 Web 浏览器中运行，不需要配置任何特殊的运行环境；

        JavaScript 的应用非常广泛，例如移动应用开发、桌面应用开发、Web 游戏开发等都会用到 

        JavaScript 有着大量的优质框架和库，借助这些框架和库可以大大减少的开发时间。

 JavaScript的领域

JavaScript 可以用于 Web 开发的各个领域，例如：

        Web 应用开发：日常生活中我们所浏览的网页都是由 HTML、CSS、JavaScript 构成的，通过 JavaScript 可以实时更新网页中元素的样式，并可以实现人与网页之间的交互（例如监听用户是否点击了鼠标或按下了某个按键等），还可以在网页中添加一些炫酷的动画；

        移动应用开发：除了可以进行 Web 应用开发外，JavaScript 还可以用来开发手机或平板电脑上的应用程序，而且我们还可以借助一些优秀的框架（例如 React Native），让开发更加轻松；

        Web 游戏：我们在网页中玩过的那些小游戏，都可以使用 JavaScript 来实现；

        后端 Web 应用开发：以前我们都是使用 JavaScript 来进行 Web 应用程序前端部分的开发，但随着 Node.JS（一个 JavaScript 运行环境）的出现，使得 JavaScript 也可以用来开发 Web 应用程序的后端部分。

JavaScript的组成

完整的 JavaScript 是由以下三个部分组成：

        核心（ECMAScript）：提供语言的语法和基本对象；

        文档对象模型（DOM）：提供处理网页内容的方法和接口；

        浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。

JavaScript的特点

1) 解释型脚本语言

​ JavaScript 是一种解释型脚本语言，使用 JavaScript 编写的代码不需要编译，可以直接由浏览器解析运行。

2) 面向对象

​ JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。

3) 弱类型

​ JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。

4) 动态性

​ JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。

5) 跨平台

​ JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

第一个JavaScript程序

在 HTML 文档中嵌入 JavaScript 代码

第1步，新建 HTML 文档

第2步，在 <head> 标签内插入一个 <script> 标签。

​第3步，为 <script> 标签设置type="text/javascript"属性。

第4步，document 表示网页文档对象；

             document.write() 表示调用 Document 对象的 write() 方法，

             在当前网页源代码中写入 HTML 字符串"<h1><h1>Helloworld<h1></h1>"。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("<h1>Helloworld<h1>")
    </script>
</head>
<body>
</body>  
</html>

在脚本文件中编写 JavaScript 代码

第1步，新建文本文件，保存为 test.js。注意，扩展名为.js，它表示该文本文件是 JavaScript 类型的文件。

​第2步，打开 test.js 文件，在其中编写如下 JavaScript 代码。

第3步，新建 HTML 文档，保存为 test.html。

第4步，在<head> 标签内插入一个<script>标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串

JavaScript内容 

alert("hello world")

Html内容 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("<h1>Helloworld<h1>")
    </script>
    <script src="/first.js"></script>
</head>
<body>
</body>  
</html>

JavaScript 代码执行顺序

浏览器在解析 HTML 文档时，将根据文档流从上到下逐行解析和显示。

JavaScript 代码也是 HTML 文档的组成部分，因此 JavaScript 脚本的执行顺序也是根据 <script> 标签的位置来确定的，JavaScript 代码从上到下逐步被解析。

JavaScript中的几个重要概念

标识符

合法的标识符应该注意以下规则：

        第一个字符必须是字母、下划线（_）或美元符号（$）

        除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符

        不能与 JavaScript 关键字、保留字重名

        可以使用 Unicode 转义序列

关键字

break delete if this while
case do in throw with
catch else instanceof try default
continue finally new typeof function
void for return var switch

保留字

保留字就是 JavaScript 语言内部预备使用的一组名字（或称为命令）。这些名字目前还没有具体的用途，是为 JavaScript 升级版本预留备用的，建议用户不要使用

abstract double goto native static
boolean enum implements package super
byte export import private synchronized
char extends int protected throws
class final interface public transient
const float long short volatile

区分大小写

JavaScript 严格区分大小写，所以 Hello 和 hello 是两个不同的标识符。

为了避免输入混乱和语法错误，建议采用小写来编写代码

以下情况下推荐使用大写形式：

1) 构造函数的首字母建议大写

2) 如果标识符由多个单词组成，可以考虑使用骆驼命名法——除首个单词外，后面单词的首字母大写

直接量

字面量（Literal）也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。

//空字符串直接量
1  //数值直接量
true  //布尔值直接量
/a/g  //正则表达式直接量
null  //特殊值直接量
{}  //空对象直接量
[]  //空数组直接量
function(){}  //空函数直接量，也就是函数表达式

JS（单行 or 多行）注释

1、单行注释以双斜杠//开头，//之后的所有内容都会看作是注释的内容，对//之前的内容则不会产生影响

2、多行注释以/*开头，并以*/结尾，出现在/*和*/之间的所有内容都会看作是注释的内容

标签 , ,

发表回复