• 谈谈我的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对话框。

    image

    在这段代码中,javascript代码被封装在<script></script>元素内,当浏览器读取到这个元素时候,就不会以HTML或XHTML的方式解析这段代码,而是通知浏览器的脚本引擎(js解释器)来管理这里面的内容。嵌入在网页的脚本不一定指的是javascript,script元素的type属性定义了脚本的类型,这个例子中定义的标本类型就是text/javascript。还有其它可能的属性,例如

    image

    关于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)的博客)

  • 相关阅读:
    江湖盛传“阿里三板斧”,其实这才是全部真相!
    PHP算法之四大基础算法
    PHP实现的毫秒定时器,同时解决进程不重复堆积
    leetcode小题解析
    PHP算法之二分查找
    elastic学习笔记
    php中mysqli 处理查询结果集总结
    PHP中的 Iterator 与 Generator
    Laravel源码解析之反射的使用
    PHP下的异步尝试四:PHP版的Promise
  • 原文地址:https://www.cnblogs.com/magicgua/p/4373573.html
Copyright © 2020-2023  润新知