一些JavaScript的入门知识(javascript教程)

yumo6662个月前 (07-09)技术文章27


前端开发的核心技术有三项:HTML、CSS和JavaScript。

这三项技术中,HTML和CSS比较简单,JavaScript则相对来说复杂得多。所以,前端工程师的学习时间,大部分都花在JavaScript上。

JavaScript技术除了JavaScript语法外,还包括HTML DOM技术,以及jQuery、Angular JS、React、Node.js、Vue.js等衍生技术,目前在前端开发中,建议掌握JavaScript语法、HTML DOM和Vue.js技术。

本文主要讲解一些JavaScript的入门知识。

1、什么是JavaScript

JavaScript发布时,是一款在WEB浏览器上运行,由事件驱动的、基于对象的脚本语言。

JavaScript不是一种特殊的Java语言,甚至可以说和Java没有关系。JavaScript由网景(Netscape)公司开发,最初的名字叫LiveScript,只是在发布的前一刻,改名为JavaScript,改名的原因就是当时Java语言如火如荼,搭搭Java语言的顺风车,广告而已。

JavaScript发布后,使得完全静态的Java网页,拥有了和用户交互的功能,相当于网页具有了动态效果,因此深受前端程序员的喜爱。目前,JavaScript除了在Web浏览器上运行外,还可以用于服务器开发,Node.js就是将JavaScript用于服务器开发。

2、JavaScript和Java有什么不同

下面罗列了JavaScript与Java的一些不同点:

(1)这两种语言分别是两个不同公司的产品:JavaScript语言由Netscape公司开发,Java语言由SUN公司开发;

(2)JavaScript程序主要在浏览器上运行,Java程序直接在操作系统上运行;

(3)JavaScript程序运行前不需要编译,Java程序在运行前需要编译生成字节码(*.class)文件;

(4)JavaScript是基于对象的程序设计语言,我们可以使用JavaScript对象,开发的JavaScript程序可以不用定义自己的对象;Java是面向对象的程序设计语言,可运行的Java程序必须创建自己的类;

(5)JavaScript是弱类型语言,Java是强类型语言。

3、JavaScript代码可以在<a>元素的href中提供

下面是一个在<a>元素中包含JavaScript代码的HTML文档javascript001.html:

<!DOCTYPE html>
<html>
<head>
<title>javascript001</title>
<meta charset="utf-8" />
</head>
<body>
<a href="javascript:alert('您点击了链接')">通过链接执行JavaScript程序</a>
</body>
</html>

javascript001.html在浏览器中展示效果为:

当点击网页中的“通过链接执行JavaScript程序”链接后,网页上弹出提示信息框:

4、JavaScript代码可以在<script>元素中提供

下面是一个在<script>元素中提供JavaScript代码的HTML文档javascript002.html:

<!DOCTYPE html>
<html>
<head>
<title>javascript002</title>
<meta charset="utf-8" />
<script>
alert("您启动了javascript002.html文件");
</script>
</head>
<body>
<p>一个用于展示JavaScript的例子网页</p>
</body>
</html>

javascript002.html在网页中的展示效果为:

5、<script>元素可以是<head>的子元素,也可以是<body>的子元素

上面的<script>元素放在<head>中,下面是将<script>放到<body>中的HTML文档javascript003.html:

<!DOCTYPE html>
<html>
<head>
<title>javascript003</title>
<meta charset="utf-8" />
</head>
<body>
<p>一个用于展示JavaScript的例子网页</p>
<script>
alert("您启动了javascript003.html文件");
</script>
</body>
</html>

javascript003.html在网页中的展示效果为:

点击“确定”按钮后,网页展示效果为:

可以发现,<script>放在<head>和<body>时,网页展示效果有所差异,后面会详细介绍相关的知识,本文档就不详细描述了。

6、我们可以把JavaScript代码单独保存为js文件,然后在HTML文件的<script>元素中导入该文件

创建一个javascript004.js文件,内容如下:

alert("您启动了javascript004.html文件");

再创建一个javascript004.html文件,内容如下:

<!DOCTYPE html>
<html>
<head>
<title>javascript004</title>
<meta charset="utf-8" />
<script src="javascript004.js">
</script>
</head>
<body>
<p>一个用于展示JavaScript的例子网页</p>
</body>
</html>

javascript004.html在网页中的展示效果为:

点击“确定”按钮后,网页展示效果为:

JavaScript的入门知识先讲到这里,后面会进一步讲述。

相关文章

纯干货:node.js入门教程以及中文学习资源大搜罗!

node.js是Javascript的一个运行环境,也就是对Google V8引擎进行封装。node.js优化了特殊用例,还提供替代性强的API。基于此,今天W3Cschool小师妹将为大家带来史上最...

JavaScript如何入门?(javascript怎么入门)

1, 建议阅读“javascript高级程序设计”第三版电子版。(我刚开始学习,我向表哥(软件工程师)说我想做前端,于是,他帮我买了这本书,好的书大家都会推荐,很容易在网上找到,也没有必要我说一定是这...

JS入门基础知识(js基础知识总结笔记)

JS对象操作对象增删改查创建对象 let obj = {}新增属性 obj.a = 1修改属性 obj.a = 'a'查询属性 obj.a删除属性 delete obj.a其他操作ob...

程序员的 JavaScript 代码该如何让计算机搞懂?

出自程序员之手的 JavaScript 代码,该如何变成计算机所能理解的机器语言呢?本文将带你走进 JavaScript 引擎内部,一探究竟。作者 | Lydia Hallie译者 | 弯月,责编 |...

2021 年 Node.js 开发人员学习路线图

Node.js 自发布以来,已成为业界重要破局者之一。Uber、Medium、PayPal 和沃尔玛等大型企业,纷纷将技术栈转向 Node.js。Node.js 支持开发功能强大的应用,例如实时追踪...

想快速学习JavaScript ,你必须先知道这几点

对于初学JavaScript ,或者其他任何一种语言。常常会遇到一些问题,比如概念可能会造成混淆 ,找不到时间(有时是动力)学习,很容易忘记已经理解了的东西,工具多又在不断变化,所以不知道从哪里开始...