学习完了HTML和CSS之后,马上又学习了JS,发现其实也没有多少内容,之前有编程基础,所以学起来也比较轻松,这里打算做个总结吧。(学习网址点击打开链接)
首先呢,来感受下JS的流行力吧:
JavaScript 是属于网络的脚本语言!
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。(转自w3school原话)
![大笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
好啦,言归正传,看看JS的主要内容有哪些。
(一)第一个当然是在HTML里的表现形式是怎么样的??
首先我们学过html知道有标签这个概念,比如head,body呀,JS也是通过写入标签里然后通过html输出的。这个标签就是<script></script>,那么通过什么写入这个标签里面呢?document.write()(这里关于document.write会覆盖原文档流的理解会单独写一篇文章)即可实现,实例是接受最快的途径(一定要自己敲一遍加深记忆!!!!!):
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>这是我学习JS的第一个实例</head>
<body>
<h1>将JS直接写入HTML文档输出流中</h1>
<span style="color:#FF0000;"><script>
document.write("<h2>地点:哈工大c栋</h2>");
document.write("<p>时间是11月8号</p>");
</script></span>
</body>
</html></span>
很简单,整体格式就是之前学过的HTML标准格式,只不过JS通过document.write()写入到html里面而已,也就是说JS就是用来丰富操作HTML而产生的一种工具,下面是网页显示结果。
结果:
(二)写入进去了之后,那么怎么体现JS强有力的交互性的?
这里我们看一个比较长的脚本,多接触点东西:
<!DOCTYPE html>
<html>
<head>这个脚本包括找错,写入,交互很多功能</head>
<script> <span style="color:#FF0000;">//(注意一下,这是JS的一种注释格式,下面是是第二种注释方法)插入JS</span>
function myFunction()
<span style="color:#000099;">{</span>
<span style="color:#FF0000;">try</span> <span style="color:#FF0000;"> //加入了查找错误的功能。try,catch
{</span>
var x=<span style="background-color: rgb(255, 0, 0);">document.getElementById("demo").value;</span>
<span style="color:#FF0000;">
<span style="color:#990000;">/*</span></span><span style="color:#990000;">这个语句基本上是公式了,千万要注意大小写,JS对大小写很敏感的哦,意思是找到id为demo下元素
的值然后赋给变量x,var这里是JS默认定义变量,变量的类型有数字,布尔型,字符串。*/ </span>
if (x=="") <span style="color:#FF0000;">throw</span> "该值为空";
if (x>10) throw "太大啦";
if (x<2) throw "太小啦";
if (isNaN(x)) throw "不符合格式要求";
if (x==5) throw "bingo,你猜对了对了"
}
}
<span style="color:#FF0000;">catch(err)</span>
{
var y=document.getElementById("mess"); <span style="color:#FF0000;"> //如果没找到这个值的话,那么久写入下面的字符串</span>
y.innerHTML="+err+".";
}
</script>
<h1>其实很多语法和c以及python都如出一辙,学起来很快的</h1>
<p>请猜一个数:</p>
<input id="demo" type="text">
<button οnclick="myFunction">猜数吧!</button>
<span style="color:#FF0000;"><p id="mess"></p></span> <span style="color:#000099;">//这条语句可千万不要忘了,没输入之前是空的,但是一旦有输出结果了会有相应的输出提示,看下面结果里的图片就知道了。</span>
</body>
</html>
结果:
总结:凡事都是按照套路出牌的,从上面的实例可以学到很多东西。