在《谈谈我的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. iPhone中调用WCF服务

    本文介绍的是跨平台iPhone中调用WCF服务,WCF是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由 .NET Framework 3.0+开始引入 iPhone中调用WC ...

  2. Flutter 控件之 AppBar 和 SliverAppBar

    AppBar 和 SliverAppBar 是纸墨设计中的 App Bar,也就是 Android 中的 Toolbar,关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容. A ...

  3. BlockingQueue介绍及使用

    1.BlockingQueue队列和平常队列一样都可以用来作为存储数据的容器,但有时候在线程当中 涉及到数据存储的时候就会出现问题,而BlockingQueue是空的话,如果一个线程要从Blockin ...

  4. Android ListView无数据项时提示

    只需要调用在代码中调用setEmptyView(View emptyView)设置ListView为空时显示这个TextView即可. 布局文件 <?xml version="1.0& ...

  5. Ubuntu 16.04 c++ Google框架单元测试

    环境:Ubuntu 16.04 在github网站上下载gtest框架:终端输入git clone https://github.com/google/googletest.git 然后找到 gool ...

  6. session 之session混乱解决方法(转)

    知道了session混乱产生的原因之后,也就知道了问题的根源.同时也引出了很多的问题: 1.如何记录住在线人员(这里只有帐号的系统用户,不包括访客): 2.如何限制同一个帐号在同一时间段内只能够登陆一 ...

  7. .net网站转到出错页是如何实现的

    <customErrors mode="On" defaultRedirect="GenericErrorPage.htm"><error s ...

  8. 安装 jemalloc for mysql

    参考: MySQL bug:https://bugs.mysql.com/bug.php?id=83047&tdsourcetag=s_pcqq_aiomsg https://github.c ...

  9. openweathermap-免费的天气预报接口

    openweathermap-免费的天气预报接口 其官方网址为:http://www.openweathermap.org/api 静态截图: 具备以下的一些特点: 1. Current weathe ...

  10. wxpython 窗口排版- proportion/flag/border参数说明

    新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料.试验,总结如下. 1.需求实例 来个实例,窗口有3行控件 第一行是文本提示(大小不变,文字左对齐,控件居左). 第二行依次为文本提示 ...