前端零基础快速入门JavaScript

JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中:

<html>
<head>
<script>
alert(‘Hello, world‘);
</script>
</head>
<http://www.my516.com>
...
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
由<script>...</script>包含的代码就是JavaScript代码,它将直接被浏览器执行。

第二种方法是把JavaScript代码放到一个单独的.js文件,然后在HTML中通过<script src="..."></script>引入这个文件:

<html>
<head>
<script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>

1
2
3
4
5
6
7
8
9
这样,/static/js/abc.js就会被浏览器执行。

把JavaScript代码放入一个单独的.js文件中更利于维护代码,并且多个页面可以各自引用同一份.js文件。

可以在同一个页面中引入多个.js文件,还可以在页面中多次编写<script> js代码... </script>,浏览器按照顺序依次执行。

有些时候你会看到<script>标签还设置了一个type属性:

<script type="text/javascript">
...
</script>

1
2
3
4
但这是没有必要的,因为默认的type就是JavaScript,所以不必显式地把type指定为JavaScript。

如何编写JavaScript
可以用任何文本编辑器来编写JavaScript代码。这里我们推荐以下几种文本编辑器:

Visual Studio Code
微软出的Visual Studio Code,可以看做迷你版Visual Studio,免费!跨平台!内置JavaScript支持,强烈推荐使用!

Sublime Text
Sublime Text是一个好用的文本编辑器,免费,但不注册会不定时弹出提示框。

Notepad++
Notepad++也是免费的文本编辑器,但仅限Windows下使用。

注意:不可以用Word或写字板来编写JavaScript或HTML,因为带格式的文本保存后不是纯文本文件,无法被浏览器正常读取。也尽量不要用记事本编写,它会自作聪明地在保存UTF-8格式文本时添加BOM头。

如何运行JavaScript
要让浏览器运行JavaScript,必须先有一个HTML页面,在HTML页面中引入JavaScript,然后,让浏览器加载该HTML页面,就可以执行JavaScript代码。

你也许会想,直接在我的硬盘上创建好HTML和JavaScript文件,然后用浏览器打开,不就可以看到效果了吗?

这种方式运行部分JavaScript代码没有问题,但由于浏览器的安全限制,以file://开头的地址无法执行如联网等JavaScript代码,最终,你还是需要架设一个Web服务器,然后以http://开头的地址来正常执行所有JavaScript代码。

不过,开始学习阶段,你无须关心如何搭建开发环境的问题,我们提供在页面输入JavaScript代码并直接运行的功能,让你专注于JavaScript的学习。

试试直接点击“Run”按钮执行下面的JavaScript代码:

// 以双斜杠开头直到行末的是注释,注释是给人看的,会被浏览器忽略
/* 在这中间的也是注释,将被浏览器忽略 */
// 第一个JavaScript代码:
1
2
3
浏览器将弹出一个对话框,显示“Hello, world”。你也可以修改两个单引号中间的内容,再试着运行。

调试
俗话说得好,“工欲善其事,必先利其器。”,写JavaScript的时候,如果期望显示ABC,结果却显示XYZ,到底代码哪里出了问题?不要抓狂,也不要泄气,作为小白,要坚信:JavaScript本身没有问题,浏览器执行也没有问题,有问题的一定是我的代码。

如何找出问题代码?这就需要调试。

怎么在浏览器中调试JavaScript代码呢?

首先,你需要安装Google Chrome浏览器,Chrome浏览器对开发者非常友好,可以让你方便地调试JavaScript代码。从这里下载Chrome浏览器。打开网页出问题的童鞋请移步国内镜像。

安装后,随便打开一个网页,然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(Developer Tools)”,浏览器窗口就会一分为二,下方就是开发者工具:

先点击“控制台(Console)“,在这个面板里可以直接输入JavaScript代码,按回车后执行。

要查看一个变量的内容,在Console中输入console.log(a);,回车后显示的值就是变量的内容。

关闭Console请点击右上角的“×”按钮。请熟练掌握Console的使用方法,在编写JavaScript代码时,经常需要在Console运行测试代码。

如果你对自己还有更高的要求,可以研究开发者工具的“源码(Sources)”,掌握断点、单步执行等高级调试技巧。
---------------------

