JS基本概念

JS基础知识

1.基本概念

为什么需要有JavaScript（JS有什么样的作用）

HTML负责呈现什么内容，CSS负责以何种方式来呈现

HTML+CSS=静态页面

实际上，我们更多的，页面的要求是动态的，比方说新浪新闻

JS基本概念

热点、聚焦........页面的自动切换。

JS基本概念

时间也应该是动态显示的。还有验证码、注册页面的数据验证........

那么怎么才能让页面动起来？

答：JavaScript！

<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单运算</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>

<body>
<p id="time">今天是农历闰六月初二 2017.7.24 周一</p>
</body>
<script>
    var p1 = document.getElementById("time");
    p1.innerHTML = new Date().toString();
</script>

显示结果为：

JS基本概念

很明显，这个内容不是HTML提供的，而是有JS动态生成的

所以JS是实现动态页面的，即页面的行为。

<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>

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

怎么用JS？

两种方式：

（1）内部引用：使用<script>标签，代码直接写在标签里;

（2）外部引用：<script src="E103-01-01.js"></script>

JaveScript的备注方式：（1）// 单行注释；

（2）/*注释内容*/ 多行注释

JS基本概念

计算机语言分为两种：编译型语言：Java；C++；C；PHP........

解释型语言：JavaScript；CSS........

程序员使用高级语言编制程序，但是程序最终是由计算机去执行的，但是计算机只能执行机器语言（即二进制代码），那么这个过程就必然有一个从高级语言到机器语言的“翻译”过程。

有两种“翻译”方式：

（1）编译：将代码整体翻译成机器代码，如果有错误则停止翻译，全部成功翻译完才能执行；

（2）解释：将代码翻译一条马上执行一条，如果遇到错误则停止。

HTML：负责呈现的内容

CSS：负责内容呈现的方式

JavaScript：负责内容的行为。

2.两种引用方式

JS书写在<script>里-内部引用

用<script src = "路径">-外部引用

相关推荐