0 0 0 1 ★ How JavaScript
本帖最后由 不二如是 于 2017-3-30 17:56 编辑大家一起玩HTML那么久了,编译环境建议使用:WebStorm
至于理由,请看:0 0 4 8 - 鸟枪换大炮 | 【新番重要通知】
当然你要用记事本、Sublime、Chrome、DW、Safari都可以,使得顺手就好~
不是有这么一句话:
大小并不重要,重要的是技巧和控制!{:10_297:}
Js不仅能嵌入到HTML页面中,还能以独立文件的形式进行存放。
这个在0 0 0 9 - 初识JavaScript(Js)有进一步说明,就不再废话了。
常见的在页面中使用JS有以下三种形式:
行内Js脚本、内部Js脚本、外部Js脚本
[*]行内Js脚本
直接将Js脚本嵌入到HTML标签内,常用来设置鼠标事件、超链接等。
给你个代码,看着玩一玩:
**** Hidden Message *****
[*]内部Js脚本
当页面内嵌入大量Js代码时,就不要直接都怼在HTML当中了!
可以将Js脚本单独提取出来放在<script></script>标签中。
这种办法我在HTML后面的教程中经常用到,用兴趣的可以看看:
0 1 0 0 - 打造“超级时间轴 ”| 【纪念100更】
0 0 9 9 - 鱼C - 7周年庆典之“固定菜单”
0 0 9 5 - 手动打造炒鸡提示图层
给你个代码看看长啥模样:
<body>
<section id="content">
<article>
<h1>鱼C - 7周年盛典</h1>
<nav id="nav">
<ul id="page-nav">
<li><a href="">邀请函主页</a> </li>
<li><a href="">鱼C里程碑</a> </li>
<li><a href="">庆典计划</a> </li>
<li><a href="">小甲鱼的一封信</a> </li>
<li><a href=""> 未来计划</a> </li>
</ul>
</nav>
<img src="1.jpg">
<p>破窗效应,是1982年,由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指,如果有人打坏了一幢建筑的窗户玻璃,却没有人维修,经过的路人,就会像受到了暗示一样,被诱发打破更多的窗户。然后,这个街区其他建筑的窗户,也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角,扔几张碎纸。过几个小时后你再去看,那个地方多半就有了一小堆垃圾。十几个行人在等红灯,只要有一两个人旁若无人地闯红灯过马路,后面很多人就会跟上,这就是所谓的中国式过马路:凑够一撮人就可以走了,和红绿灯无关。
无序,会邀请无序。混乱,会引发混乱。<br><br>“凭什么他可以,我就不行啊?”,“大家都这样,总不会有事吧?”在占便宜、做坏事上,寻求公平,这种心理,就是“畸形公平”的心理。所以,在第一扇破窗出现时,就必须立即修复。否则,当整个街区都出现混乱时,就积重难返了。</p>
</article>
</section>
<script type="text/javascript">
var pagenav=document.getElementById("page-nav");
var pagenav_top = pagenav.offsetTop;
window.onscroll = function(){
var scrollTop = document.body.scrollTop;
if(scrollTop < pagenav_top){
pagenav.className = "";
}else{
pagenav.className = "fix";
}
}
</script>
</body>
[*]外部Js脚本
当有更多的Js代码,就索性不要放在HTML文档中,将二者分离!
通过外部文件的形式存放Js脚本,Js脚本存在后缀为".js"文件中。
然后在HTML文件中通过<script>进行调用。
看例子,HMTL代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>外部JavaScript脚本-鱼C工作室</title>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
</body>
</html>
test.js代码:
// JavaScript 脚本
alert("哇塞,祝贺这位鱼油,导入成功啦");
点击html文件,效果图:
这位鱼油,如果喜欢本系列Js帖子,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_297:} ) 进击JS
OOXX{:10_256:} 新手·ing 发表于 2017-4-3 11:55
OOXX
XXOO{:10_297:} {:5_90:} 开始学习JS,希望讲的清除一点,因为几乎是0基础入门 xx 告诉你一个秘密,有个链接的地址少了个"l" 现在不是推荐 外部JS嘛? 玩玩 {:10_256:} 谢谢楼主无私 学习了,谢谢 {:5_104:} 看看 {:5_109:} 666 {:10_266:}{:10_266:}{:10_266:} {:10_261:}{:10_261:}{:10_261:}666666 看看