1 基础知识
本章主要回答两个问题:
(1)为什么需要有JavaScript(JS有什么作用)?
(2)怎么用?
1.1 基本概念
HTML负责呈现什么内容,CSS负责以何种方式来呈现。
HTML+CSS:实现了静态页面。
实际上,我们更多的页面的要求是动态的,比方说新浪网
热点、聚焦……页面的自动切换。
时间也应该是动态显示的。
还有验证码、注册页面的数据验证……
那么怎么才能让页面动起来呢?
答案就是JavaScript!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单运算</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p id="time">今天是……</p>
</body>
<script>
var p1 = document.getElementById("time");
p1.innerHTML = new Date().toString();
</script>
</html>
显示结果为:
很明显,这个内容不是HTML提供的,而是由JS动态生成的。
所以JS是实现动态页面的,即页面的行为。
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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>
</html>
这个案例是用定时器动态去改变元素的宽度,从而实现动态效果。
HTML:负责呈现的内容。
CSS:负责内容呈现的方式。
JavaScript:负责内容的行为。
1.2两种引用方式
怎么用?
两种方式:
(1) 内部引用,使用<script>标签,代码直接写在标签中。
(2) 外部引用,<script src="E103-01-03.js"></script>。
JavaScript的备注方式:1.//单行注释。
2./*注释内容*/多行注释
JS是一种解释型语言
计算机语言分为编译型和解释型
程序员使用高级语言编制程序,但是程序最终是由计算机去执行,那么计算机只能执行机器语言(即二进制代码),那么这个过程就必然有一个从高级语言到机器语言的“翻译”过程。
有两种“翻译”方式:
(1) 编译:将代码整体翻译成机器代码,如果有错误则停止翻译,全部成功翻译完才能执行;
(2) 解释:将代码翻译一条马上执行一条,如果遇到错误则停止。
计算机语言分为两种:编译型语言:JAVA、C++、C、PHP….
解释型语言:JavaScript、CSS…