第四章第一天JavaScript基础-EcmaScript

最新推荐文章于 2022-10-30 21:10:27 发布

qq_40115919

最新推荐文章于 2022-10-30 21:10:27 发布

阅读量570

点赞数

本文链接：https://blog.csdn.net/qq_40115919/article/details/81947957

版权

javasscript 的介绍

什么是javascript

Java 与 javascript 有什么区别？

它们没有关系，雷锋和雷峰塔的关系

javascript 的作用？

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰)

Javascript：它能够让整个页面具有动态效果(表单验证)。

javascript 的组成部分

ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数

据类型、语句、函数等等)

DOM：文档对象模型，包含(整个 html 页面的内容)、

BOM：浏览器对象模型,包含(整个浏览器相关内容)局部异常和全局异常的配置和使用

例一、输出hello world

需求说明：使用JavaScript知识，在网页中输出一个“hello world”文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    document.write("<h1>hello world</h1>")
</script>
</body>
</html>

2、alert提示框

需求说明：使用JavaScript知识，在网页中弹出一个提示框，提示框的内容为“你好，我是alert弹出框”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    alert("你好，我是alert弹出框");
</script>
</body>
</html>

3. 编写一个四则运算函数

需求说明编写函数，实现使用prompt输入两个数和运算符号，并计算两个数的操作结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="click" value="计算两数运算结果" onclick="compute()"/>

</body>
<script type="text/javascript">
function compute() {
    var result=0;
    var num1=parseInt(prompt("请输入第一个数："));
    var num2=parseInt(prompt("请输入第二个数："));
    var operator=prompt("请输入运算符号：");
    switch (operator){
        case "+":
            result=num1+num2;
            break;
        case "-":
            result=num1-num2;
            break;
        case "*":
            result=num1*num2;
            break;
        case "/":
            result=num1/num2;
            break
    }
    alert("两数运算结果为："+num1+operator+num2+"="+result)
}
</script>
</html>

例四、需求说明：

制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟(动态显示)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>你好，欢迎访问贵美商场！</p>
<p id="date"></p>
</body>
<script type="text/javascript">

    function time() {
        var times = new Date();
        var year = times.getFullYear();//返回年份
        var month = times.getMonth() + 1;//返回月份
        var date = times.getDate();//返回一个月中的某一日
        var hh = times.getHours();//返回小时
        var mm = times.getMinutes();//返回分钟
        var ss = times.getSeconds();//返回秒数
        var hhs;//12小时制
        var aa;//上午（AM）和下午（PM）
        if (hh > 12) {
            hhs = hh - 12;
            aa = "PM";
        } else {
            hhs = hh;
            aa = "AM";
        }

        var day = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var days = times.getDay();

        document.getElementById("date").innerHTML = year + "年" + month + "月" + date + "日&nbsp;&nbsp;" + hhs + ":" + mm + ":" + ss + "&nbsp;&nbsp;"
            + aa + "&nbsp;&nbsp;" + day[days];
    }

    onload = function () {
        setInterval(time, 1000);
    }

</script>
</html>