原文地址:https://www.cnblogs.com/hyhy904/p/10983057.html

时间: 2024-08-04 15:03:51

前端零基础快速入门JavaScript的相关文章

零基础快速入门web学习路线(含视频教程)

下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利.高薪水的职业了.所以现在学习web前端开发的技术人员也是日益增多了,但是在学习web前端开发中盲目的去学习而没有一个完整的思路和学习路线也是不行的. 成为一个合格的web前端开发工程师的具备什么条件? 熟练的掌握HTML.CSS.JS.JQ等最基本的技术. 现在,只掌握这些已经远远不够了.无论是开

小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_1、SpringBoot2.x课程介绍和高手系列知识点

1 ======================1.零基础快速入门SpringBoot2.0 5节课 =========================== 1.SpringBoot2.x课程全套介绍和高手系列知识点     简介:介绍SpringBoot2.x课程大纲章节         java基础,jdk环境,maven基础 2.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Springboot2

Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 2. 变量

大家在中学就已经学过变量的概念了.例如:我们令 x = 100,则可以推出 x*2 = 200 试试下面这段 Python 代码 1 import turtle 2 3 turtle.shape("turtle") 4 x = 100 5 turtle.forward(x) 6 turtle.left(45) 7 turtle.forward(2*x) 8 9 turtle.exitonclick() 运行上面的代码,小海龟将画出下面的图案 x = 100 声明了变量 x,并将它赋值为

Kubernetes零基础快速入门!初学者必看!

起源 Kubernetes 源自于 google 内部的服务编排系统 - borg,诞生于2014年.它汲取了google 十五年生产环境的经验积累,并融合了社区优秀的idea和实践经验. 名字 Kubernetes 这个名字,起源于古希腊,是舵手的意思,所以它的 logo 即像一张渔网又像一个罗盘,谷歌选择这个名字还有一个深意:既然docker把自己比作一只鲸鱼,驮着集装箱,在大海上遨游,google 就要用Kubernetes去掌握大航海时代的话语权,去捕获和指引着这条鲸鱼按照主人设定的路线

零基础快速入门SpringBoot2.0 (一)

一.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Springboot2.x用JDK8, 因为底层是 Spring framework5, 2.安装maven最新版本,maven3.2以上版本,下载地址 :https://maven.apache.org/download.cgi 3.Eclipse或者IDE 4.新特性 5.翻译工具:https://translate.google.cn/ 6.spr

零基础快速入门SpringBoot2.0 教程(二)

一.SpringBoot2.x使用Dev-tool热部署简介:介绍什么是热部署,使用springboot结合dev-tool工具,快速加载启动应用 官方地址:https://docs.spring.io/spring-boot/docs/2.1.0.BUILD-SNAPSHOT/reference/htmlsingle/#using-boot-devtools 核心依赖包: <dependency> <groupId>org.springframework.boot</gro

零基础快速入门SpringBoot2.0教程 (四)

一.JMS介绍和使用场景及基础编程模型简介:讲解什么是小写队列,JMS的基础知识和使用场景 1.什么是JMS: Java消息服务(Java Message Service),Java平台中关于面向消息中间件的接口 2.JMS是一种与厂商无关的 API,用来访问消息收发系统消息,它类似于JDBC(Java Database Connectivity).这里,JDBC 是可以用来访问许多不同关系数据库的 API 3.使用场景: 1)跨平台 2)多语言 3)多项目 4)解耦 5)分布式事务 6)流量控

零基础快速入门Java的秘诀

刚开始学习Java时要端正自己的学习的目标和态度,明确学习Java基础重点要做什么. 首先第一点,Java基础的学习,基础很重要,基础好地基牢,才能爬的高! 大家要从以下4个方向努力: 代码能力:一定要敲代码,不管多简单的代码,一定要自己敲一遍. 面向对象分析能力:Java是面向对象的语言,面向对象理解的越深刻,Java基础掌握的越好,是核心的能力. 内存底层和源码分析习惯:刚开始学习的时候也要了解Java底层是如何运行的,养成看源码的习惯,进步会很快. 调试和查错能力:尤其在工作中,特别重要.

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_2 html列表的用法

0.无序列表 1.有序列表 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <!--这是一个注释--> 9 <!--无序列表--> 10 <ul> 1