在html中应用JavaScript
1. 在html中调用js
- js需要用
<script>脚本写入位置</script>声明；也可以用外部文件引入，如<script type="text/javascript" src="script1.js"></script>。 - 当js位于html的
<head>内：这些脚本在选择触发它的时候被触发 - 当js位于html的
<body>内:这些脚本在页面加载时触发
2. js的数据类型/变量/运算符/方法/基本语句/事件
-
数据类型
- string：用
" "或者' '括起来都行 - 数值类型：包括整数和浮点数
- boolean布尔类型：
trueorfalse - undefined未定义变量类型：一个
类型为undefined的值指当变量被创建时，还未给变量赋值时具有的默认值 - null空数据类型
- object:对象类型
- string：用
-
变量
- 作为一个弱数据类型语言，其实是可以不用事先声明变量类型的，不过用
var推断来在使用前声明变量是个好习惯。 - 区分大小写
- 作为一个弱数据类型语言，其实是可以不用事先声明变量类型的，不过用
-
运算符
- 运算：
+ - * / % | & << >> >>> - ~ ++ -- - 赋值：
= += -= *= /= %= - 比较：
> < <= >= == != |= | ^= ^ ?: ||
- 运算：
-
方法
- 用
function声明，注意关键字是小写 - 调用方法，比如在点击事件中调用
<input type="submit" OnClick="my_func()"> return返回值
- 用
-
基本语句
js本身对加不加；不敏感，不过加上是个好习惯。
// if和if..else
if(表达式){
语句1;
语句2;
语句3;
}
else
{
语句1;
语句2;
语句3;
}
//for
for(初值；条件；增量)
{
语句1;
语句2;
语句3;
}
- 事件
onload:文档已加载完成onunload:文档卸载或删除时onclick:单击onmousedown:按下鼠标onmouseup:抬起鼠标onmouseover鼠标移动到指定地onmousemove:指定地的鼠标移动onmouseout:鼠标移出onkeypressonkeydownonkeyuponfocusonbluronsubmit:提交表单onreset:复位表单onselect:用户选择了某些文本onchange
3. 应用
- 调用
setTimeout()计时，倒数关闭
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>表单</title>
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function clock() {
i=i-1;
document.title="窗口将在"+ i + "秒后自动关闭";
if(i>0) setTimeout("clock();",1000);
else self.close();
}
var i=20;
clock();
-->
</script>
</head>
- 风格化后滚动效果
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>跑马灯</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
list-style: none;
}
#goodnews{
background-color: #fc0;
width: 949px;
height: 25px;
line-height: 20px;
padding-top: 5px;
}
input{
background: transparent;
border: none;
font-size: 15px;
font-weight: bold;
font-family: 黑体;
}
</style>
<script type="text/javascript">
var msg = "重大喜讯！！恭喜xiaocuncun身价超过马云马化腾！！！成功跻身中国首富!!!!!!!";
var interval = 400;
var seq = 0;
function txtScroll() {
document.ScrollForm.txtText.value = msg.substring(seq, msg.length) + " " + msg;
seq++;
if (seq > msg.length) {
seq = 0;
}
window.setTimeout("txtScroll();", interval)
}
</script>
</head>
<body onload="txtScroll()">
<div id="goodnews">
<center><form action="" id="form1" name="ScrollForm" method="post">
<label for="textfield"></label>
<input type="text" name="txtText" id="textfield" size="105"/>
</form></center>
</div>
</body>
</html>
- 在
<body>中嵌入脚本
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>跑马灯</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
list-style: none;
}
#goodnews {
background-color: #fc0;
width: 949px;
height: 25px;
line-height: 20px;
padding-top: 5px;
}
input {
background: transparent;
border: none;
font-size: 15px;
font-weight: bold;
font-family: 黑体;
}
</style>
<script type="text/javascript">
var msg = "重大喜讯！！恭喜xiaocuncun身价超过马云马化腾！！！成功跻身中国首富!!!!!!!";
var interval = 400;
var seq = 0;
function txtScroll() {
document.ScrollForm.txtText.value = msg.substring(seq, msg.length) + " " + msg;
seq++;
if (seq > msg.length) {
seq = 0;
}
window.setTimeout("txtScroll();", interval)
}
</script>
</head>
<body onload="txtScroll()">
<div id="goodnews">
<center>
<form action="" id="form1" name="ScrollForm" method="post">
<label for="textfield"></label>
<input type="text" name="txtText" id="textfield" size="105" />
</form>
</center>
</div>
<script>
for (var i = 0; i < 256; i++) {
j = 255 - 1;
document.write("<font style='color:rgb(" + j + "," + i + "," + i + ");'><b>*</b></font>");
if (i % 16 == 15) {
document.write("<br>");
}
}
</script>
</body>
</html>
