目录
一、javaScript概述
1.javaScript历史
2.JavaScript与html,css关系
二、基本语法
脚本写在哪里？
● 第一个JavaScript程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/index.js"></script>
<script>
//调用对话框库函数
//alert("大家好 我是js!");
alert("hello js!")
</script>
</head>
<body>
</body>
</html>● 对话框
①放在head中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
alert("hello js!")
</script>
</head>
<body>
</body>
</html>②放在 body中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>③写在外部的.js文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/index.js"></script>
</head>
<body>
</body>
</html>
1.变量
2.数据类型
javaScript支持的数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 数据类型 */
//1.数值类型（包含整数和浮点数）
var a = 10;
var b = 10.5;
/* alert(typeof(b));number typeof(b)返回变量的数据类型 */
//2.布尔类型
var c = true;
var d = false;
/* alert(a==b); */
//3.字符串，单引号和双引号都表示字符串
var e = "abcd";
var f = 'abcd';
/* alert(typeof(e));
alert(typeof(f)); */
//4.undefined 声明了变量，却没有
var g;
alert(g==undefined);
//对象类型
var date = new Date();
/* alert(date.getFullYear());
alert(date.getMonth()+1);
date.getDate(); */
</script>
</head>
<body>
</body>
</html>3.算术运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
算术运算符 + - * / % ++ --
+ 加法运算 字符串运算
*/
var a = "10";
var b = 5;
var c = 10;
var d = "a";
//alert(a+b);//字符串连接 105
//alert(b+c);//加法 15
/* alert(c-b);//5 减法
alert(a-b);//5 "字符串"-数值=数值 会把表达式中的数字字符串尝试类型转换
alert(c-d);//NaN not a number 如果字符串不能转换为数值 返回NaN */
// alert(a*b);//50
// alert(a*d);//NaN
</script>
</head>
<body>
</body>
</html>4.逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = "10";
var b = 5;
var c = 10;
var d = "a";
// alert(a==c);//只比较值是否相等
// alert(a===c);//全等（值和类型）
</script>
</head>
<body>
</body>
</html>5.赋值运算
6.逻辑运算符
7.条件运算符
8.控制语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = "10";
var b = 5;
var c = 10;
var d = "a";
if(c>b){
alert(c);
}
for (var i = 0;i < 5;i++){
alert(i);
}
</script>
</head>
<body>
</body>
</html>三、函数
1.函数定义的基本语法
2.函数调用
3.全局函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//①无参构造方法
/*
function test(){
alert("你好");
} */
//②有参构造方法
/*
function test(a,b,c){
alert(a+":"+b+":"+"c");
}
*/
//有返回值
/*
function test(a,b){
return a+b;
}
*/
//函数调用
/* test();
test(true,"abc",new Date());
var c = test(10,23);
alert(c); */
//系统中的全局函数 在系统已经定义好了，直接调用的函数
//alert(输出内容); 弹窗显示
var a = 10.5;
var b = "10.5";
var c = 5;
alert(parseInt(a));//把浮点数转为整数
alert(parseInt(b)+c);//把字符串更换转换成整数, 如果转换的内容是字符串,字母不能开头, 只将开头的数字部分转换
alert(parseFloat(c));
alert(parseFloat(b));
alert(typeof(a));
alert(typeof(b)); //typeof(变量) 获取变量的数据类型
var s = "2+3*2"; var s = 2+3*2;
var s = "alert(a)";
eval(s);//把传入进来的字符串可以当做js脚本执行
</script>
</head>
<body>
</body>
</html>四、内置对象
1.String字符串
●属性
●方法
2.Array数组
●属性
●方法
3.Date
● 获取日期
4.Math
● Math 对象，提供对数据的数学计算
● 属性
● 方法
五、事件
● 一些常用的事件
六、Html DOM对象
1.Html DOM概述
2.查找元素
3.改变HTML
● Html dom允许javaScript 改变html标签的内容
4.改变CSS
语法：
例：
七、计时
● 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function hello(){
console.log("下午好");
}
/* var t = setTimeout("hello()",5000);//设定指定时间后调用指定的函数，只调用一次 */
var t;
function startTime(){
t = setInterval("hello()",1000);
}
function stopTime(){
/* clearTimeout(t);//取消定时器 */
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="停止" onclick="stopTime()"/>
</body>
</html>
