web页面设计实训——03.12

最新推荐文章于 2022-08-24 11:15:54 发布

你啊李阿7

最新推荐文章于 2022-08-24 11:15:54 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

分类专栏： Web设计实训文章标签： web实训

本文链接：https://blog.youkuaiyun.com/weixin_44762531/article/details/88426857

Web设计实训专栏收录该内容

2 篇文章

订阅专栏

本文深入解析JavaScript的基础语法，涵盖脚本结构、数据类型、流程控制语句等关键概念，并通过实例演示如何利用JS实现时间问候语的动态展示，适合初学者快速掌握并实践JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript基本语法：

JavaScript是基于对象和事件驱动的客户端脚本语言。
javaScrpit是互联网上最流行的脚本语言（不需要编译，即可直接运行）。主要运用在HTML和web当中。

JavaScript调试：

Chrome浏览器，按F12按钮。可以弹出调试 js 的程序框，通过console可以调试 js 代码。（console.log(“”)）

JavaScript基本特点：

1.是一种解释执行的脚本语言
2.基于对象和事件驱动
3.简单
4.相对安全
5.动态性
6.只需要浏览器支持即可
7.嵌套在HTML当中

JavaScript基本语法：

1.脚本的基本结构
2.输入输出语句
3.数据类型
4.变量定义
5.分支语句
6.表达式操作符运算符

JavaScript数据类型：

1.布尔类型
2.字符串类型
3.布尔类型
4.字符串类型
5.数值类型
6.null和undefined
7.对象类型
8.function

三大流程语句：

1.分支语句（单分支和多分钟）
2.顺序语句
3.循环语句

Document对象：

getElementByID（）可以准确获取文档中指定元素
getElementByName（）
getElementByTagName（）可以获取指定标签名称的所有元素
write（）

变量的命名：

JavaScript中变量的命名规则与其它的语言的命名规则类似，需要遵循以下规则：
变量名必须以字母或下划线开头，后面可以是数字、字母或下划线；
变量名中不能包含不允许使用的特殊字符，例如空格及用于定义运算符的符号等；
变量名严格匹分大小写；
变量名不能使用关键字或保留字；
变量名最好包含变量的类型信息；

date对象的方法
Seconds和Minutes	0至59
Hours	0至23
Day	0至6（星期几）
Date	1至31（月份中的天数）
Months	0至11（一月至十二月）

练习：通过实例来复习JS基本语法

需求一：

需求说明：根据客户时间，输出问候语
简化：根据用户输入的时间给出问候语

1.输入时间
2.用变量存储
3.根据时间判断
4.给用户输出结果
转换：
1.用JS中如何让用户输入数据即输入方法

prompt("请输入时间：")

2.如何存储数据即变量存储

a = prompt("请输入时间：")

3.判断即分支语句

if (a < 12) {

        } else if (a < 18) {

        } else if (a < 24) {

        }

4.如何输出数据即输出方法

document.write("上午好")

总体代码：

<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>

需求二：

需求说明：根据客户电脑时间，在指定位置输出问候语（<div>________好</div>）

简化：

1.根据电脑时间，我们需要获取电脑时间，获取时间方法

var date = new Date();

2.需要变量来存储

var hours = date.getHours();
    var text = document.getElementById("one");

3.判断分支语句

if (hours <= 12) {
        text.innerHTML = "上午好"
    } else if (hours <= 18) {
        text.innerHTML = "下午好"
    } else if (hours <= 24) {
        text.innerHTML = "晚上好"
    }

4.获取指定div的ID或class。获取元素方法

<div id="one" ></div>

5.然后用变量存储获取的元素

<div id="one" style="color: #255e95;width: 100px;height: 100px;border: 1px solid red"></div>

6.通过元素来添加时间内容

总体代码：

<body>
<div id="one" style="color: #255e95;width: 100px;height: 100px;border: 1px solid red"></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>

需求三：

练习date内置函数

var today = new Date();获取当前时间
        var hh=today.getHours();(获得小时,分钟,秒)
        var mm=today.getMinutes();
        var ss = today.getSeconds();
        document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;

总体代码：

<body>
<div id="myclock" style="color: #255e95;"></div>
<script>
    var today = new Date();
    var hh=today.getHours();
    var mm=today.getMinutes();
    var ss = today.getSeconds();
    document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
</script>
</body>