在《谈谈我的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. 浏览器根对象document之字符串属性

    1.1 停止使用的属性 fgColor.linkColor.vlinkColor.alinkColor.bgColor. 1.2 文档地址 document.URL 与documentURI属性返回同 ...

  2. js匹配日期和时间的正则表达式

    自己写比较头疼,copy下来留着以后用 //日期的正则表达式 -]\d{}-([-]|[-])-([-]|[-][-]|[-])$/; var regExp = new RegExp(reg); if ...

  3. .hivehistory

    在当前用户的家目录下有个.hivestory文件,里面存放了用户执行的hive操作记录,如下: [hadoop@hadoop1 hive-0.14]$ cat ~/.hivehistory show ...

  4. MQTT介绍（3）java模拟MQTT的发布，订阅

    MQTT目录: MQTT简单介绍 window安装MQTT服务器和client java模拟MQTT的发布,订阅 在此强调一下mqtt的使用场景: 1.不可靠.网络带宽小的网络 2.运行的设备CPU. ...

  5. SqlServer横向扩展负载均衡终极利器SqlServerProxy 不限功能永久免费

    一直以来,MySQL因为开源,诞生了很多扩展方案,类似Amoeba.Atlas.Cobar.MySQLProxy等,大都基于MySQL通信协议来定制解决方案,让我们很羡慕嫉妒,但没办法,Microso ...

  6. UpdateServer事务实现机制

    UpdateServer(UPS) 是OceanBase的写入单点,一个集群中只有一台UPS服务器,所有的写都写入到这台机器.OceanBase采用基于静动态数据分离的机制,静态数据存储在静态数据服务 ...

  7. MsSQL使用加密连接SSL/TLS

    说明 应用程序通过未加密的通道与数据库服务器通信, 这可能会造成重大的安全风险.在这种情况下, 攻击者可以修改用户输入的数据, 甚至对数据库服务器执行任意 SQL 命令. 例如,当您使用以下连接字符串 ...

  8. 退出全屏监听ESC事件

    fullscreenchange事件 fullscreenchange:当窗口大小改变时触发 isFullscreen:全局变量 window.addEventListener("fulls ...

  9. gridview导出数据，如果为0开头，丢失0解决方案

    1.protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e )  {    if (e.Row.Row ...

  10. golang 防知乎 中文验证码 源码

    原创,转载请注明出处! 最开始用图形来模仿文字进行各种角度的倒立和排列,后来切换为文字后,有很多问题.总结如下: 1.程序在画图形和画文字方面不一样,图形的是从原点开始(0,0),而文字则从文字的基线 ...