1.JavaScript引入方式:
嵌入式:用script标签包裹JavaScript代码,直接写到HTML文件里,示例:
<script>
javascript 语句;
</script>
外链式:将JavaScript代码保存到一个单独的文件中,用js作为文件的拓展名。然后再用script标签的src属性引入文件。
html文件
.....
<script src="js/test.js"></script>
.....
js/test.js文件
......
alert("hellow");
......
行内式:将JavaScript代码作为HTML标签的属性值使用
例: 在单击test按钮时弹出一个警告框提示hello
<a href="javascript:alert('hello');">test</a>
2.常用输出语句:
alert():
alert()用于弹出一个警告框,确保用户可以看到某些信息。常用于程序测试。
console.log():
console.log()用于在浏览器控制台输出内容。
document.write():
document.write()用于在HTML文档中输入内容
document.write('你好!');
3.注释
单行注释:
document.write('你好!');//输出一句话
多行注释:
/*
document.write('你好!');
alert('hello');
*/
4.数据运算
比较大小:
alert(22>33);//输出结果:false
alert(22==22);//输出结果:true
字符串与数字的拼接:
alert('220+230='+220+230);//输出结果:220+230=220230
alert('220+230='+(220+230));//输出结果:220+230=250
5.使用变量保存数据
var 变量来声明关键字
var num1=22;
var num2=33;
alert(num1+num2);//输出结果55
alert(num1-num2);//输出结果-11
6.函数
<script>
var name = prompt('请输入你的名字:'); // 弹出一个输入框,提示用户输入内容
alert('你的名字是:' + name); // 输出用户输入的内容
</script>
<script>
alert('你的名字是:' + prompt('请输入你的名字:'));
</script>
<script>
prompt('请输入你的名字:', '匿名');
</script>
<script>
// 定义函数
function sum(a, b) {
c = a + b; // 函数内部的代码
return c; // 函数的返回值(也可以与上一行合并为return a + b;)
}
// 调用函数
alert(sum(11, 22)); // 输出结果:33
alert(sum(22, 33)); // 输出结果:55
</script>
prompt(‘请输入你的名字’,‘匿名’);
第二个参数是弹出窗口的输入框里默认文本。
自定义函数sum() 调用函数。
7.对象
window对象
<script>
window.console; // 访问window对象的console属性
window.document; // 访问window对象的document属性
window.alert('test'); // 调用window对象的alert()方法
window.prompt('test'); // 调用window对象的prompt()方法
</script>
document对象:
<script>
window.console.log('test'); // 调用console对象的log()方法
window.document.write('test'); // 调用document对象的write()方法
</script>
String对象
<body>
<div id="test">Hello</div>
<script>
var test = document.getElementById('test'); // 根据元素id创建元素对象
alert(test.innerHTML); // 通过InnerHTML属性获取元素内容,输出结果:Hello
</script>
</body>
自定义对象
//创建对象
var stu={};//创建一个空对象
//添加属性
stu.name='小明';//为stu对象添加name属性
stu.age='18';//为stu属性添加age属性
//访问属性
alert(stu,name);//访问stu对象的name属性,输出 结果小明
//添加方法
stu.introduce=function(){
return '我叫'+this.name+'.今年'.+this.age+'岁';
};
//调用方法
alert(stu.introduce());
8.事件
<input type="button" onclick="alert('Hello');" value="test">
<body>
<input id="btn" type="button" value="test">
<script>
document.getElementById('btn').onclick = function() {
alert(this.value); // 获取按钮的value属性,输出结果:test
};
</script>
</body>
通过getElementById()创建元素对象以后。为该对象设置了onclick事件
9.案例:改变网页背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变网页背景色</title>
<script>
function color(str) {
document.body.style.backgroundColor = str;
}
</script>
</head>
<body>
<input type="button" value="设为红色" onclick="color('red')">
<input type="button" value="设为黄色" onclick="color('yellow')">
<input type="button" value="设为蓝色" onclick="color('blue')">
<input type="button" value="设为自定义颜色" onclick="color('#00ff00')">
</body>
</html>
验证用户输入密码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证用户输入的密码</title>
<script>
var password=prompt('请输入密码:');
if(password=='123'){
alert('输入正确');
}else{
alert('输入错误');
}
</script>
</head>
<body></body>
</html>