<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 基础</title>
<link rel="stylesheet" type="text/css" href="css/css_test1.css">
</head>
<body>
<hr>
<h3>JavaScript 事件</h3>
<button onclick="getElementById('demo1').innerHTML=Date()">时间</button>
<p id="demo1"></p>
<hr>
<h3>JavaScript 类型转换</h3>
<script type="text/javascript">
console.log(typeof "mane"); //查看变量数据类型
console.log((66).constructor); //返回所有 JavaScript 变量的构造函数
console.log((12+24).toString());
console.log(String(13+35));
console.log(String(true));
console.log(false.toString());
console.log(Number("3.33"));
console.log(Number(" "));
console.log(Number(""));
console.log(Number("99 88"));
var a="3";
var b=+a;
console.log(b);
console.log(Number(false));
d=new Date();
console.log(Number(d));
</script>
<p id="demo2"></p>
<script type="text/javascript">
var members=["Mane","salah","Arnold"];
document.getElementById("demo2").innerHTML=isArray(members);
function isArray(myArray){
return myArray.constructor.toString().indexOf("Array")>-1;
}
</script>
<hr>
<h3>JavaScript 正则表达式</h3>
<script type="text/javascript">
var str1="how to make up.";
var n1=str1.search(/make/i);
console.log(n1);
var n2=str1.search("to");
console.log(n2);
var str2=str1.replace(/make/i,"give");
console.log(str2);
var str3=str1.replace("make","get");
console.log(str3);
str4="CEG_00012";
var pattern1=/^[A-Z][A-Z]+_[0-9]+[0-9]$/;
if (pattern1.test(str4)) {
console.log("输入合法!");
//window.alert("输入合法!");
}else{
window.alert("输入不符合要求!");
}
</script>
<hr>
<h3>JavaScript 错误</h3>
<input type="button" value="查看" onclick="showMessage()">
<script>
var str5="";
function showMessage(){
try{
adddlert("Welcome guest!");
}catch(err){
str5="出现一个错误\n";
str5+="错误描述:"+err.message+"\n";
str5+="确认继续.";
//alert(str5);
console.log(str5);
}
}
</script>
分数:<input type="text" id="demo3">
<button type="button" onclick="checkInput()">提交</button>
<p id="pDemo3"></p>
<script>
function checkInput(){
var demo3,str6;
demo3=document.getElementById("pDemo3");
demo3.innerHTML="";
str6=document.getElementById("demo3").value;
try{
if (str6=="") {
throw "分数值为空!";
}
if (isNaN(str6)) {
throw "分数不能不是一个数字";
}
str6=Number(str6);
if (str6>100) {
throw "分数不能大于100";
}
if (str6<0){
throw "分数不能小于0";
}
}catch(err){
demo3.innerHTML="错误:"+err+".";
}finally{
document.getElementById('demo3').value="";
}
}
</script>
<hr>
<h3>JavaScript 表单</h3>
<form name="form1" action="#" onsubmit="return validateForm1()" method="post">
Name:<input type="text" name="name1">
Age:<input type="text" name="age1">
Sex:<input type="text" name="sex1" required="required"><br>
Email:<input type="text" name="email1">
Email2:<input type="email" name="email2">
<input type="submit" value="提交">
</form>
<script>
function validateForm1(){
var name1=document.forms["form1"]["name1"].value;
if (name1==null || name1=="") {
alert("名字不能为空!");
return false;
}
var age1=document.forms["form1"]["age1"].value;
if (isNaN(age1) || age1<18 || age1>60) {
alert("年龄要求在18~60岁之间。");
return false;
}
var email1=document.form["form1"]["email1"].value;
var at_position=email1.indexOf("@");
var dot_position=email1.lastIndexOf(".");
console.log(dot_position);
if (at_position<1 || dot_position<at_position+2 || dot_position+2>=email1.length) {
alert("email地址不合法!");
return false;
}
}
</script>
<hr>
<h3>JavaScript 验证 API</h3>
<input type="number" id="number1" min="60" max="90" required>
<button onclick="validateNumber()">验证</button>
<p id="demo4"></p>
<script>
function validateNumber(){
var number1=document.getElementById("number1");
if (number1.checkValidity()==false) {
document.getElementById("demo4").innerHTML=number1.validationMessage;
}
}
</script>
<hr>
<h3>this关键字</h3>
<button onclick="this.style.display='none'">点击会消失</button>
<script>
var memberKop={
name:"Mane",
age:28,
sex:"男",
number:10,
allInformation:function(){
var str7="name:"+this.name+" number:"+this.number;
return str7;
}
}
var memberKop2={
name:"salah",
age:27,
number:11,
}
console.log(memberKop.allInformation());
console.log(memberKop.allInformation.call(memberKop2));
</script>
<hr>
<h3>let 和 const</h3>
<script type="text/javascript">
var x=10;
{
let y=20;
let x=66;
console.log(x);
console.log(y);
}
console.log(x);
//console.log(y); let 声明的变量只在let 命令所在的代码块 {} 内有效
let i=10;
let sumi=0
for (let i=0;i<10;i++){
sumi+=i;
}
console.log(sumi);
console.log(i);
const NUMBER0=100; //const 声明的常量必须初始化
</script>
<hr>
<h3>Javascript JSON</h3>
<p id="dem5">demo5</p>
<script>
var text1='{"members":['+
'{"name":"Mane","number":10},'+
'{"name":"salah","number":11},'+
'{"name":"Arnold","number":66}]}';
var str8=JSON.parse(text1);
for (let i=0;i<3;i++) {
console.log(str8.members[i].name+" "+str8.members[i].number);
}
</script>
<hr>
<h3> JavaScript void</h3>
<a href="javascript:void(0)">javascript:void(0)</a><br>
<a href="javascript:void(alert('Warning!'))">javascript:void(alert(Warning!))</a><br>
<a href="#dem5">#dem5</a>
<br><br><br>
</body>
</html>