<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center>
<p class ="p1"></p>
<div class = "div"></div>
<p id ="par"></p>
<div id ="div"></div>
<script>
//声明变量
var cname;
//给变量赋值
cname = "lisi";
//声明变量并对其赋值
var school = "希望小学";
//在一条语句中声明很多变量。该语句以 var 开头并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";
//声明也可横跨多行：
var lastname="Doe",
age=30,
job="carpenter";
//document.getElementsByClassName("p1").innerHTML=cname; 出错 因为 getElementsByClassName("p1")返回节点列表，而不是元素修改如下
document.getElementsByClassName("p1")[0].innerHTML=cname;
//创建对象
var people={name:'张三', sex:'男', age:21 }; //属于可选项，可写可不写
//对对象寻址--两种方式
document.getElementsByClassName("div")[0].innerHTML= people.name +" "+people["sex"];
//创建和使用对象方法
var car = {
fistName:'江苏',
lastName:'南京',
id:'JXNJ123',
//定义对象方法
fullName:function(){
return this.fistName +" "+ this.lastName;
}
};
document.getElementById("par").innerHTML = "不带括号显示属性值 :"+ car.fullName;
document.getElementById("div").innerHTML = "带括号输出函数执行结果 :"+ car.fullName();
//创建数组
//方法1
var student= new Array();
student[0]="zhangsan";
student[1]="lisi";
student[2]="wanger";
for(var i=0; i<student.length; i++){
document.write(student[i]+"<br>");
}
//方法二
var student1 = new Array("lisi","wanger","mazi");
for(var i=0; i<student1.length; i++){
document.write(student1[i]+"<br>");
}
//方法三
var student2=["Saab","Volvo","BMW"];
for(var i=0; i<student2.length; i++){
document.write(student2[i]+"<br>");
}
//声明变量类型
//声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var car= new Array;
var per= new Object;
</script>
<div id="div1"></div>
<script>
/*函数语法
function functionname(){
//执行代码
}
可以在某件事发生时直接调用函数，并且可由js在任何地方调用
*/
function myFunction(){
alert("Hello World");
}
/*
myFunctiom(arguement1, arguement2) //可以发送任意多参数，由逗号,分隔
将参数作为变量来声明
function myFunction(var1, var2){
//代码
}
*/
function argueFunction(name,age){
alert(name+' '+age);
}
/*
带有返回值的函数 return
希望退出函数，也可以使用return语句，返回值是可 选的
*/
function reFunction(){
var a =11;
return a;
}11
var b =reFunction();
document.writeln(b);
document.getElementById("div1").innerHTML = reFunction();
</script>
<br />
<button onclick="myFunction()">点我</button><br />
<button onclick="argueFunction('张三',11)">点我</button><br />
<script>
/**
* js局部变量和全局变量
* 在js函数内部声明的变量(使用var)是局部变量，所以只能在函数内部访问它
* 只要函数运行完，本地本地变量就会被删除
* 在函数外声明的是全局变量，网页上的所有脚本和函数都能访问它。
*
* 局部变量会在函数运行后删除
* 全局变量会在页面关闭后删除
*/
/*向未声明的js变量分配值
如果把值赋值给未声明的变量，该变量将被自动作为window的一个属性
carname = "voio"; 将声明一个 window的一个属性carname
*/
//非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除
var var3 = 1; //不可配置全局属性
var4 = 2;//没有使用var声明，可配置全局属性
console.log(this.var3);//1
console.log(window.var3);//1
delete var3;//false 无法删除
console.log(var3);//1
delete var4;
console.log(delete var4);//true
//console.log(var4);//已经删除，报错变量未定义
</script>
<!-- 文本框验证1 -->
<form action="#" method="post">
账 户：<input type="text" name="account" id="account" onblur="checkAccount();"/><br />
<span id="s1" class="s"></span><br />
密 码： <input type="text" name="password" id="password" onblur="checkPassword();"/><br />
<span id="s2" class="s"></span>
<br />
<div class="d1">
<span style="margin-left: 50px;" >用户</span><input type="radio" checked="checked" name="flag" value="1" style="width: 20px; height: 20px;">
<span style="margin-left: 50px" >管理员 </span><input type="radio" name="flag" value="2" style="width: 20px; height: 20px;">
</div>
<div style="margin-left:30px; width: 80px; height: 30px;"><input type="submit" value="登录"/></div>
<!-- <div style="margin-top: 50px;"><span><a href="#">忘记?</a></span>
<span><a href="regist.html">免费注册</a></span></div> -->
</form>
<script type="text/javascript">
function checkAccount(){
var obj = document.getElementById("account");
var account = obj.value;
var error = document.getElementById("s1");
if(account==""){
error.innerHTML="<font color='#FF0000'>账户不能为空！</font>"
}else{
error.innerHTML="";
}
}
function checkPassword(){
var obj = document.getElementById("password");
var password = obj.value;
var error = document.getElementById("s2")
if(password==""){
error.innerHTML="<font color='red'>密码不能为空!</font>"
}else{
error.innerHTML="";
}
}
</script>
<!-- 文本框验证2 -->
<br />
<form action="#" method="post" name="form1">
<input type="text" name="userName" /><br />
<input type="password" name="passWord" /><br />
<!-- 事件处理 静态指定 方法1 -->
<input type="button" value="提交" onclick="checkLogin()"/>
</form>
<script>
function checkLogin(){
/* ctrl+shif+/ */
var username = document.form1.userName.value;
var password = document.form1.passWord.value;
//ctrl+C+/
// var username = document.forms["form1"].userName.value;
// var password = document.forms["form1"].passWord.value;
/* var username = document.getElementsByName("userName")[0].value; //此方法存在兼容问题
var password = document.getElementsByName("passWord")[0].value; */
if((username=="") || (password==""))
alert("姓名和密码不能为空!");
else
alert("欢迎!");
}
/* */
</script>
<br />
<!-- 事件处理-动态指定 -->
<form name="myform" method="post" action="">
<input id = "inp" type ="button" name="mybutton" value="事件处理-动态指定" />
</form>
<script>
function clickHandler(){
alert("动态指定");
return true ;
}
/*
<事件源对象>.<事件句柄> = function(){<事件处理程序>;}
Object.onclick = function(){disp();} 动态给对象指派事件
Object.onclick(); //调用方法
"事件处理程序"必须使用不带函数名的function(){}来定义。也就是无函数名的函数，函数体内
可以是字符串形式的代码，也可以是函数。
*/
document.getElementById("inp").onclick = function(){return clickHandler();}
/* myform.mybutton.onclick();//触发程序 或者界面上点击button */
</script>
<br />
<!-- 特定对象特定事件的指定 -->
<!-- <script type="text/javascript" for="对象" evevt="事件句柄">
//事件处理程序代码
</script>
for属性指定特定对象，如window、doucument等
event属性指定事件句柄名称如onload、onunload等
在脚本script标记中插入相关事件处理函数代码 -->
<script type="text/javascript" for="window" evevt="onload">
// alert("网页读取完成，换衣光临");
</script>
<br />
<!-- 事件处理程序的返回值 -->
<form name="form2" action="" onsubmit="return showName();">
<input type ="text" name="name2" />
<input type="submit" value="事件处理程序-返回值" />
</form>
<br />
<script language="JavaScript">
/*
<标记 事件句柄="return 函数名(参数);">...</标记>
*/
function showName(){
if(document.form2.name2.value==""){
alert("没有输入内容！");
return false;
}
else{
alert("欢迎您"+document.form2.name2.value);
return true;
}
}
</script>
<!-- 表单事件
1、获得/失去焦点事件:onfocus/onblur
2、提交/重置事件:
3、改变/选择事件
-->
<!-- 鼠标事件
1、单/双击事件
2、鼠标移动事件
-->
<!-- 键盘事件
1、KeyDown
2、KeyPress
3、KeyUp
-->
<!-- 窗口事件-->
</center>
</body>
</html>
图片截图：
变量的声明与赋值
创建和使用对象方法
创建数组
声明变量类型
函数的创建与使用
全局变量和局部变量
文本框验证**
事件处理
运行结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
