一.课堂笔记
1. JavaScript简介
- JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
- JavaScript基本特点:
①是一种解释性脚本语言
②主要用来向HTML页面添加交互行为
③可以直接嵌入HTML页面,但写成单独的JS 文件有利于结构和行为的分离
④跨平台特性,可以在多种平台下运行
- JavaScript基本特性:①基于对象 ②简单性 ③动态性 ④平台无关性 ⑤安全性
2. JavaScript语法基础
(1)在网页中使用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('确定要提交吗?')" />
(2)调试JavaScrip代码
(注: JavaScript语言解释性的脚本语言,代码不需要进行预编辑,只需要浏览器解释输出即可)
①使用 console.log()方法输出进行测试
如下所示:var name = “Hello world!”;
console.log(name)
②使用 prompt输入和alert输出进行测试
如下所示:var name =prompt("请输入你的名字");
alert("欢迎"+name+“进入我的网站”);
(3)JavaScrip注释有两种方法
- 单行注释---" // "
- 多行注释---" /* */ "
二. 练习
1.需求一
需求说明:根据客户时间,输出问候语
转化说明:
- 用户输入一个时间
- 用变量储存
- 根据时间判断上、下午或晚上
- 给用户输出结果
总体代码如下:
<script>
a = prompt("请输入时间(eg:下午16点,即输入:16,*注:0-24):")
if(hours<=12){
document.write("上午好");
}else if(hours<=18){
}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()内置函数
总体代码如下:
var today = new Date();//获取当前时间
var hh = today.getHours();//获取小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML=hh+"."+mm+"."+ss;