JavaScript核心语法
JavaScript核心语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
//1.变量的声明和赋值
var width=20;
x=10;
var y=1,z=2;
// 只给了y赋值
var x,y,z=10;
var st="ada";
var bo=true;
// 数据类型（typeof(值) --此方法判断类型）
// 1.基本类型
// undefined(未定义) var width没有赋值
document.write("width："+typeof(width)+"<br/>" );
// null(空类型 ,给变量赋予了一个空值)
document.write(undefined + "<br/>");//true
// number(数值类型)
document.write("z:"+typeof(z)+"<br/>" );//number
// String(字符串类型)
document.write("st:"+typeof(st)+"<br/>" );//string
// boolean(布尔类型)
document.write("bo:"+typeof(bo)+"<br/>" );//boolean
// 2.引用类型
// 对象，函数，数组
var date=new Date();
document.write("date："+typeof (date)+"<br/>") //Object
// Null类型
document.write("null："+typeof (null)+"<br/>") //Object
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
// String类型 :indexof() charAt(index) subString(index1,index2) split(str)
var str="this is a String";
var one="a";
document.write(str.length+"<br\>");//16
// 数组
var friut=new Array(3);
friut[0]="apple";
friut[1]="orange";
friut[2]="banana";
var friut1=new Array("apple","orange","banana");
var friut2=["apple","orange","banana"];
// 遍历数组
for(var i=0;i<friut.length;i++){
document.write(friut[i]+" ")
}
for(var j in friut){
document.write(friut[j]+" ")
}
var str=friut.join("-");
document.write(str+"<br\>");
// push添加元素 返回数组新的长度
var size= friut.push("peach")
document.write(size+"<br\>");//4
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
// 运算符
// 算术运算符：+ - * / % ++ --
// 比较运算符: < > <= >= == != === !==
//==只判断值 ，不看类型
//===判断值和类型（严格比较）
// 逻辑运算符:&& || !
// 赋值运算符: + =+ -=
// 逻辑控制语句
// 条件结构： if-else switch
// 循环结构：for while do-while
// 遍历： for(var i=0;i<变量名.length;i++){} ; for(var i in 变量名)
// 中断循环：break continue
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
// 常用输出和输入
document.write("页面输出");
alert("警告提示！");
console.log("控制台输出");
var pwd= prompt("请输入密码","");
document.write(pwd);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用系统函数</title>
</head>
<body>
</body>
<script type="text/javascript">
// 系统函数： parseInt() parseFloat() isNAN(number）（判断是否是数值）
var num1=parseInt("78.89"); //78
var num2=parseInt("4564cor"); //4564
var num3=parseInt("this36"); //NAN
var flag=isNaN(num3); //true 判断如果不是数字返回true
var num4=parseFloat("4564cor"); //4567
var num5=parseFloat("45.58"); //45.58
var num6=parseFloat("45.58.25"); //45.58
var num7=parseFloat("cor4568"); //NAN
// 常用事件
// onclick:单机时触发
// onmouseover: 鼠标悬浮时触发
// onkeydown：某个键盘按键被触发
// onchange： 域的内容被改变时触发
// onload:页面加载时触发
// 自定义函数
// function 函数名 (参数1，参数2，.....){
// js语句；
// return 返回值;
// }
function study(n) {
for(var i=1;i<=n;i++){
document.write("欢迎学习javaScript"+"<br\>");
}
}
</script>
<!--input 不能写在JS里-->
<input type="button" value="显示5次学习js" onclick="study(prompt('请输入次数',''))">
</html>
例：统计包含a的个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
var aa=new Array();
aa[0]="America";
aa[1]="Greece";
aa[2]="Britain";
aa[3]="Canada";
aa[4]="China";
aa[5]="Egypt";
var num=0;
for (var i=0;i<aa.length;i++){
if (aa[i].indexOf("a")!=-1){
num++;
}
}
document.write("共有"+num+"个字符串包含a")
</script>
</html>
例：编写一个四则运算函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
function calculate() {
var num1= parseFloat( prompt('请输入第一个数',''));
var num2= parseFloat( prompt('请输入第一个数',''));
var symbol= prompt('请输入运算符','');
var num=0;
switch(symbol){
case "+":
num=num1+num2;
break;
case "-":
num=num1-num2;
break;
case "*":
num=num1*num2;
break;
case "/":
num=num1/num2;
break;
}
alert(num1+""+symbol+""+num2+"="+num)
}
</script>
<input type="button" value="计算两数运算结果" onclick="calculate()">
</html>