(JS有什么作用)
HTML负责呈现的内容,css负责以何种形式来呈现。
实际上我们更多的页面是动态的,比方说新浪
热点、聚焦......页面自动切换
时间也应该动态显示
还有验证码、注册页面的数据验证.....
那么怎么才能让页面动起来
答案就是JavaScript!
HTML+css:实现了静态页面
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
color: red;
font-size: 36px;
}
</style>
</head>
<body>
<P id="time">今天是.....</P>
</body>
<script>
var p1 = document.getElementById("time");
p1.innerHTML = new Date().toString();
</script>
显示结果为:
很明显这内容不是HTML提供的,而是就是动态生成的。所以JS是实现动态页面的,即页面的行为
<style>
#div1{
height: 100px;
width: 100px;
background: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="div1" ></div>
</body>
<script language="javascript">
var timer = setInterval("zoom()",50);
var div = document.getElementById("div1");
var timer;
var width = 100;
function zoom(){
if(width >= 600){
clearTimeout(timer);
}
width = width + 5;
div.style.width = width + "px";
}
</script>
在这个案例是用定时器动态去改变元素的宽度,从而实现动态页面
作业:
(1)使用定时器显示动态的时间,形如10:00:21.
(2)修改第二个案例,实现方块颜色的渐变
(3)总结HTML和css以及JavaScript的注释方式,并说明注释的作用
JS是一种解释语言
计算机语言分为编译型和解释型
程序员使用高级语言编制程序,但是程序最终是由计算机去执行,那么计算机只能执行机器语言(即二进制代码),那么这个过程就必然有一个从高级语言到机器语言的翻译过程。
有两种编译方式
(1)编译:将代码整体翻译成机器代码,如有错误则停止翻译,全部成功翻译才能完成执行;
(2)解释:将代码翻译成一条马上执行一条,如果遇到错误就停止
JavaScript 备注方式1.//单行备注
2./*注释内容*/多行注释(css中也可以)
(<!-- --!>用于HTML里面的备注)
计算机语言分为两种:编译型语言:Java 、c++、c、PHP.....
解释型语言:JavaScript、css...
html:负责呈现的内容。
css:负责内容呈现的方式。
JavaScript:负责内容的行为。
1.2两种引用方式
JS书写在<script>里-内部
用<script src=“路径”>-外部引用