一,JavaScript的简介
1. 什么是JavaScript?是基于对象和事件驱动的语言,应用于客户端
2.JavaScript的特点(3个)基于对象:
· java是面向对象,使用对象需要创建
· js里面提供好了一些对象,直接使用
事件驱动:每次滑动鼠标,变换一张图片
客户端:指的是浏览器
(1)交互性
(2)安全性:JavaScript不能访问本地硬盘
(3)跨平台性:
在java里面跨平台,通过虚拟机实现的
JavaScript跨平台,只要在系统里面安装了支持JavaScript的浏览器,就可以运行JavaScript
3. java和JavaScript的区别
(1)java是由sun公司,现在是oracle;JavaScript是网景公司
(2)java面向对象的语言,js是基于对象的语言
(3)java跨平台依靠虚拟机实现,JavaScript只要浏览器就可以运行
(4)JavaScript是弱类型语言,java是强类型语言
比如:在java中定义int x ="10";就是错误的
(5)java运行先编译通过虚拟机运行,JavaScript直接使用浏览器运行
4. JavaScript由3部分组成
ECMAScript:由ECMAScript组织制定语句,语法
BOM: broswer object model:浏览器对象模型
DOM: document object model:文档对象模型
二,js和html的结合方式
有2种结合方式:
第一种:使用html中的标签<script type="text/javascript">js代码</script>
第二种:使用html的标签,引入外部的.js文件<script type="text/javascript"></script>
三,js的变量声明和数据类型不能在标签内结束;不要在标签内写内容,不会被执行到
.js文件有2种注释:java的单行注释和多行注释
1. 在js中声明变量都是使用关键字var
2. js的原始类型:
(1)在java里面有基本数据类型:8个
(2)在js有原始类型:5个
string类型:var str = "str";
number数字类型:var a = 10;
boolean布尔类型(true false):var c = true;
null(特殊的引用类型,表示对象引用为空):var date = null;
undefined(表示定义了一个变量,但是没有赋值):var a;
(3)typeof(变量名称):查看当前变量的类型
四,js的引用类型和类型转换
· 引用对象:
object 对象:所有对象都是由这个对象继承而来
Boolean 对象: Boolean原始类型的引用类型
Number 对象:Number原始类型的引用类型
· 类型转换
转换成字符串
转换成数字: parseInt() 和 parseFloat()
强制类型转换:
Boolean(value) - 把给定的值转换成Boolean型
Number(value) - 把给定的值转换成数字(可以是整数或者浮点型)
String(value) - 把给定的值转换成字符串
五,js的语句
· 在java中使用的switch语句、if语句、for语句、while语句、do while语句在js中都一样使用。需要注意的是,在js中所有的变量定义都是var
· java里面的switch语句,在JDK1.7之后,数据类型支持string类型
六,代码练习:向页面输出99乘法表
1. document.write可以直接向页面输出html代码
2. html中的属性和属性值之间可以使用双引号,也可以使用单引号
3. 代码:
document.write("<table border='1' bordercolor='blue'>");
//循环9行
for(var i=1;i<=9;i++) {
<span style="white-space:pre"> </span>document.write("<tr>");
<span style="white-space:pre"> </span>//循环每行的部分
<span style="white-space:pre"> </span>for(var j=1;j<=i;j++) {
<span style="white-space:pre"> </span>document.write("<td>");
<span style="white-space:pre"> </span>//向页面输出内容
<span style="white-space:pre"> </span>document.write(j+"*"+i+"="+i*j);
<span style="white-space:pre"> </span>document.write("</td>");
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>document.write("</tr>");
}
document.write("</table>");
七,js的运算符--和java基本一致
1. 算术运算符
+ - * / ......
2. 赋值运算符
+=的含义:x+=y相当于 x=x+y
3. 比较运算符
4. 逻辑运算符
5.和java中不一样的内容:
(1)在js里面不区分整数和小数,所以:var a = 123/1000*1000;结果在java里面是0,在js中是123
(2)字符串的相加和相减操作:如果是字符串和数字相加则是拼接操作,如果是相减则是真正的相减操作,如果不是数字则提示NaN
var a = "12";
document.write(a+1);//输出121
document.write(a-1);//输出11
var b = "a";
document.write(b-1);//输出NaN
(3)在js中boolean类型也可以参与运算,true代表1,false代表0
(4)==和===是有区别的:==比较的是值,===比较的是值和类型
var a = 10;
if(a=="10") {
<span style="white-space:pre"> </span>document.write("== yes");//输出
}
if(a==="10"){
<span style="white-space:pre"> </span>document.write("== = yes");//不输出
}
· 什么是数组?定义一个变量只能存储一个值,想要存多个值,可以使用数组进行存储
· js里面定义数组的方式:
1. var arr = [];
2. var arr=["a",1,2,true];//可以存储任意类型
3. var arr = new Array(3);//数组长度为3
4. var arr = new Array(3,4,5);//往数组里面存了3个元素
· 查看数组的长度:length
· 获取数组里面的值:
for(var i=0;i<arr.length; i++) {
<span style="white-space:pre"> </span>var a = arr[i];
<span style="white-space:pre"> </span>document.write(a);
<span style="white-space:pre"> </span>document.write("<br/>");
}
· 数组的长度:在js中数组的长度是可变的
· 数组的长度是最大的下标+1,之间如果没有赋值直接默认是空字符串
九,js的string对象
1. 字符串数组:创建字符串var a = "abc"; var b = new String("bb");
2. 属性length获取字符串的长度
3. 方法:
第一类:与html相关的方法(设置字符串的样式的方法)
= bold() 使用粗体显示字符串。
** document.write(a.bold());
= fontcolor() 使用指定的颜色来显示字符串。
** document.write(a.fontcolor("red"));
= fontsize() 使用指定的尺寸来显示字符串。
** document.write(a.fontsize(7));
= link() 将字符串显示为链接
** document.write(a.link("04-练习99乘法表.html"));
第二类:与java相似的方法(在java里面也有类似的方法)
= charAt() 返回在指定位置的字符。 如果位置不存在字符,返回空字符串""
** var str = "abcdefg";
document.write(str.charAt(1));
= concat() 连接字符串
** document.write(str.concat(str1));
= indexOf() 检索字符串,得到检索的字符的位置,如果没有找到返回-1
** var str2 = "ABCD";
document.write(str2.indexOf("R"));
= split() 把字符串分割为字符串数组
** var str3 = "a-b-c";
var arr = str3.split("-");
document.write("length: "+arr.length);
= substr() 从起始索引号提取字符串中指定数目的字符。
= substring() 提取字符串中两个指定的索引号之间的字符
** var str4 = "MARYJACKLUCY";
document.write(str4.substr(2,3));
//RYJ, 第一个参数表示从哪个位置开始,第二个参数表示向后取几个位置的值
document.write("<br/>");
document.write(str4.substring(2,3));
//R ,第一个参数表示从哪个位置开始,第二个参数到哪个位置结束(不包含这个位置) [2,3)
十,js的Array对象
1. 创建数组
2. 属性 length设置或返回数组中元素的数目
3. 方法
= concat():连接数组
** var arr2 = [6,7,8];
document.write(arr1.concat(arr2));
= join():把数组根据指定字符进行分割
** var arr3 = new Array(3);
arr3[0] = "mary";
arr3[1] = "jack";
arr3[2] = "lucy";
document.write(arr3);
document.write("<br/>");
document.write(arr3.join("-"));
= pop() 删除并返回数组的最后一个元素
** var arr4 = ["aa","bb","cc"];
//输出数组的原始的值
document.write("old: "+arr4);
//输出执行pop方法之后的返回值
document.write("<br/>");
document.write("return: "+arr4.pop());
//输出执行pop方法之后新的数组内容
document.write("<br/>");
document.write("new: "+arr4);
= push() 向数组的末尾添加元素,并返回新的长度
** var arr5 = ["zhangsan","lisi","wangwu"];
//输出数组的原始的值
document.write("old: "+arr5)
document.write("<br/>");
//输出执行push()方法之后的返回值
document.write("return: "+arr5.push("lucy"));
//输出执行push()方法之后新的数组内容
document.write("<br/>");
document.write("new: "+arr5);
** 向数组里面使用push方法添加一个数组
document.write("<hr/>");
var arr6 = ["AAA","BBB"];
var arr7 = ["CCC","DDD"];
//输出数组arr6的原始的值
document.write("old: "+arr6)
//输出执行push()方法之后的返回值
document.write("<br/>");
document.write("return: "+arr6.push(arr7));
//输出执行push()方法之后新的数组内容
document.write("<br/>");
document.write("new: "+arr6);
//遍历数组
for(var i=0;i<arr6.length;i++) {
alert(arr6[i]);
}
= reverse() 颠倒数组中元素的顺序
** var arr8 = ["zhaoliu","wanger","niuqi"];
document.write(arr8);
document.write("<br/>");
document.write(arr8.reverse());
1. 进行数学运算,在Math对象里面的方法,直接使用Math.方法名进行调用
2. 方法
= ceil(x) 对一个数进行上舍入。
= floor(x) 对一个数进行下舍入。
= round(x) 把一个数四舍五入为最接近的整数
= random() 返回 0 ~ 1 之间的随机数
** 代码
var a = 10.2;
//ceil(x) 对一个数进行上舍入。
document.write(Math.ceil(a)); //11
document.write("<hr/>");
//floor(x) 对一个数进行下舍入。
document.write(Math.floor(a));
document.write("<hr/>");
//round(x) 把一个数四舍五入为最接近的整数
document.write(Math.round(a));
document.write("<hr/>");
//random() 返回 0 ~ 1 之间的随机数
document.write(Math.random());
//生成0-9之间的随机数 0.0 -- 0.9之间的值
document.write("<hr/>");
document.write(Math.floor(Math.random()*10));
十二,js的Date对象
1. 进行日期操作的对象
2. 使用Date对象: new Date()
3. 方法:
= toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
** //得到当前的时间
var date = new Date();
document.write(date.toLocaleString());
= 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份
** document.write(date.getFullYear());
= 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
** document.write(date.getMonth()+1);
= 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
** 如果当前的星期是星期日,返回的是0
** document.write(date.getDay())
= 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
= 得到当前的小时 getHours()
= 得到当前的分 getMinutes()
= 得到当前的秒 getSeconds()
** document.write(date.getHours());
document.write("<br/>");
document.write(date.getMinutes());
document.write("<br/>");
document.write(date.getSeconds());
= 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数
十三,js的RegRxp对象
1. RegRxp对象表示正则表达式
2. 正则表达式:规定字符串出现的规范
3. 使用: new RegExp("正则表达")
4. 方法:
test() 检索字符串中指定的值,如果存在则返回true,如果不存在匹配的字符返回false
5. 代码:
//创建正则表达式对象
var reg = new RegExp("[a]");
//创建一个字符串
var name = "lisi";
//使用正则对象匹配字符串
var flag = reg.test(name);
document.write(flag);
十四,js的bom对象
1. script标签放置位置
· 建议方法到</body>后面,html的解析是从上到下解析的,如果在head里面就获取不到输入项里面的值,因为还没解析到输入项,所以肯定得不到值
2. 什么是bom:浏览器对象模型
navigator:浏览器的信息
screen:屏幕信息
history:访问地址的历史信息
location:设置url,href设置或者返回完整的URL
window对象:是窗口对象,是顶层对象
· 方法:
setInterval("执行的js代码",毫秒数) 在指定的时间内,重复执行js代码
** 有两个参数
*** 第一个参数要执行的js代码(js的方法),第二个参数是时间(毫秒数)
** 代码
setInterval("alert('setinterval');",3000);
setTimeout("执行的js代码",毫秒数) 在指定的时间之后,执行js代码,执行一次
** 有两个参数
*** 第一个参数要执行js代码(js的方法),第二个参数是时间(毫秒数)
** 代码
setTimeout("alert('settimeout');",3000);
clearInterval(id) 取消由 setInterval() 设置的 timeout。
clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。
十五,js的全局变量和局部变量
1. 全局变量:在js里面,如果在一个script标签里面定义变量,在页面中其他script标签里面都可以使用
2. 局部变量:在js方法里面定义一个变量,这个变量只能在方法里面使用
3. 浏览器的调试工具:F12
十六,js的全局函数
1. 不属于任何对象,可以直接使用
2,主要的函数方法:
eval(): 把字符串当成js代码执行
** var str = "alert('123456');";
//alert(str);
eval(str);
isNaN() 检查某个值是否是数字
** 如果是数字返回 false,如果不是一个数字返回 true。
parseInt() 解析一个字符串并返回一个整数
** var str1 = "123";
alert(parseInt(str1)+1);
encodeURI() 把字符串编码为 URI
** var str2 = "abc测试中文";
var encodestr2 = encodeURI(str2);
document.write(str2);
document.write("<br/>");
document.write(encodestr2);
decodeURI() 解码某个编码的 URI
** var decodestr2 = decodeURI(encodestr2);