Web实训知识点-0312

最新推荐文章于 2024-06-27 23:20:14 发布

原创最新推荐文章于 2024-06-27 23:20:14 发布 · 215 阅读

CC 4.0 BY-SA版权

这篇博客回顾了Web实训中的JavaScript知识点，强调了JavaScript作为基于对象和事件驱动的客户端脚本语言的角色。内容涵盖了JavaScript的基本语法，包括脚本结构、输入输出、变量和数据类型。还讲解了如何创建JavaScript脚本片段，包括内联和外部引用，并介绍了document对象的使用。课堂练习部分涉及根据客户时间动态生成问候语的实践应用。

笔记回顾

播客格式：
第4组_0312_播客记录

学号姓名播客地址
33 舒茜 https://blog.youkuaiyun.com/UchihaHONEY/article/details/88422245

一、JavaScript是一种基于***对象***和***事件驱动***客户端脚本语言。

二、JavaScript基本语法：
脚本的基本结构
常用输入输出语句
变量的定义
javascript的数据类型

三、数据类型


基本数据类型	数值类型、布尔类型、字符串类型
符合数据类型	数组与对象
特殊数据类型	Null和undefine

四、创建JavaScript脚本片段

创建JavaScript脚本片段（在html内）

①html4 版本
<script language="JavaScript" type="text/javascript">

</script>;


②html5版本
<script>
————
——
</script>

使用外部的JavaScript文件

<script language="javaccript" type="text/javascript" src="file.js"></script>

在属性值中使用JavaScript

<input type="button" value="提交" onclick="alert(’确定要提交吗？‘)“/>

五、document对象


getElementById()	返回对拥有指定id的第一个集
getElementsByName()	返回带有指定名称的对象的集
getElementsByTagName()	返回带有指定标签的对象的集
write()	向文档写文本、HTML表达方式的代码

以下是课堂练习

练习需求
1.根据客户时间，输出问候语
简化：根据客户输入时间给出问候语

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

       a = prompt("请输入时间(eg：下午16点 即输入：16）时间为0-24：")
       if(a<=12){
           document.write("上午好");
       } else if(a<=18){
           document.write("中午好");
       } else if(a<=24){
           document.write("晚午好");
       }
    </script>
</head>
<body>

</body>
</html>

以上代码假如以18点为例，输出的结果将会是以下
在这里插入图片描述

2.根据客户电脑时间，在指定位置输出问候语

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<div id="one" style="color: #014d67; width: 100px;height: 100px;border: 1px solid darkred"></div>
<script>
    var date = new Date();
    var hours =date.getHours();
    var text = document.getElementById("one");
    if(hours<=12){
        text.innerHTML="上午好"
    } else if(hours<=18){
        text.innerHTML="中午好"
    } else if(hours<=24){
        text.innerHTML="晚午好"
    }
</script>
</body>
</html>

以上代码假如以16点为例，输出的结果将会是以下
在这里插入图片描述