<script>
//js代码
</script>
例子(JS单击事件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<div class='img'>
<img src="dog.png" onclick="alert(123)"/>
</div>
</body>
</html>
js特效:
1.定义事件(触发时机+行为)
2.触发事件(行为发生)
3.事件发生是具有重复性的
特效(当鼠标划入进去的时候产生的特效)
<div class='img'>
<img src="dog.png" onmouseenter="alert(123)"/>
</div>
以上JS代码为内联样式
也可以放在head标签中
scirpt标签最好放在body标签之后,因为计算机代码是从下至下执行的。
代码如下(需要放在body之后,内部JS嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<div class='img'>
<img src="dog.png" id='dogid'/>
</div>
</body>
<script>
// 找到小狗图片
dogobj=document.getElementById('dogid');
// 给小狗图片加事件
dogobj.onclick=function(){
// 代码段
alert(1);
}
// 触发事件
</script>
</html>
面向对象编程:(js是一门基于对象的语言)
1.如何获得该对象
2.如何调用该对象的属性
3.如何调用该对象的方法
对象的组成部分:
1.属性(特征)
2.方法(行为)
JS代码放在外部
新建index.js文件
<body>
</body>
<script src='index.js'></script>
JS标签放置位置
1.内联
2.内部
3.外部
定义变量
var str = "hello world";
<script>
//定义变量x
x = 5;
// 定义变量y
y = 6;
// 定义z=x+y表达式
z = x + y;
alert(z);
</script>
<script>
username = '小金';
alert("my name is"+username);
</script>
变量定义:
username=’小金’;
字符串连接变量:
‘my name is’ +username;
var可加可不加
document.write('my name is'+ username);
document.write('<h1>my name is' + username + '</h1>');
js如何输出变量:
1.alert(username);
2.document.write(‘username’);
<body>
<div>
<h1>aaaaaaaaaaa</h1>
<script>
username = '小金';
document.write('my name is'+username);
</script>
<h2>bbbbbbbbbbb</h2>
</div>
</body>
输出结果
aaaaaaaaaaa
my name is小金
bbbbbbbbbbb