上一篇:JavaWeb学习总结02–CSS
下一篇:JavaWeb学习总结04–JS(2)
JavaScript
JavaScript概念:一门基于浏览器运行的客户端脚本语言,每一个浏览器都有JavaScript的解析引擎,因此我们无须编译即可在浏览器中运行。Javascript可以来增强用户和html页面的交互过程,它可以直接嵌入到网页中或者单独创建一个拓展名为js的文本文件编写JavaScript函数,进而控制html元素,让页面有一定的动态效果,增强用户的体验。
JavaScript的发展史:
1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase
2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
3. 1996年,微软抄袭JavaScript开发出JScript语言
4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。
* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
* ECMAScript:客户端脚本语言的标准
JavaScript语法基础
JavaScript的语法相对比较简单,其语法包括数据类型、变量常量、运算符和表达式、控制语言、函数和事件等。
1. JavaScript与html结合方式
JavaScript程序本身不能独立存在,它依附于html页面,在浏览器端运行。同时,在html页面中,JavaScript作为一种脚本语言可以放置在任何位置。(其定义的位置会影响执行顺序)
- 定义到head部分: 在页面载入时,同时就会载入JavaScript代码,调用时就不再需要载入代码了,提高了执行速度。通常在head部分写事件处理相关的函数或全局变量的声明。
- 定义到body部分: 放入到body部分的JavaScript代码一般是,需要页面载入时同时执行的代码,这些代码执行后会输出成为页面的内容,在浏览器中可以及时看到。
- 直接位于事件处理的代码中: 一些简单的脚本语言可以直接放在事件处理的代码中。
- 引入脚本文件: 在编程过程中,我们有时会处理大量JavaScript代码,这是我们可以将代码放在一个单独的文本文件中,以".js"命名,当需要代码时再引用。
2. 注释:单行注释://注释内容
、多行注释:/*注释内容*/
3. 数据类型
Java语言是强类型语言,而JavaScript是弱类型语言
。强类型在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据。而弱类型,在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。因此JavaScript对数据类型没有严格的要求。
- 原始数据类型(基本数据类型):
1. number:数字, 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string:字符串, 字符串 “abc” “a” ‘abc’
3. boolean: true和false
4. null:一个对象为空的占位符
5. undefined:未定义,如果一个变量没有给初始化值,则会被默认赋值为undefined - 引用数据类型:对象
变量:
变量:一小块存储数据的内存空间
变量的使用语法:var 变量名 = 初始化值;
注意:在JavaScript中变量也可以不用声明直接使用。
4. 运算符
JavaScript提供了算术运算符、赋值运算符、逻辑运算符和条件运算符。
* 一元运算符:只有一个运算数的运算符
++ --: 自增(自减)
+(-):正负号
在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
其他类型转换为number类型:
* string转换为number:按照字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)
* boolean转换为number:true转为1,false转为0
* 算数运算符:+ - * / % ...
* 赋值运算符:= += -+....
* 比较运算符:> < >= <= == ===(全等于)
比较方式:
1. 类型相同:直接比较
* 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
2. 类型不同:先进行类型转换,再比较
* ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
* 逻辑运算符:&& || !
其他类型转boolean:
1. number:0或NaN为假,其他为真
2. string:除了空字符串(""),其他都是true
3. null&undefined:都是false
4. 对象:所有对象都为true
* 三元运算符:? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
语法:表达式? 值1:值2; //判断表达式的值,如果是true则取值1,如果是false则取值2;
* 流程控制语句:
1. if...else...
2. switch:
* 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
* JS特殊语法:
1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字,也可以不使用
* 用: 定义的变量是局部变量
* 不用:定义的变量是全局变量(不建议)
练习九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1.完成基本的for循环嵌套,展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//输出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write("</td>");
}
document.write("</tr>");
}
//2.完成表格嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>