第06讲：JavaScript脚本语言

最新推荐文章于 2023-11-02 13:45:46 发布

Java秦老师

最新推荐文章于 2023-11-02 13:45:46 发布

阅读量598

点赞数

分类专栏：第2阶段-动态网站开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qzc70919700/article/details/128914940

版权

第2阶段-动态网站开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、贯穿案例展示：控制页面弹出对话框

图片.png

二、案例切片

切片1：弹出警告对话框
切片2：分数累加器

三、切片1：弹出警告对话框

3.1、导入：为什么要用JS

JavaScript用于控制网页内容，实现网页浏览者与网页内容之间的交互，这种交互的实现直接发生在客户端，并不需要与Web服务器之间进行数据通信，因此将获得极高的响应速度。

3.2、实现需求

当页面加载完成后弹出一个警告对话框

3.2.1、需求分析

需求分解：
1、使用JS实现弹出警告对话框

3.2.2、需求实现

 <script type="text/javascript">
       alert("Hello JS")
 </script>

3.3、知识点补充

3.3.1、如何使用JS

在HTML页面中，使用< scipt>< /script>标签将JavaScript脚本，嵌入到页面中。当游览器读取到网页中的< script>标签时，将以指定脚本语言的方式解释执行，而不是以普通的HTML文本进行处理。在HMTL中编写JavaScript 一般有两种方式：

a、直接嵌入

JavaScript脚本可以写在HTML网页中的任何位置

语法：
   <script type="text/javascript">
       document.write("欢迎使用JavaScript编写页面特效")
   </script>

提示：document.writeln输出后会有一个空格

b、使用外部JavaScript文件

使用外部JavaScript文件就是以单独的文件存放JavaScript代码，并将其后缀命名为.js。一般会创建一个js文件夹用来存放外部js文件，外部js文件的名称和对应的网页名称相同

步骤：
  a、创建外部js文件
  b、在html页面中引用外部js文件
    <script language=“javascript” src="外部js文件">

3.3.2、函数

在Java中可以使用函数将java代码进行封装后多次调用，javascript中同样可以编写函数。JavaScript中的函数包括自定义函数和系统函数。

a、函数基本语法

在javascript中定义函数必须以function关键字开头。

语法:
  function  函数名(参数列表){
    函数代码块
    [return 表达式]
  }

提示：函数中的参数列表可以不写var或let关键字，直接写参数名

b、函数表达式

JavaScript的函数也是一个对象，上述定义的函数实际上是一个函数对象，而函数名可以视为指向该函数的变量

语法:
left f = function(参数列表){
            函数体
         有返回值，直接使用return  value;
  };
调用函数:
  f(参数);

在这种方式下，function (x) { … }是一个匿名函数，它没有函数名。这个匿名函数赋值给了变量f，所以，通过变量f就可以调用该函数。调用函数 f();

c、箭头函数

ES6的箭头函数lambda表达式: 箭头函数声明方式：() => {}

//箭头函数
let f =(num)=>{
     console.log(num);
};
//调用函数
f(10);

3.3.3、事件

JavaScript是基本对象、采用事件驱动的脚本语言。在DOM模型中，通过鼠标或按钮在浏览器窗口或网页上执行的操作称为事件(event)。例如用鼠标单击网页上的某个按钮，则该按钮发生了鼠标的单击事件，按钮就是事件源。事件不仅产生于与用户交互的过程中，还产生于浏览器的自身动作。例如浏览器载入页面时会发生load事件，关闭页面时会发生unload事件。如果将一段程序与各件事件源发生的事件相关联，事件发生时，浏览器将自动执行相关联的程序代码，执行的过程即为事件驱动。对事件进行处理的程序或函数，被称为事件处理程序，它是响应事件的动作。通常情况下，处理事件的程序被封装到函数中，然后将函数与对象事件关联在一起。

a、事件注册方式1：标签中定义事件

<input type=”button” onclick=”sayHi()” value=”sayHi”/>
<script type="text/javascript">
    function sayHi(){
        alert("hello");
    }
</script>

b、事件注册方式2：通过不同的事件属性定义事件

<input type=”button” id="btn" value=”sayHi”/>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        alert("hello");
    }
</script>

c、事件注册方式3：通过addEventListener定义事件

<body>
    <button id="btn">say hi</button>
</body>
<script type="text/javascript">
    document.getElementById("btn").addEventListener("click", function(){
        console.log("目标元素被点击了");
    });
</script>

3.4、案例拓展

3.4.1、案例一

按图实现效果

点击页面按钮，在页面上弹出确认对话框，点击确认对话框的确认键，在网页上输出“欢迎使用xxx管理系统”

图片.png

使用到的知识点

JavaScript事件注册机制、js取dom

参考代码

<!DOCTYPE html>
<html>
    <script type="text/javascript">
        function doTest(){
            if(confirm("确定输出吗？")){
                document.write("欢迎使用xxx管理系统")
            }
        }
    </script>
    <body>
        <button onclick="doTest()">点我试试</button>
    </body>
</html>

3.4.2、案例二

按图实现效果

点击页面按钮，让页面上的分数累加

图片.png

使用到的知识点

JavaScript事件注册机制、js取dom
获取网页控件内容：innerHtml（带样式）和innerText（不带样式）
将字符串转换成整型：parseInt(字符串)
将字符串转换成浮点型：ParseFloat(字符串)

参考代码

<!DOCTYPE html>
<html>
    <body>
        <div id="num"></div>
        <button onclick="doAdd()">累加分数</button>
    </body>
    <script type="text/javascript">
        document.getElementById("num").innerText = 0;
        
        function doAdd(){
            var num = document.getElementById("num").innerHTML;
            document.getElementById("num").innerText = parseInt(num) + 1;
        }
    </script>
</html>

3.5、小结

现场提问

1、js代码写在哪一个标签中？
2、使用js代码可以有哪2哪种方式？
3、如何向浏览器控制台输出日志？
4、可以使用什么关键字来声明一个函数？
5、请输出一种事件注册的方法

Java秦老师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录