Web事件
鼠标点击事件:click
鼠标悬停事件：hover
鼠标移走事件:mouseout
鼠标提交事件，触发JS函数(函数里面封装了JS代码）：submit
网页加载事件：load
下拉列表框选项切换事件：change
输入框失去焦点事件：blur
输入框产生焦点事件：focus
JavaScript的概念
JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
由网景公司的Brendan Eich设计。
JavaScript 是因特网上最流行的脚本语言。
入门实例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert("hello javascript.")
</script>
</head>
<body>
</body>
</html>
图片示例：
图片1.png
点击事件
alert() 函数：能对例如鼠标等点击做出反应。
演示：当鼠标点击后，会弹出相应的文字
代码如下：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<button type="button" onclick="alert('hello javascript.')">点击我</button>
</body>
</html>
图片示例：
图片2.png
代码注释
单行注释：
//
多行注释：
/*
*/
IsNaN函数
在演示的例子中使用isNaN（）函数来验证是否输入数字。
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。所以为1代表该值不是数字,为0代表是数字。
JS的这个功能常用于验证用户的输入是否符合程序规定。
代码如下：
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==" "||isNaN(x)) //为1代表该值不是数字,为0代表是数字。
{
alert("Not Numeric");
}
else
{
alert("Is Numeric");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JS代码截图：
图片3.png
parseInt 函数
参考资料：
http://www.w3school.com.cn/jsref/jsref_parseInt.asp
课上练习代码
html回顾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="#"/>
<style type="text/css"></style>
</head>
<body>
<h1>这是一个三级标题</h1>
<p>这是一个段落</p><a href="#">这是一个链接</a>
<table border="1" cellspacing="0" cellpadding="0" width="70%">
<tr><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
<form action="#" method="post">
账号：
<input type="text" name="user" id="user" value="" /><br />
密码：
<input type="password" name="pwd" id="pwd" value="" /><br />
<input type="submit" value="登录"/>
</form>
</body>
</html>
JS简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hello () {
//打印提示信息
alert("hello javascript.");
}
</script>
</head>
<body>
<h3>这是一个三级标题</h3>
<!--
作者：offline
时间：2018-11-07
描述：这是一个按钮
-->
<input type="button" id="btn001" value="点击我" onclick="hello();" />
</body>
</html>
登录表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* 检查表单里面所有输入项是否合法
* @return true:正确 false:错误
*/
function checkall () {
//检查用户名
var userIsRight = checkuser(document.getElementById("user").value);
//检查密码
var pwdIsRight = checkpwd(document.getElementById("pwd").value);
//如果用户名和密码都正确则返回true
if(userIsRight==true&&pwdIsRight==true){
return true;
}else{//否则
alert("输入错误，登录失败！");
return false;
}
}
/**
* 检查输入的密码是否合法
* @param {Object} passwd 表示用户输入的密码
* @return {type} true：正确 false：错误
*/
function checkpwd(passwd){
//如果密码为空的话，则提示密码不能为空
if(passwd==null||passwd==""){
document.getElementById("pwd_error").innerText="*密码不能为空";
return false;//返回false
}else{
document.getElementById("pwd_error").innerText=null;
return true;
}
}
/**
* 检查账号是否合法的
* @param {Object} username 表示用户输入的账号
* @return {type} true：正确 false：错误
*/
function checkuser (username) {
//如果username为空的话，则提示用户名不能为空
if(username==null||username==""){
document.getElementById("user_error").innerHTML="*用户名不能为空！";
return false;
}else{
document.getElementById("user_error").innerHTML="";
return true;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return checkall();">
账号：
<!--描述：这是一个文本输入框-->
<input type="text" name="user" id="user" value=""
onblur="checkuser(this.value);"/>
<span id="user_error" style="color: red;font-size: 12px;"></span><br/>
密码：
<!--描述：这是一个密码输入框-->
<input type="password" name="pwd" id="pwd" value=""
onblur="checkpwd(this.value);" />
<span id="pwd_error" style="color: red;font-size: 12px;"></span><br/>
<!--描述：这是一个提交按钮-->
<input type="submit" value="登录"/>
</form>
</body>
</html>
网友评论