在《谈谈我的js学习过程（一）》中，我简单聊了一下我认为的javascript的学习方法，接下来我们可以尝试来写一个最简单的js代码。

“Hello World!”对于我而言意义真的很重大，例如当你看到一个弹窗美妙优雅（=。=！）地从浏览器里蹦出来，带着你亲手敲上的hello world！

那种成就感，会让你不可自拔地相信你完全可以很好地学会这门语言。当然，也就是那时而言。不废话了……

我们使用javascript并不用特别安装额外的组件，不用配置任何的路径等等，便可以直接在浏览器中运行。最基础的，我们需要做的，就是在.html文档中加一个script代码块。至于这个代码块的位置，我稍微再说，现在先将这个代码块加在<head>元素里面。

【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>window_onload()</title>

		<meta name="author" content="blck" />

		<!-- Date: 2015-03-24 -->

		<script type="application/javascript">

			alert("Hello World!");

		</script>

	</head>

	<body>

	</body>

</html>

这个网页中的script代码只有一行，用于弹出一个alert对话框。

在这段代码中，javascript代码被封装在<script></script>元素内，当浏览器读取到这个元素时候，就不会以HTML或XHTML的方式解析这段代码，而是通知浏览器的脚本引擎（js解释器）来管理这里面的内容。嵌入在网页的脚本不一定指的是javascript，script元素的type属性定义了脚本的类型，这个例子中定义的标本类型就是text/javascript。还有其它可能的属性，例如

关于script的其它属性，可以参照这里的内容来扩展学习。

http://www.w3school.com.cn/tags/tag_script.asp

【关于javascript代码的位置】

首先，按理来说，javascript可以放在HTML文档中的任何位置，但是由于浏览器是按照文档流从上到下来解析页面结构和信息的，所以放在不同的位置会对解析产生不同的效果，或者说，会对javascript的执行有一定影响。

在网页中引用js有几种不同的方法：

第一种最常用的是在head标签内嵌入javascript代码；

第二种是将js代码放在<body></body>标签内；

第三种是引用外部的.js文件，就是在<head />里面写上例如，<script src=”test.js”></script>来调用一个外部的名为test的js文件。

1）定义在head元素中的js代码，会在整个页面完成前就加载js，一般推荐写在这个位置，虽然总会出现一个问题就是，如果想在js获取HTML的某个元素，但是这时候HTML并没有加载完成，容易出现js找不到对应的元素的问题，所以我们会通过window.onload = function(){}，将部分js代码写在这个匿名函数里面，也就可以，在页面全部加载完成之后，再执行window.onload = function(){}里面的js语句。

2）定义在body元素中的js代码，是按照文档流加载的，当遇到js代码的时候，浏览器会停止对html、css和图片等的加载，将js加载完成才继续。

3）引用外部的js文件的话，是一种内容结构分离的做法，当js代码量比较多的时候，可以将js代码写在一个.js文件中，然后用<script />标签引用进来。

（关于js的位置，这个问题涉及的内容比较多，例如对页面效果的呈现，是否能顺序修改dom元素等等，这部分内容之后再单独谈，在这里推荐一篇博客，关于js加载问题

http://www.blogjava.net/BearRui/archive/2010/04/08/web_performance_js_where.html  BearRui(AK-47)的博客）

谈谈我的js学习过程（二）——“Hello World!”的更多相关文章

  1. 谈谈我的js学习过程（一）

    1)我为什么要学习JavaScript? 在我立志说要当一名前端开发工程师之后,我做的第一件事情,就是上知乎.去搜"前端开发工程师"这几个字.然后就会发现很多答案中涉及到,一名前端 ...

  2. 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  3. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  4. 网站开发进阶(十四)JS实现二维码生成

    JS实现二维码生成 绪 项目开发原语:已然花费半天的时间,仍旧未能将二维码显示在订单中.但是可以在单个页面中显示二维码,结合到angularjs的控制器中就失效了,自己是真的找不到其中的原因了.费解! ...

  5. 调用 js 生成图片二维码

    一.js 生成二维码: 首先,需要引用 jQuery 和 jquery.qrcode.js.然后: //生产二维码 $("#qrcodeCanvas").qrcode({ rend ...

  6. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  7. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  8. JS--我发现，原来你是这样的JS（二）（基础概念--躯壳篇--不妨从中文角度看js）

    一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第二篇(基础概念--躯壳篇),有着部分第三章的知识内容,当然其中还有我个人的理解. 红宝书这本书可以说是难啃的,要看完不容易,挺 ...

  9. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

随机推荐

  1. BZOJ4364: [IOI2014]wall砖墙(线段树)

    题意 题目链接 Sol 一个显然的思路是维护最大最小值以及最大最小值的覆盖标记. https://paste.ubuntu.com/p/WXpBvzF6Y2/ 但实际上因为这题只需要输出最后的操作序列 ...

  2. 爬虫必备—Scrapy

    一.Scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 ...

  3. Vue 实现复制到粘贴板功能

    vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖  * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...

  4. P2P文件上传

    采用uploadify上传  官网:http://www.uploadify.com/  (有H5版本和flash版本,H5收费,所以暂时用flash) uploadify的重要配置属性(http:/ ...

  5. 润乾在jetty应用服务器下的JNDI配置一

     一. 此处绑定的数据源是以 DBCP 为实现.首先必须将数据库驱动(这里用了MYSQL数据库)和DBCP所需要的 Jar 包复制到 Jetty 根目录的 lib 目录下.DBCP主要需要以下3个 ...

  6. JAVA 分布式 - 分布式介绍

    什么是分布式系统? 要理解分布式系统,主要需要明白一下2个方面: 1.分布式系统一定是由多个节点组成的系统. 其中,节点指的是计算机服务器,而且这些节点一般不是孤立的,而是互通的. 2.这些连通的节点 ...

  7. JVM知识（五）：垃圾回收算法

    在介绍垃圾回收算法之前,我们需要先了解一个词“stop the world”,stop the world会在执行某一个垃圾回收算法的时候产生,JVM为了执行垃圾回收,会暂时java应用程序的执行,等 ...

  8. 第三届移动互联网测试开发大会 PPT合集下载

    PPT下载地址 http://www.51test.space/archives/2887 大会介绍 Mobile Testing Summit China(中国移动互联网测试开发大会)是一个以移动测 ...

  9. Android组件系列----当前Activity跳转到另一个Activity的详细过程

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  10. Latex 数学公式使用入门

    Latex 数学公式使用示例 Latex 数学公式命令中,数学符号都使用反斜杠(backslash, '\')转义英文缩略词 , 一些简单的数学符号命令: 其使用大括号(curly braces, ' ...