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)”，掌握断点、单步执行等高级调试技巧。
---------------------

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

  1. 零基础快速入门web学习路线（含视频教程）

    下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...

  2. 序言 - PHP零基础快速入门

    我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...

  3. 零基础快速入门SpringBoot2.0 （一）

    零基础快速入门SpringBoot2.0 (一) 一.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Spr ...

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

    1 ======================1.零基础快速入门SpringBoot2.0 5节课 =========================== 1.SpringBoot2.x课程全套介绍 ...

  5. [易学易懂系列|rustlang语言|零基础|快速入门|（28）|实战5：实现BTC价格转换工具]

    [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具] 项目实战 实战5:实现BTC价格转换工具 今天我们来开发一个简单的BTC实时价格转换工具. 我们首先 ...

  6. [易学易懂系列|rustlang语言|零基础|快速入门|（27）|实战4：从零实现BTC区块链]

    [易学易懂系列|rustlang语言|零基础|快速入门|(27)|实战4:从零实现BTC区块链] 项目实战 实战4:从零实现BTC区块链 我们今天来开发我们的BTC区块链系统. 简单来说,从数据结构的 ...

  7. [易学易懂系列|rustlang语言|零基础|快速入门|（26）|实战3：Http服务器（多线程版本）]

    [易学易懂系列|rustlang语言|零基础|快速入门|(26)|实战3:Http服务器(多线程版本)] 项目实战 实战3:Http服务器 我们今天来进一步开发我们的Http服务器,用多线程实现. 我 ...

  8. [易学易懂系列|rustlang语言|零基础|快速入门|（25）|实战2：命令行工具minigrep（2）]

    [易学易懂系列|rustlang语言|零基础|快速入门|(25)|实战2:命令行工具minigrep(2)] 项目实战 实战2:命令行工具minigrep 我们继续开发我们的minigrep. 我们现 ...

  9. [易学易懂系列|rustlang语言|零基础|快速入门|（24）|实战2：命令行工具minigrep（1）]

    [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)] 项目实战 实战2:命令行工具minigrep 有了昨天的基础,我们今天来开始另一个稍微有点 ...

随机推荐

  1. Mesos, Marathon, Docker 平台部署记录

    Mesos, Marathon, Docker 平台部署记录 所有组件部署基于Ubuntu 14.04 x64 主机 IP 角色 master 192.168.1.3 Mesos Master, Ma ...

  2. react 项目实战（四）组件化表单/表单控件 高阶组件

    高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...

  3. 【MySQL】Win7下修改MySQL5.5默认编码格式

    一般安装MySQL程序过程中,有一步骤是选择MySQL的默认编码格式的,程序默认为Latin1编码格式,当然也可以选择第三个选项,手动选择gbk或utf8编码格式,以支持中文数据.如下图: 现在问题出 ...

  4. 20160225.CCPP体系具体解释(0035天)

    程序片段(01):CircleList.h+CircleList.c+main.c 内容概要:环形链表 ///CircleList.h #pragma once #include <stdio. ...

  5. POJ 1625 Censored! （AC自己主动机 + 高精度 + DP）

    题目链接:Censored! 解析:AC自己主动机 + 高精度 + 简单DP. 字符有可能会超过128.用map映射一下就可以. 中间的数太大.得上高精度. 用矩阵高速幂会超时,简单的DP就能解决时间 ...

  6. 【bzoj4034】[HAOI2015]T2

    siz[v]表示以v为根的子树的节点数 top[v]表示v所在的重链的顶端节点 fa[v]表示v的父亲 pos[v]表示v的父边标号 mx[v]表示v的子树中边的标号最大的那条边 参考:http:// ...

  7. PNG vs. GIF vs. JPEG vs. SVG - When best to use?

    image - PNG vs. GIF vs. JPEG vs. SVG - When best to use? - Stack Overflow https://stackoverflow.com/ ...

  8. [mac]WireShark检測不到网卡怎么办？

    wireshark是一个很好用的抓包工具,有windows版本号和mac版本号,在mac下安装wireshark,启动后发现提示"There are no interfaces on whi ...

  9. boxworld开发日记2019-6-8

    打算做一个类似RimWorld的游戏,这里记录一下历程.首先,简单回顾一下. 2018年12月23日  场景管理,打算使用四叉树,后来发现四叉树在空间组织和内存占用方面并不占优势,之后计划使用地图分块 ...

  10. 洛谷 P2142 高精度减法(模板)

    题目描述 高精度减法 输入输出格式 输入格式: 两个整数a,b(第二个可能比第一个大) 输出格式: 结果(是负数要输出负号) 输入输出样例 输入样例#1: 2 1 输出样例#1: 1 说明 20%数据 ...