谈谈我的js学习过程(二)——“Hello World!”

在《谈谈我的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)的博客)

时间: 2024-12-23 09:20:59

谈谈我的js学习过程(二)——“Hello World!”的相关文章

JS的二维数组

今天,记录一下JS的二位数组,并附上例题. 一.二维数组的本质:数组中的元素又是数组. 其实,我们都见过这样的二维数组,只不过没在意罢了,例如: var arr = [[1,2,4,6],[2,4,7,8],[8,9,10,11],[9,12,13,15]] //这就是一个二位数组arr[2][3]; // 11 注意:表示第三列第4行所在的元素.角标从0开始 二.下面介绍二维数组的初始化 记住了二维数组的本质,初始化也难不倒我们了.看一下实例 实例一: var arr = [[1,2],[a,

JS学习二

函数作用域和声明提前 var scope = 'global'; function f() { console.info(scope);   //输出undefined var scope = 'local'; console.info(scope);  //输出 local } 上述代码等价于 function f() { var scope; console.info(scope); scope = 'local'; console.info(scope); } 将函数内的变量声明"提前&q

mongo shell启动配置文件.mongorc.js(二)

mongo shell启动配置文件.mongorc.js(二) 如果你的主目录下有个.mongorc.js文件,那么当你启动shell时他就会自动运行.使用它可以初始化任何你经常使用的helper方法和你不想意外操作的删除方法. 比如,你不想使用默认的dropDatabase()方法了,你可以在.mongorc.js文件中添加下面的命令: DB.prototype.dropDatabase = function() {        print("No dropping DBs!");

玩转Node.js(二)

玩转Node.js(二) 先来回顾上次的内容,上一次我们使用介绍了Node.js并写了第一个服务器端的Hello World程序,在这个Hello World程序中,请求自带的http模块并将其赋给http变量,然后调用http模块的createServer函数,这个函数会返回一个对象,这个对象有一个叫做listen的方法,而这个方法有一个数值参数,指定这个HTTP服务器监听的端口号,我们当时定义的是8888端口号.那么为什么看起来有些复杂呢?那是因为我们向createServer函数传递了一个

js之二维数组定义和初始化三种方法

方法一:直接定义并且初始化,这种遇到数量少的情况可以用 var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]] 方法二:未知长度的二维数组 var tArray = new Array();   //先声明一维 for(var k=0;k<i;k++){        //一维长度为i,i为变量,可以根据实际情况改变

java和js生成二维码

1. java生成二维码 1.1 依赖jar包配置(使用maven依赖) 1 <dependency> 2 <groupId>com.google.zxing</groupId> 3 <artifactId>core</artifactId> 4 <version>3.0.0</version> 5 </dependency> 6 <dependency> 7 <groupId>com.

JS:二维数组排序和获取子级元素

JS:二维数组排序和获取子级元素 1. 二维数组排序 1.按数值排序 1 var arr = [[1, 2, 3], [7, 2, 3], [3, 2, 3]]; 如果我们要按每个子数组的第一列来排序要如何做呢,我们可以定义一个比较函数: 1 arr.sort(function(x, y){ 2 return x[0] – y[0]; 3 }); 这里的比较函数的作用是什么呢?其实是数组依次将数组元素复制给x,y,比如首先将arr[0]赋给x,arr[1]赋给y,然后用x[0] – y[0],根

js生成二维码的jquery组件–qrcode

js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 一.具体用法 1.所需资源 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.您可以到https://github.

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

技术开发人员如何快速生成二维码,下面介绍使用 jquery.qrcode.js生成二维码方式 jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb. 第一种生成没有图片的二维码: 准备环境: jquery-1.8.3.min.js,jquery.qrcode.min.js jquery.qrcode.min.js不好找,我就直接把代码贴出