【JS】我的JavaScript学习之路(2)

3.从JavaScript页面解析过程看执行顺序

代码(test.html)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ch1_example2</title></head><body bgcolor="WHITE"><p>Paragraph 1</p><script type="text/javascript" language="JavaScript">// Script block 1
            alert("First Script Block");</script><p>Paragraph 2</p><script type="text/javascript" language="JavaScript">// Script block 2
            document.bgColor = "RED";alert("Second Script Block");</script><p>Paragraph 3</p></body>
</html>

执行后是这个样子滴。

第一步：

第二步：

第三步：

由此看出，页面解析是自上而下执行的，没有异步，在提示框弹出时，页面是暂停的，而没有去后台执行。

4.用JavaScript将信息写在网页上
接下来我们仅仅使用JavaScript来将“Hello World！”写入空白页面

代码(test2.html)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ch1_example3</title></head><body><p id="ResultP"></p><script type="text/javascript" language="JavaScript">// Script block 1
            document.getElementById('ResultP').innerHTML = 'Hello World';</script></body>
</html>

在此页中,我们使用<p id="ResultP"></p> 创建了一个id是"ResultP"的段落。为标签创建ID，可以方便我们在页面中找到它，也可以使我们在使用CSS时对特殊的标签进行单独的设计。

在创建段落之后，我们通过<script></script>引入JavaScript语句：

document.getElementById('ResultP') 可以获取到这个id是"ResultP"的段落。

然后再通过innerHTML属性，来更改段落中的文字为“Hello World！”

这样我们就可以获得一个形似<p>Hello World!</p>标签的效果了，我们就可以在页面上输出“Hello World！”

转载于:https://www.cnblogs.com/zerolin/archive/2012/08/14/2639049.html

【JS】我的JavaScript学习之路(2)相关推荐

【JS】我的JavaScript学习之路(6)
11.数据类型之间的转换由之前的例子我们可以看出,当我们直接把数值和字符串加在一起的时候,JavaScript会直接把数值转换成字符串输出.一般来说,在JavaScript中这种数据类型自动转换是不 ...
javascript学习之路1
web发展史 Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器.于1993年问世. 1994年11月,Mosaic浏览器的开发人员创建了网景公司(Netscape Communi ...
JavaScript学习之路（WebAPIs阶段）
WebAPIs阶段 Web APIs 是 W3C 组织的标准 Web APIs 我们主要学习 DOM 和 BOM Web APIs 是我们 JS 所独有的部分我们主要学习页面交互功能需要使用 JS ...
javascript学习之路2
作用域 JavaScript作用域: 就是代码名字在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突 js的作用域(es6)之前: 全局作用域局部作用域全局作用域: 整个 ...
javaScript学习之路（1）词法结构
1,javascript是区分大小写的语言 (HTML不区分大小写,XHTML区分大小写) 2.注释行注释 // 段落注释 /*......*/3.直接量: 程序中直接使用的数据值转载于:ht ...
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4
JavaScript的事件系列二判断热键shift,ctrl,alt,win shiftkey 当shift按下时为true,默认为false var v = ev || window.event; ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
【零基础学JS -3】Javascript学习的前情提要（基础概念最佳实践命名约定）
小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容二.JS基础语法 1.代码书写位置 2.变量 ...

【JS】我的JavaScript学习之路(2)

【JS】我的JavaScript学习之路(2)相关推荐

最新文章

热门文章