基础—javascript"/>
web基础—javascript
目录
1. JavaScript概述
1.1 html与JavaScript：
2. JavaScript变量
3. JavaScript数据类型
3.1.JavaScript 字符串
3.2.JavaScript Number类型
3.3.JavaScript 布尔类型
3.4 JavaScript 数组 （python中相当于list列表）
3.5.JavaScript 对象
3.6.Undefined类型
3.7.Null类型
4. 流程控制编程（类似Java语言）
4.1 循环控制语句
4.1.1.do...while语句
4.1.2. while语句
4.1.3. for语句
4.1.4. for...in语句
5. JavaScript函数
6. js对象,数组,BOM和DOM
6.1 JavaScript数组
6.1.1 创建数组
6.1.2 获取，修改，增加数组
7. JavaScript对象
7.1.使用new运算符创建Object
7.2.new关键字可以省略
7.3.使用字面量方式创建Object
7.4.使用字面量及传统复制方式
7.5.两种属性输出方式
7.6.给对象创建方法
7.7.使用delete删除对象属性
8.JavaScript BOM
8.1.警告框
8.2.确认框
8.3 在 JavaScript 中使用计时事件
两个关键方法是:
9. JavaScript DOM
10.JS事件：
10.1 js脚本：
10.2 调用js脚本：
10.3 js事件处理表：
10.3.1 键盘事件：
11. javascript 尺寸样式操作：
1. JavaScript概述
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
JavaScript脚本语言具有以下特点:
(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
1.1 html与JavaScript：
1.HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2.如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
3.<script> 和 </script> 之间的代码行包含了 JavaScript:
<script>
alert("我的第一个 JavaScript");
</script>完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个js</title>
</head>
<body></body>
<script>alert("我的第一个 JavaScript")
</script>
</html>运行：
4.JavaScript 会在页面加载时向 HTML 的 <body> 写文本
5.注释ECMAScript使用C风格的注释，包括单行注释和块级注释。
// 单行注释
/*
* 这是一个多行
* 注释
*/
效果如下：（在浏览器中运行以上代码后，JavaScript会利用document.write将标签写入html，如下所示）
将JavaScript写到一个.js文件中，通过调用的方式来使用：
2. JavaScript变量
JavaScript描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束，或者用于执行特定的操作等。关键字也是语言保留的，不能用作标识符。
ECMAScript全部关键字
| break | else | new | var（声明变量） |
| case | finally | return | void |
| catch | for | switch（选择） | while |
| continue | function | this（指针） | with |
| default | if | throw | |
| delete | in | try | |
| do | instanceof | typeof |
ECMAScript定义的全部保留字
| abstract | enum | int | short |
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
变量的声明：
<script>var a = "string1";var num = 1;var num2 = 1.1;var bool = true;alert(a);alert(num);alert(num2);alert(bool);
</script>完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var a = "string1";var num = 1;var num2 = 1.1;var bool = true;alert(a);alert(num);alert(num2);alert(bool);
</script>
</body>
</html>
3. JavaScript数据类型
JavaScript中的数据类型：Undefined(未定义)、Null（空）、Boolean（布尔）、Number（数字类型）、String（字符串）和Object（对象）。
3.1.JavaScript 字符串
字符串是存储字符（比如 "Head teacher"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var carname='Head teacher';
3.2.JavaScript Number类型
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
NaN，即非数值(Not a Number)是一个特殊的值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。
var box = 0 / 0; //NaN
3.3.JavaScript 布尔类型
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
3.4 JavaScript 数组 （python中相当于list列表）
下面的代码创建名为 cars 的数组：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>narry</title>
</head>
<body>
<script>var singer = new Array(); //声明一个数组对象（相当于python的列表）singer.push('坂井泉水'); //向数组中存入数据 push相当于appendsinger.push('小松未步');singer.push('三枝夕夏');singer.push('仓木麻衣');console.log(singer);//类似java的语法for(var i=0;i<singer.length;i++){document.write("<h1>"+singer[i]+"</h1>");}
</script>
</body>
</html>F12下的console
3.5.JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
3.6.Undefined类型
Undefined类型只有一个值，即特殊的undefined。在使用var声明变量，但没有对其初始化时，这个变量的值就是undefined。
<script>var box;alert(box); //alert()相当于python的print()
</script>运行：
3.7.Null类型
Null类型是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，而typeof操作符检测null会返回object。
<script>var zard = null;alert(zard);
</script><script>var zard = null;alert(typeof zard);
</script>4. 流程控制编程（类似Java语言）
4.1 循环控制语句
4.1.1.do...while语句
do...while语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。
<script>var a = 1; //如果是1，执行五次，如果是10，执行1次(因为10大于5，不满足循环条件)do{alert(a);a++;}while (a<=5) //先运行一次，再判断
</script>4.1.2. while语句
while语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。
<script>var a = 1; //如果是1，执行五次，如果是10，不执行while (a<=5){ //先判断，再执行alert(a);a++;}</script>4.1.3. for语句
for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。
<script>
for (var box = 1; box <= 5 ; box++) { //第一步，声明变量var box = 1;alert(box); //第二步，判断box <=5
} //第三步，alert(box)
//第四步，box++
//第五步，从第二步再来，直到判断为false</script>4.1.4. for...in语句
for...in语句是一种精准的迭代语句，可以用来枚举对象的属性。
<script>var box = { //创建一个对象，以字典的形式'name':"坂井泉水", //键值对，左边是属性名，右边是值'age':18,'height':178,};for (var p in box){ //列举出对象的所有属性,语法类比Pythonalert(p);}</script>打印值：
break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。
5. JavaScript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1.函数是完成某一功能的代码段
2.函数是可重复执行的代码段
3.函数方便管理和维护
语法格式：
function 函数名称（[参数]，[ 参数]，[ 参数]）{
代码段
Return 返回值
}
<script>function box(name,age) {alert(name+age);}box("zard",18); //调用函数
</script>
函数名称的规范：
1.函数名称不要包含特殊字符
2.函数名称最好遵循驼峰式的命名方法
3.函数名称严格区分大小写
4.函数名称如果重复会覆盖
5.函数可以有参数也可以没有参数，可以有一个参数也可以有多个参数
6.函数通过return返回值，如果没有默认返回undefined
7.函数不调用不执行
6. js对象,数组,BOM和DOM
6.1 JavaScript数组
6.1.1 创建数组
1.使用new关键字创建数组
var box = new Array(); //创建了一个数组
var box = new Array(10); //创建一个包含10个元素的数组
var box = new Array('孟老师','web','甲骨文'); //创建一个数组并分配好了元素
2.以上三种方法，可以省略new关键字。
var box = Array(); //省略了new关键字
3使用字面量方式创建数组
var box = []; //创建一个空的数组
var box = ['孟老师','web','甲骨文']; //创建包含元素的数组
创建一个稍微复杂一点的数组
var box = [
{ //第一个元素是一个对象
name : '孟老师',
age : 28,
run : function () {
return 'run了';
}
},
['马云','李彦宏',new Object()],//第二个元素是数组
'江苏', //第三个元素是字符串
25+25, //第四个元素是数值
new Array(1,2,3) //第五个元素是数组
];
alert(box);
<script>var box = [{name:"zard",age:18,run:function () {alert('我很喜欢！')return "坂井泉水";}}, ['马云','李彦宏',new Object()], '江苏',25+25, new Array(1,2,3)]alert(box[0].name+box[0].run())
</script>会先调用函数打印“我很喜欢”，再返回alert打印的内容，“zard坂井泉水” 。
6.1.2 获取，修改，增加数组
1.使用索引下标来读取，修改，增加数组
alert(box[2]); //获取第三个元素
box[2] = '学生'; //修改第三个元素
box[4] = '计算机编程'; //增加第五个元素
2.使用length属性获取数组元素量
alert(box.length) //获取元素个数
box.length = 10; //强制元素个数
box[box.length] = 'JS技术'; //通过length给数组增加一个元素
7. JavaScript对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
7.1.使用new运算符创建Object
（类似java语言的实例化对象语言）
var people= new Object(); //new方式
people.name='Head'; //创建属性字段
people.age=18; //创建属性字段
7.2.new关键字可以省略
var people = Object(); //省略了new关键字
people.name='Head';
people.age=18;
7.3.使用字面量方式创建Object
var people = { //字面量方式
name : '曹老师', //创建属性字段
age : 28 //最后一个属性不要加逗号
};
7.4.使用字面量及传统复制方式
var people ={};
people.name='head'; //字面量声明为空对象
people.age=18; //点符号给属性复制
7.5.两种属性输出方式
alert(people.age); //点表示法输出
alert(people ['age']); //中括号表示法输出，注意引号
7.6.给对象创建方法
var people ={
run:function(){
return '跑步中！！！'; //对象中的方法
}
}
alert(people.run()); //调用对象中的方法
7.7.使用delete删除对象属性
在实际开发过程中，一般我们更加喜欢字面量的声明方式。因为它清晰，语法代码少，而且还给人一种封装的感觉。
8.JavaScript BOM
浏览器对象模型 (BOM)浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
8.1.警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert(‘aaa’);
8.2.确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
<script>if(confirm("你喜欢我吗？")){alert('喜欢！');}else{ alert('不喜欢！');}
</script>
8.3 在 JavaScript 中使用计时事件
两个关键方法是:
setInterval() - 间隔指定的毫秒数，不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码。
语法：
window.setInterval("javascript function",milliseconds);
window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function）。
window对象 window.open("",'_self'); //再新窗口打开；再当前窗口基础上打开 不打开新的页面
（Open打开网页）
history
history.go(1) #前进
history.go(-1) #后退
history.go(0) #刷新
9. JavaScript DOM
DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。
DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。
元素节点方法
| 方法 | 说明 |
| getElementById() | 获取特定ID元素的节点 |
| getElementsByTagName() | 获取相同元素的节点列表 |
| getElementsByClassName() | 获取相同class的节点列表 |
| getElementsByName() | 获取相同名称的节点列表 |
| getAttribute() | 获取特定元素节点属性的值 |
| setAttribute() | 设置特定元素节点属性的值 |
| removeAttribute() | 移除特定元素节点属性 |
10.JS事件：
10.1 js脚本：
10.2 调用js脚本：
更正：
10.3 js事件处理表：
onclick方法:
onblur方法：
onchange方法：
双击触发事件：
10.3.1 键盘事件：
11. javascript 尺寸样式操作：
更多推荐
web基础—javascript
发布评论