JavaScript的基础介绍笔记及运用练习

最新推荐文章于 2022-08-19 23:46:56 发布

balabalapd

最新推荐文章于 2022-08-19 23:46:56 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/WLkkjm/article/details/88529822

版权

一. JavaScript的基础介绍

1. JavaScript简介：

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
JavaScript基本特性：①基于对象 ②简单性 ③动态性 ④平台无关性 ⑤安全性

2. JavaScript语法基础：

在网页中使用JavaScript：

①创建JavaScript脚本片段

在HTML中创建脚本JavaScrip片段，需要把所有的JavaScrip代码放置在<script>标签中。

代码如下：<script language=“JavaScrip” type=“text/JavaScrip”>

//JavaScrip代码

</script>

②使用外部的JavaScript文件

代码如下：<script language=“JavaScrip” type=“text/JavaScrip” src="file.js"> </script>

③在属性值中使用JavaScript

代码如下：<input type="button" value="提交" οnclick="alert('确定要提交吗？')" />

调试JavaScrip代码：

①使用 console.log()方法输出进行测试

代码如下：var name = “Hello world！”；

console.log(name)

②使用 prompt输入和alert输出进行测试

代码如下：var name =prompt("请输入你的名字")；

alert("欢迎"+name+“进入我的网站”)；

二. JavaScript的运用练习

练习：

1.需求一

需求说明：根据客户时间，输出问候语

转化说明：①用户输入一个时间

②用变量储存

③根据时间判断上、下午或晚上

④给用户输出结果

总体代码：

<script>

a = prompt("请输入时间(eg:下午16点，即输入：16，*注：0-24)：")

if(hours<=12){
      document.write("上午好");
}else if(hours<=18){
        document.write("下午好");
}else if(hours<=24){
      document.write("晚上好");
}

</script>

2.需求二

需求说明：根据用户电脑时间，在指定位置输出问候语

转化说明：①根据电脑时间，我们需要获取电脑时间

②需要用变量储存

③判断分支语句

④获取指定div的ID和class，获取元素方法

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

⑥通过元素来添加时间内容

总体代码：

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

3.练习Date（）内置函数

Date对象的方法：

值	整数
Second和Minutes	0至59
Hours	0至23
Day	0至6（星期几）
Date	0至31（月份中的天数）
Months	0至11（一月至十二月）

总体代码：

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

balabalapd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的基础介绍笔记及运用练习

一. JavaScript的基础介绍1. JavaScript简介：JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。 JavaScript基本特性：①基于对象 ②简单性 ③动态性 ④平台无关性 ⑤安全性2.JavaScript语法基础：在网页中使用JavaScript： ①创建JavaScript脚本片段 ...
复制链接

扫一扫