image.png
第一个js 程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试js</title>
<script >
alert(123);
</script>
</head>
<body>
</body>
</html>
JS 使用示范
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Script >
alert(123123123123);
//将内容写到 html代码中
document.write("这是以JavaScript印出的！");
document.write("<br>");
</Script>
</head>
<!--onload时间触发 body中加载完成时 才触发时间 -->
<body onload="alert('hello')">
<Script Language="JavaScript">
alert("a");//先执行，然后才触发onload代码；
// 使用系统自定义的函数 获得当前的日期
var d = new Date();
var time = d.getHours();
//js 控制台
console.log(time);
//逻辑代码
if(time < 20){
document.write("<b>Good morning</b>");
}
else{
document.write("<i>Good day</i>");
}
</Script>
<br>aaaa
<Script Language="JavaScript">
alert("b");//先执行，然后才触发onload代码；
</Script>
</body>
</html>
外部引入 :<script src="js/externalJS.js"> </script>
<!DOCTYPE html>
<html>
<head>
<title>Firs JavaScript Sample</title>
<meta charset="utf-8">
<script src="js/externalJS.js"> </script>
</head>
<body>
<script Language="JavaScript">
alert("a");
document.write("<body bgcolor='yellow' text='blue'><br>");
document.write("<font size='+3'>This is just plain old HTML stuff.</font>");
</script>
</body>
</html>
书写javaScript 需要注意的事儿
注释与java 类似
image.png
特殊字符 即 类似于java中的转义字符
image.png
常量
image.png
变量
image.png
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a; //声明单个变量。var关键字与变量名之间以空格分隔
var b, c; //声明多个变量。变量之间以逗号分隔
var d = 1; //声明并初始化变量。等号左侧是变量名，等号右侧是值
var e = 2, f = 3; //声明并初始化多个变量。以逗号分隔多个变量
var e = f = 3; //声明并初始化多个变量，且定义变量的值相同
console.log( a );
console.log( b );
console.log( c );
console.log( d );
console.log( e );
console.log( f );
</script>
</head>
<body>
</body>
</html>
image.png
js数据类型 5种基本数据类型1种复杂类型
image.png
image.png
image.png
image.png
image.png
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var a = "1232.45";
document.write(parseInt(a)+"<br>");
document.write(parseFloat(a)+"<br>");
document.write(Number(a)+"<br>");
document.write("<hr>");
var b = "1232w45";
document.write(parseInt(b)+"<br>");
document.write(parseFloat(b)+"<br>");
document.write(Number(b)+"<br>");
document.write("<hr>");
var c = true;
document.write(parseInt(c)+"<br>");
document.write(parseFloat(c)+"<br>");
document.write(Number(c)+"<br>");
document.write("<hr>");
</script>
</body>
</html>
运算结果
image.png
运算符优先级
image.png
image.png
image.png
定义函数 两种方式
1.静态定义
image.png
2.动态定义
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script language="javascript">
var circularityArea = new Function( "r", "return r*r*Math.PI" ); // 创建一个函数对象
var rCircle = 2; // 给定圆的半径
var area = circularityArea(rCircle); // 使用求圆面积的函数求面积
alert( "半径为2的圆面积为：" + area ); // 输出结果
</script>
</body>
</html>
image.png
动态传参数 arguments对象
image.png
函数调用
1.连接调用
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions</title>
<script language=javascript>
function greetings(){ // Function defined within <head> tags
document.bgColor="lightblue";
alert("Greetings to you!");
}
</script>
</head>
<body><center>
<a href="javascript:greetings()"><big>Click here for
Salutations</big>
</a><br>
</center>
</body>
</html>
2.事件触发 （最常用）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions and Events</title>
<script language=javascript>
function greetings(){ // Function definition
document.bgColor="pink";
alert("Greetings and Salutations! ");
}
</script>
</head>
<body><center>
<form>
<input type="button" value="Welcome button" onClick="greetings();">
</form>
</body>
</html>
image.png
eval("alert(123)");
作用域：
1.共有函数
image.png
2.私有函数
image.png
定义数组 参考java中定义数组方式，语法上有些许差异。
//Object[] arr=new Object[0];
var arr=new Array();
//Object[] arr=new Object[5];
var arr=new Array(5);
//Object[] arr=new Object[]{"5"};
var arr=new Array("5");
//Object[] arr={1,2,3,4,5,6};
var arr=new Array(1,2,3,4,5,6);
var arr=[1,2,3,4,5,6];
//使用数组 用arr[n]
//输出
console.log(arr[2]);
//输入
arr[2]=10;
遍历数组
var arr=[1,2,3,4,5,6];
for(var n in arr){
console.log(arr[i]);
}
image.png
image.png
image.png
网友评论