个性化阅读
专注于IT技术分析

JavaScript基础快速入门教程(一):js介绍和变量详解

一、JavaScript介绍

什么是JavaScript?JavaScript是目前最流行的脚本语言,它是一种解析语言,能够直接被JavaScript引擎解析并执行,浏览器带有js引擎,所以浏览器能执行js,如果你听说过node.js,它同样包含js V8引擎,所以你可以使用node.js直接执行js。JavaScript从最初被设计应用于浏览器web页面的交互,后来扩展到也可以在服务器上运行,这要多得node.js,另外JavaScript也可以在手机上运行,相当强大!

javascript介绍

JavaScript由网景公司开发,ECMA(欧洲计算机制造商协会)以JavaScript为基础制定语言标准ECMAScript,JavaScript是ECMAScript规范的一种实现。而ECMAScript版本倒是有点乱,ES6和ES5傻傻分不清,一般我们用的都是ES5,而ES6更偏向面向对象编程,我们还是需要了解ECMAScript各个版本的区别,但是也不用担心,在前端自动化开发中,我们可以将ES6编译成ES5获得更大的兼容性,下面是JavaScript的版本历史:

ECMAScript版本历史

JavaScript在浏览器前端开发中,DOM表示文档对象模型,BOM把整个文档及其元素映射成一个节点树,我们可以使用DOM API对节点元素进行添加、删除、修改和访问。

BOM是浏览器对象模型,支持访问和操作浏览器窗口。

Node.js是一个JavaScript开发平台,提供JavaScript的运行环境,使用V8引擎解析执行,提供各种API库进行开发,提供npm包管理工具等等。即使没有使用node.js开发服务器,但是你最好了解一下node.js,因为前端高级开发都是基于node.js的。

javascript和node.js

JavaScript的核心

1、JavaScript采用类C语言的基本语法。

2、JavaScript借鉴Java的数据类型和内存管理。

3、JavaScript借鉴Scheme语言,函数优先,使用函数式编程。

4、借鉴Self语言,基于原型(Prototype)的继承机制。

二、在HTML中引入JavaScript的方式

在HTML中引入JavaScript有三种方式:行内JavaScript脚本、script标签和外部脚本。

1、行内JavaScript脚本

<a href="#" onclick="alert('Login Success!')">登录</a>

onclick指定a标签的点击事件,点击a标签执行alert() JavaScript代码,不推荐使用这种方式,在实际开发中也不常用。

2、script标签

<body>
    <script>
    var user = {};
    user.name = "Coder";
    user.age = 18;
    console.log(user.name + ": " + user.age);
    </script>
</body>

你可以在script标签中编写你需要的代码,script标签可以放在body标签中的任何地方,也可以放在head标签中,具体放在哪里也需要考虑浏览器对HTML文档的解析执行顺序。

另外,script标签有五个属性:

async:异步下载脚本,值为async。

type:指定该标签的内容属性,一般默认均未text/javascript。

charset:script标签内容的字符编码。

defer:值为defer,表示延迟加载该script代码。

src:自定外部脚本的url。

3、外部脚本

javascript外部脚本实例

引入方式如下:

<body> 
<script src="./js/index.js"></script>
</body>

该引入方式比较优雅,一般推荐使用该方式。

三、JavaScript解析与HTML文档的加载顺序

JavaScript解析与HTML文档解析顺序

了解HTML文档的解析执行顺序非常重要,这能让你更清楚如何以及在哪里使用JavaScript,浏览器从服务器获取HTML文档进行解析,这里要注意的是,浏览器并不是完全把HTML文档解析完才渲染页面的,它是能解析完成的就渲染,所以你有时会在网络不好的情况看到不完整的页面,你可以深入理解浏览器的工作原理获取更多有用的信息。

浏览器是在HTML文档中是自上而下解析并渲染的,从head开始,若有外部css或js文件,则启动异步去加载相应的文件,你可以在浏览器中打开开发者工具Network查看响应的加载顺序,在时间上重叠则是异步并行加载。

浏览器查看HTML文档加载顺序

四、JavaScript变量详解

变量用标识符表示,如number,而标识符包括变量名称、函数名称、属性名称和参数名称等,JavaScript的标识符区分大小写。

标识符的命名规定:第一个字符必须是字母、下划线或者$符号,其它字符可以是字母、下划线、数字。

例子:_init_,name,age,$this等。

变量需要先声明后使用,语法为:var 变量名=值,同时这也是一个赋值语句,表示将右边的值赋给右边的变量,注意var a=b=8中,a是局部变量但是b却是全局变量,一般不推荐这样用。

JavaScript中的注释使用//单行注释或/**/多行注释,如:

/**
 * 定义一个用户
 *  */ 
var user = {};
var email = "coder@code.com"; // 定义一个变量
var password = "123456789"; // 定义一个变量

user.email = email; // 用户邮箱
user.password = password; // 用户密码

console.log(user.email);
console.log(user.password);

另外JavaScript中保留一些关键字如var,还有ECMAScript的一些保留字,这些都是用户程序执行操作预使用的标识符,所以命名变量也不应与这些保留字有冲突,JavaScript保留的关键字有:

abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

变量的内存解释

JavaScript编程基本元素就是变量,变量直接与计算机的内存相关,如var age = 28,这个赋值语句,初始化变量age在内存中一块空间的值为28,而age可以看做是这块空间的地址,我们使用age可以访问到28这个值。

变量与内存

注意这个age是在栈内存中,栈内存是系统自动分配自动回收,占内存空间一般比较小,对于大对象一般不放在栈内存中,而是放在堆内存中,如var prog = new Object()创建一个空对象,prog的数据内存在堆中,同时栈中保存prog的内存地址。

JavaScript堆栈内存与变量

JavaScript是一种弱类型的编程语言,虽然自由度很大,但是对于OOP开发者来说却不是很友好,同一个变量可以存储多种类型的数据,可以任意改变变量的类型,例如var number = 80,number是一种数值类型,接着number=” JavaScript”也是合法的,变成了字符串类型,虽然可以这样做,但是强烈不建议这样使用,这样会造成前后不搭,对于调试后期维护麻烦巨大,建议还是使用确定类型的变量。

赞(0) 打赏
未经允许不得转载:srcmini » JavaScript基础快速入门教程(一):js介绍和变量详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