大家好,小编又和大家见面了。
今天和大家好好探讨一下JavaScript,也就是我们平常所说的js
首先给大家普及一下基本概念:
HTML负责呈现什么内容,
CSS负责以何种方式来呈现。
HTML+CSS:实现了静态页面。
而如果想让你的网页更炫,功能更强大,该怎么做呢?
答案无疑就是使用js
下面给大家举一个例子
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单运算</title>
<style>
p{
color:red;
}
</style>
</head>
今天和大家好好探讨一下JavaScript,也就是我们平常所说的js
首先给大家普及一下基本概念:
HTML负责呈现什么内容,
CSS负责以何种方式来呈现。
HTML+CSS:实现了静态页面。
而如果想让你的网页更炫,功能更强大,该怎么做呢?
答案无疑就是使用js
下面给大家举一个例子
<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>
显示结果为:
<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.内部引用:使用<script>标签,代码直接写在标签中
2.外部引用:<script src="E103-01-03.js"></script>
js和平常的编译软件一样也有注释功能:
1.//单行注释。
2./*注释内容*/多行注释
给大家说明一下,js是一种解释性语言,他会逐条进行解释,
当上条发生错误时他不会报错,将代码翻译一条马上执行一条,
如果遇到错误则停止。
程序设计基础
1.数据类型
字符串 string
数值 number
布尔类型 boolean
alert() 提示框 就是平常我们所说的打印
typeof 打印数据类型
既然说到数据类型,那么为什么需要数据类型?
因为生活中是存在不同的数据类型的,计算机要解决生活问题,
那么他就要和生活中的数据类型产生映射,
所以就有了数据类型。
声明变量
因为生活中一些数据不是一成不变的,他的值会变,
所以JS里面就有了变量和他相对应。
var 属性名=值(var variable的缩写)
例如 var name="不忘初心,终得始终。";
alert(name);
提到命名就要讲一下命名规则了
可以有字母、数字、下划线和$组成
数字不能开头
关键字不能起 例如 var var="不忘初心,终得始终"
一般情况下,只用英文开头,也可以使用$和_,但是不建议使用
不能用数字开头,因为8进制,16进制会产生冲突
命名原则:见名知意
命名规范:
1.尽量使用英文单词或者组合、专业名词
2.尽量不使用拼音
大家命名尽量规范些,形成良好的习惯。
变量值:
变量值:
数据类型的表现形式
变量的类型是由变量的值决定的。(用多少给多少,减少空间的浪费)
系统会为不同的类型分配不同的大小来存储数据。
如果是布尔类就分配一个字节大小来存储。
如果是数字和字符串,那么根据它的大小和长度来分配字节数来存储
Js是弱类型语言,所有的类型都用var声明。
Js是动态类型语言,变量的值会根据值的变化而变化,不会出错。
变量就是一个内存单元。
js语言特点:
更加高级,体现在能够根据数值自动识别数据类型
不太严谨
变量不用声明就可以使用。
使用严谨的格式就必须先定义变量才能使用变量
js也是面向对象使用的
总之,一切事物皆对象。为什么有对象?
和为什么有变量一样,生活中处处有对象。
如何使用对象里面的属性?
使用对象名+.+对象属性名。
对象名.对象属性名
注意:name这个名字是特殊的,使用name来给变量起名字时,不会报错
所以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.内部引用:使用<script>标签,代码直接写在标签中
2.外部引用:<script src="E103-01-03.js"></script>
js和平常的编译软件一样也有注释功能:
1.//单行注释。
2./*注释内容*/多行注释
给大家说明一下,js是一种解释性语言,他会逐条进行解释,
当上条发生错误时他不会报错,将代码翻译一条马上执行一条,
如果遇到错误则停止。
程序设计基础
1.数据类型
字符串 string
数值 number
布尔类型 boolean
alert() 提示框 就是平常我们所说的打印
typeof 打印数据类型
既然说到数据类型,那么为什么需要数据类型?
因为生活中是存在不同的数据类型的,计算机要解决生活问题,
那么他就要和生活中的数据类型产生映射,
所以就有了数据类型。
声明变量
因为生活中一些数据不是一成不变的,他的值会变,
所以JS里面就有了变量和他相对应。
var 属性名=值(var variable的缩写)
例如 var name="不忘初心,终得始终。";
alert(name);
提到命名就要讲一下命名规则了
可以有字母、数字、下划线和$组成
数字不能开头
关键字不能起 例如 var var="不忘初心,终得始终"
一般情况下,只用英文开头,也可以使用$和_,但是不建议使用
不能用数字开头,因为8进制,16进制会产生冲突
命名原则:见名知意
命名规范:
1.尽量使用英文单词或者组合、专业名词
2.尽量不使用拼音
大家命名尽量规范些,形成良好的习惯。
变量值:
变量值:
数据类型的表现形式
变量的类型是由变量的值决定的。(用多少给多少,减少空间的浪费)
系统会为不同的类型分配不同的大小来存储数据。
如果是布尔类就分配一个字节大小来存储。
如果是数字和字符串,那么根据它的大小和长度来分配字节数来存储
Js是弱类型语言,所有的类型都用var声明。
Js是动态类型语言,变量的值会根据值的变化而变化,不会出错。
变量就是一个内存单元。
js语言特点:
更加高级,体现在能够根据数值自动识别数据类型
不太严谨
变量不用声明就可以使用。
使用严谨的格式就必须先定义变量才能使用变量
js也是面向对象使用的
总之,一切事物皆对象。为什么有对象?
和为什么有变量一样,生活中处处有对象。
如何使用对象里面的属性?
使用对象名+.+对象属性名。
对象名.对象属性名
注意:name这个名字是特殊的,使用name来给变量起名字时,不会报错