JS基础知识1-CSDN博客

本文链接：https://blog.csdn.net/qq_39279061/article/details/76096106

1.1 基本概念

HTML负责呈现的内容，CSS负责以什么方式来呈现。
HTML+CSS：实现了静态页面。
实际上，我们更多的页面的要求是动态的，比如说淘宝网
这里写图片描述
热门商品等页面的自动切换。
时间也应该是动态显示的。
还有验证码、注册页面等的许多数据验证……
在我们所学的知识中只有JavaScript能使页面动起来。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p id="time">今天</p>
</body>
    <script>
        var p1=document.getElementById("time");
        p1.innerHTML = new Date().toString();
    </script>
</html>

显示结果为：
这里写图片描述

很明显，这个内容不是HTML提供的，而是由JS动态效果提供的，所以JS是实现动态页面的，及页面上的行为。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            height: 100px;
            width: 100px;
            background: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="div1" ></div>
</body>
<script language="javascript">
    var timer = setInterval("zoom()",50);
    var div = document.getElementById("div1");
    var timer;
    var width = 100;
    function zoom(){
        if(width >= 600){
            clearTimeout(timer);
        }
        width = width + 5;
        div.style.width = width + "px";
    }
</script>
</html>

这个案例是用定时器动态去改变元素的宽度，从而实现效果

1.2两种引用方式

**
两种方式：
1）内部引用，使用<script>标签，代码直接写在标签中。
2）外部引用，<script src="E103-01-03.js"></script>。

JS是一种解释性语言
计算机语言分为编译型和解释型：
程序员使用高级语言编制程序，但是程序最终由计算机只能执行，那么计算机只能执行机器语言（及二进制代码），那么这个过程就必然有一个从高级语言到机器语言的翻译过程。
（1）编译：将代码整体翻译成机器代码，如果有错误则停止，全部成功翻译完才能执行。
（2）解释：将代码翻译一条马上翻译一条，如果遇到错误则停止
计算机语言分为两种：编译型语言：JAVA、C++、C、PHP….
解释型语言：JavaScript、CSS…