您的位置：首页 > Web前端 > JavaScript

Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制

2017-02-08 22:50 393 查看

　　　　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>
<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>


demo6.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航