html入门之css

最新推荐文章于 2024-05-23 16:52:46 发布

ljs298443

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量62

点赞数 2

本文链接：https://blog.csdn.net/ljs298443/article/details/117665085

版权

一、js编写位置

JavaScript 代码必须位于 <script> 与 </script> 标签之间

JavaScript 函数可以被放置于 HTML 页面的 <body> 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放在body里面</title>
</head>
<body>
    <p id="one">减肥减肥哈哈哈</p>
    <button type="button" onclick="gai()">试一试</button>
    <script>
        function gai(){
            document.getElementById("one").innerHTML = "段落被改变了";
        }
    </script>
</body>
</html>

JavaScript 函数可以被放置于 HTML 页面的 <head> 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放在head里面</title>
    <script>
        function gai(){
            document.getElementById("one").innerHTML = "段落被改变了";
        }
    </script>
</head>
<body>
    <p id="one">好地方哈哈哈废话废话</p>
    <button type="button" onclick="gai()">试一试</button>
    
</body>
</html>

脚本可放置与外部文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放在外部</title>
    <script src="waibu.js"></script>
</head>
<body>
    <p id="one">好地方哈哈哈废话废话</p>
    <button type="button" onclick="gai()">试一试</button>
</body>
</html>

function gai(){
    document.getElementById("one").innerHTML = "段落被改变了";
}

二、js变量声明与数据类型

js变量：

JavaScript 变量必须以唯一的名称的标识，唯一的名称称为标识符

构造变量名称（唯一标识符）的通用规则：

1.名称可包含字母、数字、下划线和美元符号

2.名称必须以字母开头

3.名称也可以 $ 和 _ 开头

4.名称对大小写敏感（y 和 Y 是不同的变量）

5.保留字（比如 JavaScript 的关键词）无法用作变量名称

声明（创建） JavaScript 变量：

可以通过 var 关键词来声明 JavaScript 变量

可以在一条语句中声明许多变量

重复声明 JavaScript 变量；如果再次声明某个 JavaScript 变量，将不会丢它的值

js数据类型：

JavaScript 字符串值：

字符串（或文本字符串）是一串字符（比如 "Bill Gates"）。字符串被引号包围。您可使用单引号或双引号

JavaScript 数值：

JavaScript 只有一种数值类型。写数值时用不用小数点均可。超大或超小的数值可以用科学计数法来写。

JavaScript 布尔值：

布尔值只有两个值：true 或 false

JavaScript 数组：

JavaScript 数组用方括号书写，数组的项目由逗号分隔

JavaScript 对象：

JavaScript 对象用花括号来书写

三、js if语句与switch语句

if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块

else 语句来规定假如条件为 false 时的代码块

switch 语句来选择多个需被执行的代码块之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>单击按钮以显示基于时间的问候语：</p>
    <button onclick="myFunction()">试一试</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var hour = new Date().getHours(); 
            var greeting;
            if (hour < 10) {
                greeting = "早安";
            } else if(hour <18){
                greeting = "午安";
            }else{
                greeting = "晚安";
            }
            document.getElementById("demo").innerHTML = greeting;
        }
    </script>
</body>
</html>

四、js for循环与while语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch</title>
</head>
<body>
    <p id="one"></p>
    <script>
        var day;
        switch (new Date().getDay()){
            case 0:
                day="周日";
                break;
            // case 1:
            //     day="周一";
            //     break;
            case 2:
                day = "周二";
                break;
            case 3:
                day = "周三";
                break;
            case 4:
                day = "周四";
                break;
            case 5:
                day = "周五";
                break;
            case  6:
                day = "周六";
                break;
            default:
                day = "周一";
        }
        document.getElementById("one").innerHTML = "今天是" + day;
    </script>
</body>
</html>