标签:his 作用 put lang 输出 china japan 扯淡 define
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、继续看视频
九、老师辛苦了!
标签:his 作用 put lang 输出 china japan 扯淡 define
原文地址:http://www.cnblogs.com/wsnedved2017/p/6918212.html