第2集_javascript前端特效概念

最新推荐文章于 2024-07-25 11:15:00 发布

darkalex001

最新推荐文章于 2024-07-25 11:15:00 发布

阅读量179

点赞数

分类专栏：云知梦javscript

本文链接：https://blog.csdn.net/darkalex001/article/details/79059658

版权

云知梦javscript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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

darkalex001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第2集_javascript前端特效概念

script> //js代码script>例子（JS单击事件）：html lang="en">head> meta charset="UTF-8"/> title>Documenttitle>head>body> div class='img'> img src="dog.png" onclick="alert(123)"/>
复制链接

扫一扫

专栏目录