JavaScript--基础ES(二)
JavaScript–基础ES
文章目录
- JavaScript--基础ES
- 1.函数
- 1.1常用系统函数
- 1.2自定义函数
- 1.2.1调用无参函数
- 1.2.2调用有参函数
- 1.2.3创建对象
- 1.3变量的作用域
- 1.4事件
1.函数
-
函数的含义
- 类似于Java中的方法，7是完成特定任务 的代码语句块
-
函数分类
- 系统函数
- 自定义函数
1.1常用系统函数
parselnt（"字符串")将字符串转换为整型数字parseFloat("字符串")将字符串转换为浮点型数字isNaN()用于检查其参数是否是非数字
1.2自定义函数
- 定义函数
function 函数名(参数1,参数2,参数3,..){//JavaScript语句[return返回值]
}注：若有返回值 var res = 函数名(参数列表);形参与实参类型或个数可以不对应
- 调用函数
- 函数调用一般和表单元素的事件一起使用，调用格式 : 函数名();
1.2.1调用无参函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>function study(){for(var i=0;i<3;i++){document.write("<h3>学习JS</h3>")}} //函数调用study();
</script>
</html>
1.2.2调用有参函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
</body>
<script>function study(count){for(var i=0;i<count;i++){document.write("<h3>学习JS</h3>")}} study(2);
</script>
</html>
1.2.3创建对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>function User(uname,uage){this.name=uname;this.age=uage;this.show=function(){document.write("姓名："+this.name+",年龄"+this.age);}}var u1=new User("张三",19);u1.show();</script>
</html>
-
练习：编写函数，实现使用prompt输入两个数和运算符号，并计算两个数的操作结果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算两数的操作结果</title> </head> <body><input type="button" value="计算两数运算结果" onclick="getSum()"/> </body> <script>function getSum(){var sum=0;var num1= prompt("请输入第一个数字：");var num2= prompt("请输入第二个数字：");var str= prompt("请输入运算符："); n1=parseInt(num1);n2=parseInt(num2);if(!isNaN(n1)&&!isNaN(n2)){switch(str){case "+" :sum=n1+n2;alert("两数运算结果为:"+n1+str+n2+"="+sum);break;case "-" :sum=n1-n2;alert("两数运算结果为:"+n1+str+n2+"="+sum);break;case "*" :sum=n1*n2;alert("两数运算结果为:"+n1+str+n2+"="+sum);break;case "/" :sum=n1/n2;alert("两数运算结果为:"+n1+str+n2+"="+sum);break;default :alert("请输入正确的运算符！！！");break;}}else{alert("请输入正确的数字！！！");}} </script> </html>
1.3变量的作用域
- 全局变量
- 局部变量
1.4事件
| 名称 | 说明 |
|---|---|
onload | 一个页面或一幅图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某元素上 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
onchange | 域的内容被改变 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onsubmit | 提交按钮被点击 |
| onchange | 用户改变域的内容 |
<!DOCTYPE html>
<html lang="en" onkeydown="keydown(event)">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件</title>
</head>
<body><button onclick="login()">登录</button>
</body>
<script>function keydown(e){//按下enter键登录if(e.keyCode==13){login();}}//单击按钮登录function login(){alert("登录成功");}</script>
</html>
<!DOCTYPE html >
<html lang="en" onmousedown="press()">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.a{width: 100px;height: 100px;background-color: rgba(66, 126, 176, 0.306);}
</style>
<body><div class="a" onmouseover="update1(this)" onmouseout="update2(this)" >1111</div>
</body>
<script>function update1(e1){e1.innerHTML = "2222";}function update2(e2){e2.innerHTML = "1111";}function press(){alert("按下鼠标键");}
</script>
</html>
- 练习
- 使用prompt()方法输入考试科目的数量，要求数量必须是非零、非负数的数值类型，否则给出相应提示并退出程序
- 根据考试科目的数量，使用prompt()方法输入各科的考试成绩并累加，要求成绩必须是非负数的数值类型，否则给出相应提示并退出程序
- 如果各项输入正确，则弹出总成绩
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="计算成绩" onclick="getScore()"/>
</body>
<script>function getScore(){var num=prompt("请输入考试科目的数量：");var n=parseInt(num);if(n>0){var sum=0;for(var i=0;i<n;i++){var score=prompt("请输入第"+(i+1)+"科的成绩：");var s=parseInt(score);if(score>0){sum=sum+s;}else{alert("请输入正确的成绩！！！");//直接结束程序return;}}alert(n+"科总成绩"+sum);}else{alert("请输入正确的数字！！！");return;}}</script>
</html>