Web前端开发笔记--JavaScript课堂笔记及练习

一.笔记
1. JavaScript简介

（1）JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
（2）JavaScript基本特点：

• 是一种解释性脚本语言 
• 主要用来向HTML页面添加交互行为 
• 可以直接嵌入HTML页面，但写成单独的JS 文件有利于结构和行为的分离
• 跨平台特性，可以在多种平台下运行

（3）JavaScript基本特性：

• 基于对象
• 简单性  
• 动态性  
• 平台无关性
• 安全性

2. JavaScript语法基础

（1）在网页中使用JavaScript

①创建JavaScript脚本片段：

• 在HTML中创建脚本JavaScrip片段，需要把所有的JavaScrip代码放置在 

②使用外部的JavaScript文件

• 如下所示：  

③在属性值中使用JavaScript

• 如下所示： 

（2）调试JavaScrip代码

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

• 代码如下所示：

var  name = “Hello world！”；

console.log(name)

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

• 代码如下所示：

var  name =prompt("请输入你的名字")；
alert("欢迎"+name+“进入我的网站”)；

（3）JavaScrip注释有两种方法

• 单行注释---" // "
• 多行注释---" /* */ "

二. 练习
1.需求一

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

（2）转化说明：

• 用户输入一个时间
• 用变量储存
•  根据时间判断上、下午或晚上
• 给用户输出结果

（3）总体代码如下：

2.需求二

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

（2）转化说明：

• 根据电脑时间，我们需要获取电脑时间
• 需要用变量储存
• 判断分支语句
• 获取指定div的ID和class，获取元素方法
• 然后用变量存储获取的元素
• 通过元素来添加时间内容

（3）总体代码如下：

3.练习Date（）内置函数
（1）总体代码如下：

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