在《谈谈我的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. pipenv虚拟环境和依赖管理工具

    一.pipenv用来干嘛 每门编程语言发展到现在,都需要一个工具,能够管理代码版本和控制生产环境和测试环境依赖一致的,这样减少不可代码上线之后不可控的问题出现.Php有Composer.Nodejs有 ...

  2. Javaweb查询客户&分页部分代码

    pageBean工具类代码(分页工具) package com.home.domain; import java.util.List; /** * 分页的JavaBean * @author Admi ...

  3. GADL针对矢量数据格式转换的实用工具 —— ogr2ogr

    最初,因为可爱的学弟请教如何将ESRI Shapefile文件导入Google Earth接触到了Ogr2Ogr.粗略了解之后发现,这小东西功能强大. 谷歌地球支持矢量数据的展示,前提是数据符合KML ...

  4. css3画半圆 ， 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  5. syscall to rop

    前言 hitcon 2017 的 start 题,比较简单,练练手. 题目链接: https://gitee.com/hac425/blog_data/tree/master/hitcon2017 正 ...

  6. ahjesus wp-autopost破解版，亲测可用

    在funtion.php里 把fetchUrl 这个函数的判断去掉 直接执行判断为真的结果下面是修改后的函数 function fetchUrl($_var_22){        global $w ...

  7. 3.HTML颜色

    一,HTML 颜色采用的是 RGB 颜色,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色. <p st ...

  8. 关于Entity Framework更新的几种方式以及可能遇到的问题（附加类型“Model”的实体失败，因为相同类型的其他实体已具有相同的主键值）在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值，则可能会发生上述行为

    在日常使用Entity Framework中,数据更新通常会用到.下面就简单封装了一个DBContext类 public partial class EFContext<T> : DbCo ...

  9. django使用LDAP验证

    1.安装Python-LDAP(python_ldap-2.4.25-cp27-none-win_amd64.whl)pip install python_ldap-2.4.25-cp27-none- ...

  10. Centos7下Mysql通过.frm和.ibd恢复数据

    通过.frm和.ibd文件恢复表结构和数据 这里以hue数据库中的desktop_document2表为例 分成两步骤,先去表结构,再取数据,最好在一个用完就可以删除的数据库中进行 取表结构篇: 1. ...