<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 课堂作业1---------------------------------------------------------------------------------------------------------- -->
<script>
/*
* 课程回顾：函数，变量的作用域
* 函数-方法，功能的实现，
* function funName(参数列表)｛
* 方法体
* return 结果。return 的作用是将结果返回（返回给调用者），并结束方法
* ｝
*
* 变量的作用域
* 全局变量：在任何的方法中都可以使用，定义在方法外，不属于任何一个方法
* 局部变量：在某一个方法中定义，只能在方法中使用，其他地方不能使用，形参也是局部变量
* 注意 ： 全局变量和局部变量同名了，局部变量具有较高的优先级
*
*
// *
// * */
// var num = 55;
// // 实现2个数字相加，求和
// // num1,num2,在方法中可以直接的使用
// // num1,num2 , 形式参数，形参，仅仅是一个占位符，告诉调用者，调用这个方法是有条件的。
// function getSum(num1,num2){
// return num1+num2; // 返回结果，结束了方法
// }
// // 如果一个方法有返回值的话，一般会定义一个变量来接受结果
// //注意 ： 没有返回值的话，则不需要
// // 在调用方法的时候，传递的实际的参数我们叫实参，
// var result = getSum(3,5);
// var result1 = getSum(3,4);
// console.log(result1)
// var num = parseInt("123") // 将字符串类型的数字转换成一个num类型的数字
// console.log(num)
// ============================================ 第二遍===================================================================================
// 函数，变量的作用域
// 函数方法，功能的实现，
// function funName(参数列表){
// 方法体
// return 结果， return 的作用是将结果返回(返回给调用者)，并结束方法
// }
// 变量的作用域：
// 全局变量：任何地方都可以使用 定义在方法外，不属于任何一个方法
// 局部变量 在某一个方法中定义，只能用在方法中使用，其他地方不能使用 ，形参也是局部变量
// 注意全局变量和局部变量同名 ，局部变量优先级比较高。
// var nun = 99;
// //实现两束相加，求和
// //nun1，nun2，在方法里可以直接使用
// // nun1 和nun2，形式参数，形参，仅仅是一个占位符，告诉调用者，调用这个方法是有条件的，
// function getsun(nun1, nun2) {
// return nun1 + nun2;
// }
// //如果一个方法有返回值的话 一般会定义一个变量来接受结果
// //注意没有返回值的话。则不需要
// //在调用方法的时候， 传递的实际参数我们叫实参
// var num = parseInt("123") //将字符串类型的数字转换成一个num类型的数字
// console.log(num)
</script>
<!-- 课堂作业2---------------------------------------------------------------------------------------------------------- -->
<!-- 为当前的标签绑定单击事件
当你点击 button标签的时候，就会触发单击事件，
自动的执行abc() 这个方法 -->
<!-- <button οnclick="abc()">你敢点我嘛？</button> -->
<!--为 input绑定事件 -->
<!-- 用户名：<input id="uname" οnblur="cccc()" οnfοcus="bbbb()" οnclick="aaaa()"> -->
<script type="text/javascript">
/**
*
*
*常用的事件 ： 单击事件，获取焦点事件，离焦事件，
*js的事件都是和函数绑定一起使用的。
* 如何使用？
* 事件是绑定在标签上的，从而执行某一个js函数的过程
* 一个标签上可以存在多个事件
*
*/
// function cccc() {
// alert("失去了焦点")
// }
// function bbbb() {
// alert("已经得到了焦点了")
// }
// function aaaa() {
// alert("aaaaaaa")
// }
// function abc() {
// alert("你真的敢点")
// }
</script>
<!--为当前的标签绑定事件，当鼠标离开之后，
校验用户输入的用户名能不能使用
能使用的话，弹框提示可以使用，不能使用提示不能使用 -->
<!-- 官方：事件是可以被 JavaScript 侦测到的行为；事件可以是浏览器行为，也可以是用户行为
在浏览器上触发某个动作，可以是用户触发的，也可以是浏览器自己触发的。
常见的事件介绍：事件一般都会和函数绑定一起使用
onload ：一个页面或一幅图像完成加载
onclick : 鼠标单击事件
onmouseover : 鼠标移到某个元素上，鼠标经过事件
onmouseout : 鼠标离开事件
onfocus : 获取焦点后触发的方法
onblur : 失去焦点时候触发的事件，离焦事件 -->
用户名：<input id="name" onblur=" testUname()" placeholder="请输入用户名">
<script>
// 1、为标签绑定一个离焦事件，触发某一个校验的方法
// 2、在方法中获取用户输入的内容，dom的操作
// 3、查看用户输入内容在数组中是否存在，如果存在则说明这个用户名不能使用
// 使用数组来模拟数据库，所有的用户都是在数组中
function testUname() {
var unname = document.getElementById("name").value;
var f = ["xiaoli", "zhangsan", "lisi"]
var index = -1;
for (var i = 0; i < f.length; i++) {
if (unname == f[i]) {
index = 1;
}
}
if (index == 1) {
alert("用户名已存在")
} else {
alert("注册成功")
}
}
</script>
<!-- // ============================================ 第二遍========================================================================== -->
<!-- 为当前的标签绑定单击事件
当你点击 button标签的时候，就会触发单击事件，
自动的执行abc() 这个方法 -->
<!-- <button οnclick="abc()">你敢点我嘛？</button> -->
<!--为 input绑定事件 -->
<!-- 用户名：<input id="uname" οnblur="cccc()" οnfοcus="bbbb()" οnclick="aaaa()"> -->
<script>
/**
*
*
*常用的事件 ： 单击事件，获取焦点事件，离焦事件，
*js的事件都是和函数绑定一起使用的。
* 如何使用？
* 事件是绑定在标签上的，从而执行某一个js函数的过程
* 一个标签上可以存在多个事件
*
*/
// function cccc() {
// alert("失去了焦点")
// }
// function bbbb() {
// alert("已经得到了焦点了")
// }
// function aaaa() {
// alert("aaaaaaa")
// }
// function abc() {
// alert("你真的敢点")
// }
</script>
<!--为当前的标签绑定事件，当鼠标离开之后，
校验用户输入的用户名能不能使用
能使用的话，弹框提示可以使用，不能使用提示不能使用 -->
<!-- 官方：事件是可以被 JavaScript 侦测到的行为；事件可以是浏览器行为，也可以是用户行为
在浏览器上触发某个动作，可以是用户触发的，也可以是浏览器自己触发的。
常见的事件介绍：事件一般都会和函数绑定一起使用
onload ：一个页面或一幅图像完成加载
onclick : 鼠标单击事件
onmouseover : 鼠标移到某个元素上，鼠标经过事件
onmouseout : 鼠标离开事件
onfocus : 获取焦点后触发的方法
onblur : 失去焦点时候触发的事件，离焦事件 -->
<!-- 用户名：<input id="name" οnblur=" testUname()" placeholder="请输入用户名"> -->
<script>
// 1、为标签绑定一个离焦事件，触发某一个校验的方法
// 2、在方法中获取用户输入的内容，dom的操作
// 3、查看用户输入内容在数组中是否存在，如果存在则说明这个用户名不能使用
// 使用数组来模拟数据库，所有的用户都是在数组中
// function testUname() {
// var unname = document.getElementById("name").value;
// var v = ["jige", "awei", "binbin"]
// var index = true;
// for (var i = 0; i < v.length; i++) {
// if (unname == v[i]) {
// index = false;
// }
// }
// if (index) {
// alert("注册成功")
// } else {
// alert("用户名已存在")
// }
</script>
<!--============================================5个事件的练习===================================================-->
这里练习点击：<input id="name" onclick=" abc()" placeholder="点我试试看">
这里练习移到 经过：<input id="name" onmouseover=" aaaa()" placeholder="经过">
这里练习离开：<input id="name" onmouseout=" bbbb()" placeholder="表离开">
这里练习焦点：<input id="name" onfocus=" cccc()" placeholder="焦来了">
这里练习离焦：<input id="name" onblur=" dddd()" placeholder="焦走了">
<script>
// onclick: 鼠标单击事件
// onmouseover: 鼠标移到某个元素上，鼠标经过事件
// onmouseout: 鼠标离开事件
// onfocus: 获取焦点后触发的方法
// onblur: 失去焦点时候触发的事件，离焦事件
function abc() {
alert("你真的敢点")
}
function aaaa() {
alert("他只是经过 你的 世界并没有保留")
}
function bbbb() {
alert("燕子 没有你我该怎么活")
}
function cccc() {
alert("焦点")
}
function dddd() {
alert("失去了焦点")
}
</script>
<!-- ===========================================预习=================================================== -->
<h3>打开一个新的浏览器窗口</h3><!-- html方法-->
<a href="http://www.baidu.com">查看具体的页面</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回</a>
<button onclick="open1()">go to</button>
<script>
function open1(){
window.open("http://www.baidu.com",) //方法打开一个新的页面
}
</script>
<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
<script>
function openWin() { //打开我的窗口
myWindow = window.open("", "", "width=200,height=100");
myWindow.document.write("<p>这是我的所统治的战场</p>");
}
function closeWin() { //关闭我的窗口
myWindow.close();
}
// confirm("lalala") //显示一个带有提示信息、确定和取消按钮的对话框
//prompt( ) //显示可提示用户输入的对话框
//alert() //显示带有一个提示信息和一个确定按钮的警示框
</script>
</body>
</html>
09-29
415
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
