JS入门笔记

1 基础知识

本章主要回答两个问题:

1)为什么需要有JavaScript(JS有什么作用)?

2)怎么用?

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>

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

HTML:负责呈现的内容。

CSS:负责内容呈现的方式。

JavaScript:负责内容的行为。

1.2两种引用方式

怎么用?

两种方式:

(1) 内部引用,使用<script>标签,代码直接写在标签中。

(2) 外部引用,<script src="E103-01-03.js"></script>

JavaScript的备注方式:1.//单行注释。

  2./*注释内容*/多行注释

JS是一种解释型语言

计算机语言分为编译型和解释型

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

有两种“翻译”方式:

(1) 编译:将代码整体翻译成机器代码,如果有错误则停止翻译,全部成功翻译完才能执行;

(2) 解释:将代码翻译一条马上执行一条,如果遇到错误则停止。

 

计算机语言分为两种:编译型语言:JAVA、C++、C、PHP….

解释型语言:JavaScript、CSS…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值