JS基础
2017-07-25 11:14
996 查看
1.JS基本概念
JS有什么作用
HTML+CSS：实现了静态页面。
计算机语言分为两种：编译型语言：JAVA、C++、C、PHP…
解释型语言：JavaScript、CSS…
HTML：负责呈现的内容。
CSS：负责内容呈现的方式。
JavaScript：负责内容的行为。
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html"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是实现动态页面的，既页面的行为。
innerHTML：修改元素的内容。
<!DOCTYPEhtml>
<html>
<head lang="en">
<metacharset="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>
这个案例是用定时器动态去改变元素的边度，从而实现动态的效果。
JS怎么使用？
两种方式：（1）内部引用，使用<script>标签，代码直接写在标签中。
（2）外部引用，<script src=””></script>
JS是一种解释性语言
计算机语言分为编译型和解释型：
程序员使用高级语言编制程序，但是程序最终是由计算机去执行，但是计算机只能执行机器语言（既二进制代码），那么这个过程就必然有一个从高级语言到机器语言的“翻译”过程。
有两种“翻译”方式：
（1） 编译：将代码整体翻译成机器代码，如果有错误则停止翻译，全部成功翻译才能执行。
（2） 解释：将代码翻译一条马上执行一条，如果遇到错误则停止。
两种引用方式
JS书写在<Script>里-----内部引用
用<script src=””>-----外部引用
2.数据类型
计算机程序就是去处理现实中各种数据。
数据的几个属性：名称、值、类型。
字符串--String、数值--number、true,false---boolean
alert() 警告提示框
typeof() 数据的类型
为什么要有数据类型？
生活中是存在不同的数据类型的，计算机要解决生活问题，那么他就和生活中的数据类型产生了映射，所以有了数据类型。
3.变量
为什么要有变量？
因为生活中一些数据不是一成不变的，他的值会改变，所以Js里面有了变量和它相对应。
变量：
var name ="张三";
Var:variable 的缩写变量的意思；声明一个变量。
name 变量名；
命名的规则：
（1） 关键字不可用；
（2） 一般情况下，只能用英文开头，也可以是$和_（不建议使用）；
也不能用数字开头。因为8进制和16进制会产生冲突。
数值类型的表示方式：
十进制：23,3.14；
八进制：023；（19）
十六进制：023（35）；
科学计数法：3e2（3×10的二次方），3.5e-2（3.5×10的负二次方）；
命名的原则：见名思意
规范：（1）尽量使用英文单词或者组合，或者专业名词。
（2）尽量不要使用拼音。
变量的值：变量的类型是由变量的值来决定的。
系统会为不同的类型分配不同的大小来存储数据，如果是布尔类型就分配一个字节的大小来存储；如果是数字和字符串，那么根据他的大小和长度来分配字节数来存储。
JS是弱类型语言，所有的类型的变量都用var来声明。
JS是动态类型的语言，变量的类型会根据值得变化而变化，不会出错。
变量就是一个内存单元；
var weight = 65;
weight = weight - 5;
用本质来解释 weight = weight – 5;
把名字为weight的内存单元中的值65拿出来，之后和5做减法运算，然后把得到的结果再放回到名字为weight的内存单元中。
JS语言特点：
更加高级，不严谨。
变量不声明就可以用。
使用严谨的格式，就必须先定义变量才能使用变量。
"use strict"
weight = "哈哈哈";
alert(weight);
Name这个名字是特殊的，使用name给变量起名字时，它不会报错。
4.对象类型
定义一个对象：
对象在js当中对应的是object。
var dog ={name:"哈哈",type:"哈士奇",color:"黑白",
sex:"雄",age:"3",marry:"false"};
使用new object()定义一个对象类型的变量：
var dog = newObject();
dog.name = "哈哈";
dog.age = 3;
dog.marry = false;
alert(typeof (dog));
alert(typeof (dog.name));
alert(typeof (dog.age));
alert(typeof (dog.marry));
为什么有对象？
和为什么有数据类型一样。就是生活中处处都是对象，所以js中有这种对象类型。
如何使用对象里面的属性？
使用对象名+.+对象名属性：
alert(typeof(dog));
alert(typeof (dog.name));
alert(typeof (dog.age));
alert(typeof (dog.marry));
JS有什么作用
HTML+CSS：实现了静态页面。
计算机语言分为两种：编译型语言：JAVA、C++、C、PHP…
解释型语言：JavaScript、CSS…
HTML：负责呈现的内容。
CSS：负责内容呈现的方式。
JavaScript：负责内容的行为。
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html"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是实现动态页面的，既页面的行为。
innerHTML：修改元素的内容。
<!DOCTYPEhtml>
<html>
<head lang="en">
<metacharset="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>
这个案例是用定时器动态去改变元素的边度，从而实现动态的效果。
JS怎么使用？
两种方式：（1）内部引用，使用<script>标签，代码直接写在标签中。
（2）外部引用，<script src=””></script>
JS是一种解释性语言
计算机语言分为编译型和解释型：
程序员使用高级语言编制程序，但是程序最终是由计算机去执行，但是计算机只能执行机器语言（既二进制代码），那么这个过程就必然有一个从高级语言到机器语言的“翻译”过程。
有两种“翻译”方式：
（1） 编译：将代码整体翻译成机器代码，如果有错误则停止翻译，全部成功翻译才能执行。
（2） 解释：将代码翻译一条马上执行一条，如果遇到错误则停止。
两种引用方式
JS书写在<Script>里-----内部引用
用<script src=””>-----外部引用
2.数据类型
计算机程序就是去处理现实中各种数据。
数据的几个属性：名称、值、类型。
字符串--String、数值--number、true,false---boolean
alert() 警告提示框
typeof() 数据的类型
为什么要有数据类型？
生活中是存在不同的数据类型的，计算机要解决生活问题，那么他就和生活中的数据类型产生了映射，所以有了数据类型。
3.变量
为什么要有变量？
因为生活中一些数据不是一成不变的，他的值会改变，所以Js里面有了变量和它相对应。
变量：
var name ="张三";
Var:variable 的缩写变量的意思；声明一个变量。
name 变量名；
命名的规则：
（1） 关键字不可用；
（2） 一般情况下，只能用英文开头，也可以是$和_（不建议使用）；
也不能用数字开头。因为8进制和16进制会产生冲突。
数值类型的表示方式：
十进制：23,3.14；
八进制：023；（19）
十六进制：023（35）；
科学计数法：3e2（3×10的二次方），3.5e-2（3.5×10的负二次方）；
命名的原则：见名思意
规范：（1）尽量使用英文单词或者组合，或者专业名词。
（2）尽量不要使用拼音。
变量的值：变量的类型是由变量的值来决定的。
系统会为不同的类型分配不同的大小来存储数据，如果是布尔类型就分配一个字节的大小来存储；如果是数字和字符串，那么根据他的大小和长度来分配字节数来存储。
JS是弱类型语言，所有的类型的变量都用var来声明。
JS是动态类型的语言，变量的类型会根据值得变化而变化，不会出错。
变量就是一个内存单元；
var weight = 65;
weight = weight - 5;
用本质来解释 weight = weight – 5;
把名字为weight的内存单元中的值65拿出来，之后和5做减法运算，然后把得到的结果再放回到名字为weight的内存单元中。
JS语言特点：
更加高级，不严谨。
变量不声明就可以用。
使用严谨的格式，就必须先定义变量才能使用变量。
"use strict"
weight = "哈哈哈";
alert(weight);
Name这个名字是特殊的，使用name给变量起名字时，它不会报错。
4.对象类型
定义一个对象：
对象在js当中对应的是object。
var dog ={name:"哈哈",type:"哈士奇",color:"黑白",
sex:"雄",age:"3",marry:"false"};
使用new object()定义一个对象类型的变量：
var dog = newObject();
dog.name = "哈哈";
dog.age = 3;
dog.marry = false;
alert(typeof (dog));
alert(typeof (dog.name));
alert(typeof (dog.age));
alert(typeof (dog.marry));
为什么有对象？
和为什么有数据类型一样。就是生活中处处都是对象，所以js中有这种对象类型。
如何使用对象里面的属性？
使用对象名+.+对象名属性：
alert(typeof(dog));
alert(typeof (dog.name));
alert(typeof (dog.age));
alert(typeof (dog.marry));
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS基础知识
- js 基础
- js基础之DOM中document对象的常用属性方法
- socket基础知识及js中的Web Sockets
- js数组基础API学习
- echarts.js的基础
- 【前端】主流API-promise解析，js基础。
- js基础-input对象，select对象，实例：二级联动菜单
- JavaScript就这么回事 (JS基础知识整理)
- 16 JS基础之--函数高级之递归和闭包
- SVG.js 基础图形绘制整理（二）
- JavaScript就这么回事 (JS基础知识整理)
- JS基础二
- 基础JS选项卡
- Node.js基础学习之常见API理解
- 4.18 图片切换【js基础应用】
- Angular.js基础学习之初始化
- EA&UML日拱一卒-0基础学习微信小程序(9)-C++程序员眼中的app.js
- js基础练习---简单划过显示事件