2017年5月29号课堂笔记
2017年5月29号 阴天 空气质量：良
内容：JavaScript基础：输入输出及确认，统计字符出现的次数，系统函数，自定义函数，
自定义函数和事件的连用，四则运算小练习，方法的作用域
JavaScriptBOM对象（下次课堂笔记再补上，一起记录）history，location，open，document
一、输入输出及确认
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入输出以及确认</title>
</head>
<body>
<script type="text/javascript">
/**
* 01. alert("提示框")！只有一个确定按钮
* 02. prompt("请输入您的年龄","50"); 有确认和取消按钮
* 001.第一个参数是 提示信息！
* 002.第二个参数是默认值，可以省略！
* 003.返回的内容就是用户输入的值
* var input=prompt("请输入您的年龄");
* alert(input);
* 004.如果用户没有输入内容或者点击取消，返回null
* 03.confirm（"提示信息"）
* 001.点击确定返回true
* 002.点击取消或者X 返回 false
*/
/* alert("hello");*/
/* var a=prompt("今天下雨吗","下");
alert (a);*/
if(confirm("不能踢球开心吗？")){
alert("扯淡");
}else{
alert("下次再踢喽");
}
</script>
</body>
</html>
二、统计字符出现的次数
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>小练习-统计字符出现次数</title>
</head>
<body>
<script type="text/javascript">
var arr=["America","Britain","China","France","Germany","Japan","Russia"];
var count=0;
for(var i in arr){
document.write(arr[i]+"<br/>");
if(arr[i].indexOf("a")>-1||arr[i].indexOf("A")!=-1){
count++;
}
}
document.write("包含a或者A的单词数："+count);
</script>
</body>
</html>
三、系统函数
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>系统函数</title>
</head>
<body>
<script type="text/javascript">
/*parseInt("字符串")： 遇到第一个非数字的时候，能把之前的数字转换！
* parseFloat("字符串")： 遇到第一个非数字的时候，能把之前的数字转换！
* 如果第一个字符就是非数字，那么返回NaN
* */
document.write(parseInt("52a")+"<br/>");
document.write(parseFloat("52.2a56")+"<br/>");
document.write(parseFloat("a25.23")+"<br/>");
//isNaN（"参数"） 01.参数是数字 返回false 02. 参数是非数字 返回true
document.write(isNaN(10)+"<br/>");
/*Number（"参数"） 参数必须是全数字类型的字符串，否则返回NaN*/
document.write(Number("10a5")+"<br/>");
document.write(Number("105.5")+"<br/>");
/**
*Boolean(参数)：
* 如果参数是空，null,undefined,NaN,false ,0或者未定义的变量 都返回false！
* 其他都是返回true！
*/
document.write(Boolean("a")+"<br/>");
document.write(Boolean("")+"<br/>");
document.write(Boolean(null)+"<br/>");
document.write(Boolean(false)+"<br/>");
document.write(Boolean(NaN)+"<br/>");
document.write(Boolean(0)+"<br/>");
document.write(Boolean(undefined)+"<br/>");
</script>
</body>
</html>
四、自定义函数
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义函数</title>
</head>
<body>
<script type="text/javascript">
/**
定义函数! 通常结合事件一起使用！
语法 ：
function 方法名（[参数...]）{
//js代码
[return ...]
}
或者
var 方法名=function(){
}
*/
//定义求和的方法（函数）
function getSum(num1,num2){
return num1+num2;
}
document.write(getSum(1,2));
//如果和事件同时使用 事件="函数（）;"
</script>
</body>
</html>
五、 自定义函数和事件的连用
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义函数和事件</title>
</head>
<body>
<!--如果和事件同时使用 事件="函数（）;"-->
<!--点击事件 onclick="getSum(5,5);" -->
<!--鼠标悬停事件 onmouseover="getSum(5,5);"-->
<!--鼠标移出事件 onmouseout="getSum(5,5);"-->
<button type="button" onmouseout="getSum(10,10)" >点击求和</button>
<!--文本框获取焦点事件 onfocus="getSum(5,5);"-->
<!--文本框失去焦点事件 onblur="getSum(5,5);"-->
<input type="button" value="大家辛苦了" onblur="getSum(5,5)"/>
<script type="text/javascript">
//定义求和的方法（函数）
function getSum(num1,num2){
alert(num1+num2);
}
</script>
</body>
</html>
六、四则运算小练习
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" onclick="calculate()">两个数字的四则运算结果</button>
<script type="text/javascript">
var calculate=function(){
var num1=prompt("请输入第1个数字");
var num2=prompt("请输入第2个数字");
var sign=prompt("请输入运算符号");
var result;
num1=parseFloat(num1);
num2=parseFloat(num2);
switch(sign){
case "+":
var result=num1+num2;
break;
case "-":
var result=num1-num2;
break;
case "*":
var result=num1*num2;
break;
case "/":
var result=num1/num2;
break;
}
alert("两数计算结果为："+result);
}
</script>
</body>
</html>
七、方法的作用域
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>方法的作用域</title>
</head>
<body onload="second()">
<script type="text/javascript">
var i=50;
function first(){
var i=5;
for(var j=0;j<i;j++){
document.write(j+"<br/>");
}
}
function second(){
var temp=prompt("请输入一个数字");
if(temp>i){
document.write(temp+"<br/>");
}else{
document.write(i+"<br/>");
}
first();
}
</script>
</body>
</html>
八、作业
1、jQuery第一节MindManager
2、继续看视频
九、老师辛苦了！
