在《谈谈我的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. com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/NOTICE

    在将vivo eclipse sdk 迁移 android studio  时候报错 Error:Execution failed for task ':vivosdk:transformResour ...

  2. Difference between ReLU、LReLU、PReLU、CReLU、ELU、SELU

    激活函数 ReLU.LReLU.PReLU.CReLU.ELU.SELU  的定义和区别 ReLU tensorflow中:tf.nn.relu(features, name=None) LReLU ...

  3. Android设备网络、屏幕尺寸、SD卡、本地IP、存储空间等信息获取工具类

    Android设备网络.屏幕尺寸.SD卡.本地IP.存储空间.服务.进程.应用包名等信息获取的整合工具类. package com.qiyu.ddb.util; import android.anno ...

  4. flutter开发中常用的dart插件

    flutter插件官网地址:https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片,并可以用相机拍摄新照片的flutter插件 2 ...

  5. okhttp3带cookie请求

    Request经常都要携带Cookie,上面说过request创建时可以通过header设置参数,Cookie也是参数之一.就像下面这样: Request request = new Request. ...

  6. SQL Server数据库快照的工作方式

    SQL Server数据库快照的工作方式 翻译自:How Database Snapshots Work 最近有一个帖子<errorlog中的异常信息rolled forward 和rolled ...

  7. layui和bootstrap对比

    layui和bootstrap 对比 这两个都属于UI渲染框架. layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了.比较新,轻量级,样式简单好看. bootstrap 相对来 ...

  8. 渐变显示渐变消失的BackgroundView

    渐变显示渐变消失的BackgroundView 效果如下: 源码: BackgroundView.h 与 BackgroundView.m // // BackgroundView.h // Test ...

  9. Linux ss命令详解

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信息 ...

  10. CDN高级技术专家周哲：深度剖析短视频分发过程中的用户体验优化技术点

    深圳云栖大会已经圆满落幕,在3月29日飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上传.存储 ...