- 具体参见JScript.chm、HTML DOM 参考手册.CHM和DHTML 手册.chm
1.first_javascript
<html>
<head>
<script language="javascript">
alert("HelloWorld!");
</script>
</head>
<body>
</body>
</html>
2.外部应用
<html>
<head>
<script language="javascript" src="js/test.js">
</script>
</head>
<body>
</body>
</html>
- test.js
alert("HelloWorld!");
3.javascript-test01
<html>
<head>
</head>
<body>
<input type="button" value="登录" onclick="alert('用户名为空,请检查!')">
</body>
</html>
4.javascript-test02
<html>
<head>
<script language="javascript">
var v1="HelloWorld";
var v2='HelloWorld';
var v3=55555;
var v4=12.5;
var v5;
alert("v1="+v1);
alert("v2="+v2);
alert("v3="+v3);
alert("v4="+v4);
alert("v5="+v5);
</script>
</head>
<body>
</body>
</html>
5.ifelse
<script>
var v =5;
if (v == 10){
alert("v=10");
}else if(v == 20){
alert("v=20");
}else{
alert("其他。。。。");
}
</script>
6.switch
<script>
var v =5;
switch (v){
case 1:
alert("v=1");
break;
case 2:
alert("v=2");
break;
case 3:
alert("v=3");
break;
case 4:
alert("v=4");
break;
case 5:
alert("v=5");
break;
default:
alert("其他。。。");
}
</script>
7.continue
<script language="javascript">
for(var i=0;i<10;i++){
if(i % 2 == 0){
continue;//继续下一次循环
}
alert(i);
}
</script>
8.break
<script language="javascript">
for(var i=0;i<10;i++){
if(i > 5){
alert(i);
break;//跳出循环,转到p1位置
}
alert(i);
}
//p1位置
</script>
9.object
<script language="javascript">
//object为javascript的内置对象
var p = new Object();
p.name = "王五";
p.age = "20";
alert(p.name+","+p.age);
</script>
10.mathObject
<script language="javascript">
//Math为javascript的内置对象,可以直接用
alert(Math.random());
//给随机数取整
alert(Math.round(Math.random() * 10));
alert(Math.round(-10.6));//-11
alert(Math.round(10.6));//11
alert(Math.abs(-50.5));//-50.5
</script>
11.DateObject
<script language="javascript">
var Mydate = new Date();
alert(Mydate.getYear()+"-"+Mydate.getMonth()+"-"+Mydate.getDate());
</script>
12.ArrayObject.html
<script language="javascript">
var MyArray = ["a","b","c"];
for(var i=0;i<MyArray.length;i++){
alert(MyArray[i]);
}
var MyArray1 = new Array(10);
for(var i=0;i<MyArray1.length;i++){
MyArray1[i] = i;
}
//document打印输出
for(var i=0;i<MyArray1.length;i++){
document.write(MyArray1[i]);
}
document.write("<p>");
//join函数应用
document.write(MyArray1.join("#"));
document.write("<p>");
//上述join函数应用也可以这样实现
var s = "";
for(var i=0;i<MyArray1.length;i++){
s+=MyArray1[i]+"#";
}
document.write(s.substring(0,s.length-1));
document.write("<p>");
//数组反转
MyArray1.reverse();
for(var i=0;i<MyArray1.length;i++){
document.write(MyArray1[i]);
}
document.write("<p>");
//数组升序排列
MyArray1.sort();
for(var i=0;i<MyArray1.length;i++){
document.write(MyArray1[i]);
}
document.write("<p>");
</script>
13.全局变量
<html>
<head>
<script language="javascript">
//全局变量
var v1="全局变量";
function myFunction(){
alert(v1);
}
</script>
</head>
<body onload = "myFunction()">
</body>
</html>
14.局部变量
<html>
<head>
<script language="javascript">
//局部变量
function myFunction(){
var v1="局局变量";
alert(v1);
}
</script>
</head>
<body onload = "myFunction()">
</body>
</html>
15.parseInt_Float
<html>
<head>
<script language="javascript">
var v1 = "20";
alert(v1 + 10);
alert(parseInt(v1) + 10);
var v1 = "3.3";
alert(v1 + 5);
alert(parseFloat(v1) + 5);
</script>
</head>
<body onload = "myFunction()">
</body>
</html>
16.自定义对象1
<script language="javascript">
function Person(){
}
var p = new Person();
p.name = "张三";
p.age = 20;
alert(p.name+","+p.age);
</script>
17.自定义对象2
<script language="javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
var p = new Person("李四",20);
alert(p.name+","+p.age);
</script>
18.test_dom
<html>
<head>
<script language="javascript">
function button_onClick(){
alert(document.getElementById("userid").value);
}
</script>
</head>
<body>
用户名:<input type="text" name="username" id="userid"><p>
<input type="button" value="保存" onclick="button_onClick()">
</body>
</html>
19.消息提示框
<script language="javascript">
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
window.alert("欢迎访问我们的 Web 页!");
}
else window.alert("再见啦!");
</script>
20.正则表达式
<script language="javascript">
var s1="dfasdfasfgooasdf";
//是否存在oo子串
alert(s1.search(/o{2}/));
var s2="dfasdfasfgOOasdf";
//是否存在OO子串(大写)
alert(s2.search(/o{2}/));
alert(s2.search(/o{2}/i));//i表示忽略大小写
//将所有的oo替换为“中国”
var s3 = "asdfaooasdfasOOafaooasdfasOOadfdfgoodf";
var s4 = s3.replace(/o{2}/ig,"中国");//g表示遍历所有oo
alert(s4);
</script>
21.正则表达式2.html
<script language="javascript">
var s1="dfasdfasfgooasdf";
var re = new RegExp(/o{2}/i);//创建正则表达式对象
alert(re.test(s1)); //re.test(string1)返回string1中是否有re字串
</script>
22.简易计算器.html
<html>
<head>
<title>简易计算器</title>
<script language="javascript">
function button_click(){
//alert("asdfasdf");
//alert(document.getElementById("first").value);//获取第一个文本框的数据值
//alert(parseFloat(document.getElementById("first").value)+parseFloat(document.getElementById("second").value));
var first = parseFloat(document.getElementById("first").value);
var second = parseFloat(document.getElementById("second").value);
var result = null;
switch (document.getElementById("flag").value){
case "+" :
result = first + second;
break;
case "-" :
result = first - second;
break;
case "*" :
result = first * second;
break;
case "/" :
if(second==0)
alert("除数不能为0!");
else
result = first / second;
break;
}
//alert(result);
//document.getElementById("result").value = result;
document.getElementById("resultspan").innerHTML= result;
}
</script>
</head>
<body>
<h1 align="center">简易计算器</h1>
<hr>
<div align="center">
<input type="text" name="first" id="secod">
<select name="flag" id="flag">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="second" id="second">
<input type="button" value="=" onclick="button_click()">
<!--<input type="text" name="result">-->
<span id="resultspan"></span>
</div>
</body>
</html>
23.简易计算器2.html
<html>
<head>
<title>简易计算器</title>
<script language="javascript">
function button_click(){
var first = parseFloat(document.getElementById("first").value);
var second = parseFloat(document.getElementById("second").value);
var flag = document.getElementById("flag").value;
//var result = null;
eval("var result = " + first + flag + second);
document.getElementById("resultspan").innerHTML= result;
}
</script>
</head>
<body>
<h1 align="center">简易计算器</h1>
<hr>
<div align="center">
<input type="text" name="first" id="secod">
<select name="flag" id="flag">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="second" id="second">
<input type="button" value="=" onclick="button_click()">
<!--<input type="text" name="result">-->
<span id="resultspan"></span>
</div>
</body>
</html>