Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制
my.js
function f3() { alert("唐胜伟"); }
demo1.html 演示点击按钮，弹出提示框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 2.嵌入式:在script标签里写js. 该标签可以写在网页任意位置,但通常写在head里. --> <script> //js的注释是这样的 /*也可以是这样的*/ //js函数的规则: //1.js的函数都是公有的 //2.js的函数不用声明返回值类型 //3.js的函数可以声明参数 function f2() { //js中不区分单引号和双引号 alert("范传奇"); } </script> <!-- 3.文件调用式:在单独的js文件中写JS. 将文件引入就相当于将文件内的代码复制到此处. 注意:script不能既引入js又写js. --> <script src="my.js"></script> </head> <body> <!-- 事件:就是用户的操作/动作,也是js被 调用的时机.如:单击事件、双击事件. --> <!-- 1.事件定义式:在定义事件时直接写js. --> <input type="button" value="按钮1" onclick="alert('苍老师');"/> <input type="button" value="按钮2" onclick="f2();"/> <input type="button" value="按钮3" onclick="f3();"/> </body> </html>
demo2.html js的数据类型及转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.此处写的函数是在页面加载后，用户点击按钮时才调用的. //2.若此处不写函数,直接写js代码，则该代码在页面加载时直接调用，其调用时机比body还早. //alert(1); console.log("控制台打印"); //1.声明变量 var x; console.log(x); var y=2; console.log(y); //2.数据类型 var s = "Hello"; var n = 3.14; var b = true; //3.隐式转换 console.log(s+n); console.log(s+b); console.log(n+b); console.log(b+b); //4.强制转换 console.log(parseInt("2.5")); console.log(parseInt("3.6")); console.log(parseInt("abc")); //输出变量类型 console.log(typeof(s)); console.log(typeof(n)); //NaN console.log(isNaN(s)); console.log(isNaN(n)); console.log(isNaN(b)); //5.特殊情况 console.log(parseInt("")); //不能转换成数字1 console.log(parseInt(true)); console.log(isNaN("")); console.log(isNaN(true)); //6.运算符 var a = "3"; var b = 3; console.log(a==b); console.log(a===b); //7.条件表达式 //js中可以用布尔值做条件，也可以用非布尔值做条件, //在使用非布尔值做条件时有一个原则: //一切非空的值等价余true,一切空值等价于false. //共5个空值:undefined,NaN,null,"",0 //这样设计的目的是为了简化判断条件 var p =9; if(p){ console.log("非空"); } //还有更萎缩的 var k = 8; k && console.log("ok"); </script> </head> <body> <p>js的语法和JAVA极为相似！</p> </body> </html>
demo3.html 使用js实现计算平方小例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function pf() { console.log(1); //获取文本框 var input = document.getElementById("num"); console.log(input); //获取文本框内的值 var n = input.value; console.log(n); //获取span var span = document.getElementById("result"); //判断该值是不是数字 if(isNaN(n)) { //不是数字,span里给予提示 span.innerHTML = "请输入数字"; } else { //是数字,计算其平方,结果写入span span.innerHTML = n*n; } } </script> </head> <body> <input type="text" id="num"/> <input type="button" value="平方" onclick="pf();"/> = <span id="result"></span> </body> </html>
demo4.html 使用js实现猜数字小游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //页面加载时生成随机整数,即在用户未 //看到body中的内容时就生成了该整数. var ran = parseInt(Math.random()*100); function guess() { //获取文本框内的值 var n = document.getElementById("num").value; //获取span var span = document.getElementById("result"); //判断是否为数字 if(isNaN(n)) { span.innerHTML = "请输入数字"; } else { if(n<ran) { span.innerHTML = "小了"; } else if(n>ran) { span.innerHTML = "大了"; } else { span.innerHTML = "对了"; } } } </script> </head> <body> <input type="text" id="num"/> <input type="button" value="猜" onclick="guess();"/> <span id="result"></span> </body> </html>
demo5.html 使用js实现阶乘小例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function jc() { var n = document.getElementById("num").value; var span = document.getElementById("result"); if(isNaN(n)) { span.innerHTML = "请输入数字"; } else { if(n<0) { span.innerHTML = "负数没有阶乘"; } else if(n==0) { span.innerHTML = 1; } else { var s = 1; for(var i=n;i;i--) { s *= i; } span.innerHTML = s; } } } </script> </head> <body> <p>1.负数没有阶乘</p> <p>2.0的阶乘是1</p> <p>3.正整数n的阶乘=1*2*...*n</p> <p> <input type="text" id="num"/> <input type="button" value="阶乘" onclick="jc();"/> = <span id="result"></span> </p> </body> </html>
demo6.html 用户登录验证小例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .ok{color:green;} .error{color:red;} </style> <script> //验证账号的格式 function checkCode() { console.log(1); //获取账号 var code = document.getElementById("code").value; //获取span var span = document.getElementById("code_msg"); //验证账号格式 var reg = /^w{5,10}$/; if(reg.test(code)) { span.className = "ok"; } else { span.className = "error"; } } //验证密码格式 function checkPwd() { var pwd = document.getElementById("pwd").value; var span = document.getElementById("pwd_msg"); var reg = /^w{10,15}$/; if(reg.test(pwd)) { span.className = "ok"; } else { span.className = "error"; } } </script> </head> <body> <form action="http://www.tmooc.cn"> <p> 账号:<input type="text" id="code" onblur="checkCode();"/> <span id="code_msg">5-10位字母、数字、下划线</span> </p> <p> 密码:<input type="password" id="pwd" onblur="checkPwd();"/> <span id="pwd_msg">10-15位字母、数字、下划线</span> </p> <p><input type="submit" value="登录"/></p> </form> </body> </html>