JavaScript基础概念

最新推荐文章于 2024-09-24 10:17:01 发布

HelloWorldLzz

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量812

点赞数

分类专栏： H5 基础文章标签： html javascript 计算机标签

H5 基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

为什么需要js：
HTML负责呈现内容
CSS负责以何种方式来呈现
CSS+HTML实现了静态页面
实际上，我们的页面更多的要求是动态的。比如说新浪网的新闻，热点聚焦是自动切换的、时间也是自动切换的。
那么怎么才能让页面动起来，答案就是JavaScript！
注释：单行注释用双斜杠 //，多行注释用/**/

计算机语言分为两种：
编译型：Java c++ PHP ...
解释性语言：JavaScript、Css...
<head>
<title>简单运算</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<style type="text/css">
p{
color: red;
font-size: 45px;
}
</style>
</head>
<body>
<p id="time">今天是。。。</p>
</body>
<script>
var p1=document.getElementById("time");
p1.innerHTML=new Date().toString();

</script>

结果演示如下图

很明显这个内容不是HTML提供的，而是由js动态生成的。所以js实现了动态页面，即页面的行为。
<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>
这个案例是用定时器去改变元素的宽度，从而实现动态效果。
怎么用js？
两种方式：
（1）内部引用，使用<script>标签。代码直接写在标签里面。
（2）外部引用，<script src=“路径”>引用
Js是一种解释型语言
计算机语言分为编译型和解释性语言。程序员使用高级语言来编制语言，但计算机只能来执行机器语言（二进制代码），那么这个过程就必然有一个从高级语言到机器语言的翻译过程。
有两种翻译方式
（1）编译：将代码整体翻译，如果有错误则停止翻译，全部成功翻译完才能执行。

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

两种引用方式
Js书写在《script》标签里（内部引用），用《script src=“路径”》（外部引用）
HTML：负责呈现的内容
CSS：负责呈现的方式。
JavaScript：内容的行为。