1、基础语法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: orange;
}
</style>
<script language="JavaScript">
var arr = new Array(3);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
var result1, result2, result3;
result1 = true && false;
result2 = true || false;
result3 = !true;
var str1, str2;
str1 = "today";
str2 = " off";
var sentence;
sentence = "今天是2017年1月18日星期三";
var compareStr;
compareStr = (3 > 4) ? "三大于四" : "三小于四";
</script>
</head>
<body>
<br>
<script language="JavaScript">
document.write("长度定义了没用,还是可以打印" + arr[3] + "\n");
</script>
<br>
<p>字符串拼接</p>
<script language="JavaScript">
document.write(str1 + str2 + "\n");
</script>
<p>字符串substring</p>
<script language="JavaScript">
document.write(sentence.substring(3, 13));
</script>
<p>条件操作符</p>
<script language="JavaScript">
document.write(compareStr);
</script>
<p>时间</p>
<script language="JavaScript">
var today = new Date();
var hour = today.getHours();
if (hour < 12) {
document.write("早上好");
}
else if (hour == 12) {
document.write("中午好");
} else {
document.write("下午好");
}
</script>
<p>循环</p>
<script language="JavaScript">
var i = 1;
while (i < 10) {
// document.write(i+"<br>");
document.write(i + " ");
i++;
}
</script>
<p>switch语句</p>
<script language="JavaScript">
var hour = 9;
switch (hour) {
case 1:
document.write("1");
break;
case 2:
document.write("2");
break;
case 9:
document.write("9");
break;
default :
document.write("none");
}
</script>
<p>for循环</p>
<script language="JavaScript">
var arr = new Array(1, 2, 3, 4, 5);
for (i = 0; i < arr.length; i++) {
document.write(arr[i] + " - ");
}
</script>
<p>do while</p>
<script language="JavaScript">
var i = 0;
do {
document.write(i + " ");
i++;
} while (i < 6)
</script>
<p>while</p>
<script language="JavaScript">
var sentence = "今天是2017年1月18日星期三";
var i = 0;
while (i < 10) {
document.write(sentence.charAt(i) + " ");
i++;
}
</script>
</body>
</html>
2、函数调用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js函数事件处理</title>
<style type="text/css">
p {
color: orange;
}
</style>
<script language="JavaScript">
function test() {
document.write("我是js方法里输出的语句");
}
function testParam(a) {
document.write("输出" + a);
}
function testBack(a,b){
return a+b;
}
</script>
</head>
<body>
<p>直接调用js的无参无返回值方法</p>
<script language="JavaScript">
test()
</script>
<p>直接调用js的有参数无返回值方法</p>
<script language="JavaScript">
testParam("我是参数里的内容");
</script>
<p>直接调用js的有参数有返回值方法</p>
<script language="JavaScript">
document.write( testBack(2,3));
</script>
</body>
</html>
3、对话框
1、询问对话框
打开页面就弹出询问框
var useName = prompt("请输入你的名字");
document.write("你好" + useName);
2、确认对话框
function comfirmt() {
if (confirm("你确认删除文件嘛")) {
document.test.submit();
}
}
<input type="button" value="删除文件" name="deletebn"
onclick="JavaScript:comfirmt()">
3、提示框
alert("打开页面了");
4、JavaScript内置对象
1、for in
<script language="JavaScript">
var a = new Array("Java","C#","ObjectC","C++","Python");
for( i in a){
document.write(a[i]+" ");
}
</script>
2、new
<script language="JavaScript">
var today = new Date();
alert(today.getDate());
</script>
3、this 指代当前这个对象
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内置对象 this</title>
<style type="text/css">
p {
color: orange;
}
</style>
<script language="JavaScript">
function checkit(obj) {
if (obj.value == "") {
alert("空值");
} else {
alert("有值:" + obj.value);
}
}
</script>
</head>
<body>
<h4>this</h4>
<img src="../../img/aaaa.png" onclick="JavaScript:alert(this.src)">
<form name="thisform" action="01.jsp" method="get">
<input type="text" name="hq" value=""
onclick="JavaScript:checkit(this)">
</form>
</body>
</html>
4、with
<script language="JavaScript">
//相当于省略了document.write("") XXXXXX
with (document) {
write("today ");
write("is ");
write("Wendthday");
}
</script>
5、函数事件处理
onClick onmouseover onsubmit等。下面两个demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js函数事件处理</title>
<style type="text/css">
p {
color: orange;
}
</style>
<script language="JavaScript">
function check() {
if (document.test.namevalue.value == "") {
alert('姓名不允许为空')
return false;
}
alert("检查通过")
return true;
}
</script>
</head>
<body onload="Javascript:alert('onload');"
onsubmit="Javascript:alert('submit')"
onUnload="Javascript:alert('bye');">
<p>onLoad---出现在一个文档完成对一个窗口的载入时,一般写在body里,对应onUnload</p>
<a href="JS1.html"> 跳转到百度</a>
<form name="test" action="01.jsp" onsubmit="return check()">
<p>onfocus---获取焦点后就有弹框</p>
<input type="text" name="username"
value="HQ,onfocus"
onfocus="JavaScript:alert(document.test.username.value);">
<p>onclick---点击后就有弹框</p>
<input type="text" name="usernameClick"
value="HQ,click"
onclick="JavaScript:alert(document.test.usernameClick.value);">
<p>onmouseover onmouseout---</p>
<input type="text" name="namemouseover"
value="HQ,onmouseover"
onmouseout="JavaScript:alert('mouseout')"
onmouseover="JavaScript:alert(document.test.namemouseover.value);">
<p>onSubmit---用户通过提交按钮提交一个表单时</p>
<div>
<input type="text" value="姓名">
<input type="text" name="namevalue">
</div>
<input type="submit" value="提交">
</form>
</body>
</html>
6、打开关闭另一个页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
color: orange;
}
</style>
<script language="JavaScript">
window.status = "这里是窗口底部状态栏中的文字"
//因为浏览器禁止,所以很少使用了
var abc = window.open("https://www.baidu.com/index.php?tn=78040160_40_pg",
"newWin");
</script>
<script language="JavaScript">
function closeWindow(){
abc.close();
}
</script>
</head>
<body>
<input type="button" value="点我关闭下个页面"
onclick="JavaScript:closeWindow()">
</form>
</body>
</html>
7、页面跳转
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
color: orange;
}
</style>
<script language="JavaScript">
// alert(window.location); //==document.location
// window.status = "这里是窗口底部状态栏中的文字"
// //因为浏览器禁止,所以很少使用了
// var abc = window.open("https://www.baidu.com/index.php?tn=78040160_40_pg",
// "newWin");
</script>
<script language="JavaScript">
function closeWindow() {
abc.close();
}
function jump() {
window.location = "JS7Window2.html"
}
</script>
</head>
<body>
<input type="button" value="点我关闭页面"
onclick="JavaScript:closeWindow()">
<input type="button" value="点我切换到下个页面"
onclick="JavaScript:jump()">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
color: orange;
}
</style>
<script language="JavaScript">
function goback() {
history.back();
}
</script>
</head>
<body>
<input type="button" value="回到上个页面"
onclick="JavaScript:goback()">
<input type="button" value="回到上个页面 "
onclick="JavaScript: history.back()">
</form>
</body>
</html>
8、表单提交
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table, td {
border: 1px solid #006
}
table {
background-color: #cccccc;
}
td {
background-color: #fff
}
/*td 是tr的子元素 给td设置的背景色覆盖了,给tr加的hover背景色,把td的背景色去掉就好,hover一般都加到td上*/
tr {
background-color: red;
}
td:hover {
background-color: aquamarine;
}
/*这个属性是有用的,隐藏表格中空单元格上的边框和背景:*/
.t {
border-spacing: 10px 6px;
empty-cells: hide;
}
</style>
<script language="JavaScript">
// onBlur方法,失去焦点时,就会调用这个方法
function checkMyUserName(a){
document.getElementById("userNameError").innerHTML= a.toUpperCase();
}
//定义的函数
function checkData(){
if(document.test.passwordInput.value.length<6){
alert("密码长度小于6");
return false;//return true提交 ;false 不提交
}
else{
alert(document.test.passwordInput.value.length+"密码验证成功");
}
if(document.test.interest3.selectedIndex ==0){
alert("请选择省份")
return false;
}
if(document.test.intro.value.trim()==""){
alert("请填写自我介绍");
return false;
}
}
</script>
</head>
<body>
<form name="test" action="01.jsp" method="get" onSubmit="return checkData()">
<table border="1" align="center" width="750">
<caption>表单</caption>
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="userName" size="30"
onblur="checkMyUserName(this.value.toLowerCase())">
<div id="userNameError"></div>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="passwordInput" maxlength="10"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="passwordConfirm" maxlength="10"/>
</td>
</tr>
<tr>
<td>性别(radio同名不同value)</td>
<td>
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</td>
</tr>
<tr>
<td>兴趣:(checkBox同名不同值)</td>
<td>
<input type="checkbox" name="interest" value="vc"checked>VC
<input type="checkbox" name="interest" value="vb">VB
<input type="checkbox" name="interest" value="java">JAVA
<br>
<input type="checkbox" name="interest" value="c#">C#
<input type="checkbox" name="interest" value="python">python
<input type="checkbox" name="interest" value="php">php
</td>
</tr>
<!--看不见 但是都会提交到服务器的-->
<input type="hidden" name="interest" value="jsp">
<!--多选列表-->
<tr>
<td>列表 可多选 显示四个,按ctrl多选</td>
<td>
<select name="interest2" size="4" multiple>
<option value="jump" selected>跳</option>
<option value="swim">游泳</option>
<option value="run">跑步</option>
<option value="walk">走路</option>
<option value="watch">看</option>
</select>
</td>
</tr>
<!--多选列表-->
<tr>
<td>列表 单选</td>
<td>
<select name="interest3" >
<option value="jump" selected>跳</option>
<option value="swim">游泳</option>
<option value="run">跑步</option>
<option value="walk">走路</option>
<option value="watch">看</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea rows="12" cols="60" name="intro" wrap="hard"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="cen">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="这个按钮只有在javaScript">
</td>
</tr>
</table>
</form>
</body>
</html>