一、Javascript概述(知道)
a.一种基于对象和事件驱动的脚本语言
b.作用： 给页面添加动态效果
c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.
d.特点：
1). 弱势语言
2). 由浏览器直接解析执行。（函数不能直接执行）
3). 是一个解释性语言
4). 交互性（它可以做的就是信息的动态交互）
5). 安全性（不允许直接访问本地硬盘）
6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关
e . javascript和java的一些区别：
1). javascript是一个解释性语言,java是编译解释性语言
2). javascript是一个弱势语言，Java是一个强势语言
3). 在页面上引入的方式不同javascript代表用<script>引入，Java代码<%>
4). JS是基于对象，Java是面向对象。
二、JavaScript语言组成(了解)
EcMAScript + BOM + DOM
ECMAScript: 规定了一些语法，变量，for循环等等结构
BOM: Browser object Model 浏览器对象模型 window 对象==java中的object
DOM: Document object Model 文档对象模型 树模型,所有的东西都是节点(文本节点,属性节点标签节点),不是父子就是兄弟
除了html,它没有父亲,却有俩个孩子,head 和body,
三、JavaScript与Html的结合方式(必须掌握)--浏览器解析一般是从上到下解析,一般放在最后,我个人认为
Javascript与HTML的结合方式有三种：
1.采用事件来调用，代码写在字符串中
<button onclick = "alert('大家好')">点击</button>
<p onclick="alert('nihao')">大家好!</p> 点击p上的文字弹出对话框
2.采用定义函数的方式: 用function来定义函数 ,函数不能直接执行,必须被调用
function fun(){ alert('你好')} ;
3.采用外部js文件.
利用<script src = "a.js"></script>引入,文件名字随意,可以把js改成a.abvfdf;照样可以执行
2.2
<body>
<p onclick="alert('nihao')" id="pid">大家好!</p>
</body>
<script>
var pid =document.getElementById("pid");
alert(pid.onclick);//弹出的是 funciton onclick(event){alert('nihao')}
</script>
四、JavaScript基本语法(掌握)
变量本身没有类型
* 定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
* 基本数据类型： undifined,表示未定义类型。
Number类型。代表了一切数字类型
String类型。字符串类型
Boolean类型。布尔类型
Function类型。函数类型
Null类型。
* 基本数据类型： object ：对象类型.
* 判断变量的类型 :
1. 采用typeof函数判断 :typeof(a) == "string" 类似toString(),打印所有类型的小写;
2. 采用instanceof运算符： a instanceof String 判断变量是否由new出来的
var a; undefined 没有给变量赋值的时候
a=10; numberic
a="abc" String
a=function(){alert("aaadfd")} Function
a=null; Null
a=10;
a instanceof Number;//false typeof(a)=="number" //true; == 后面是小写的变量
a= new Number(10); //true; 因为是new出来的所以true typeof(a)=="number" //false
与java不一样的语法:
var a =10; 或 a=10; var 可写可不写
js的运算符
input标签中的value的值就是标签中出现的内容,也是传给服务器的值
文本框变长:size:50; 50个字符
readonly只读:光标可以点进文本框,但是update不了
disable:光标不可以点进文本框
type:hidden 隐藏框,目的给程序员往服务器发送数据用!不能看不能写
type:radio 单选框必须要给name属性,因为浏览器默认给name相同的作为一组,默认选中checked
* 三大结构
a.顺序结构
b.选择结构
c.循环结构 for,while,do...while
* 运算符
1.一元运算符 +(正号) - ++ --
2.二元运算符 +(加法) - * / %
3.三元运算符 ？ ：
4.等号 == 判断的是内容,
=== 全等于 ,判断类型和内容
* 类型的转换
1. Number转String : 3 + ""
2. Number转Boolean ：牢记：在javascript中，类似C语言，非0为真，0为假，数字0为假，但字符串“0”为真，
如果变量为null或者undefined或者NaN，也为假. 在java中，字符串转换不了boolean
3. String转Number:
var a ='10';
1.a. parseInt,parseFloat
2. 乘以1即可(推荐) a=a*1; alert(typeof(a))
4.案例
age:<input type="text" id="age" name="">
<input type="button" value="alertage" onclick="fun()">
function fun(){
var txt = document.getElementById("age").value;//value不能忘了
if(txt==100){//双等于不能忘了,双等可以直接等于number或string
alert("age等于100")
}else{
alert("age不等于100")
}
}
五、JavaScript 函数的定义（掌握） //js 中函数的调用 直接写函数名即可,java通过对象调用
* 函数的定义有三种方式：
1.采用function关键字来定义 funciton fun(){alert("hellojs")}; fun();
2.采用匿名的方式来定义 var a = funciton (){alert("hellojs")}; a(); 函数赋值给变量
3.采用new Function()的方式(了解,不推荐)
var b = new Function("X","Y","Z","alert(X+Y+Z)");//最后一个是函数体,其他是形参
b(1,2,3,4,5);//1+2+3=6;多个参数支取前面三个
b(1,2);//NaN
* 函数的调用：
1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合
2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。
function fun1(){alert("1")};
function fun1(x){alert("2")};
function fun1(x,y){alert("3")};
fun1() fun1(1) fun1(2,3) fun1(2,4,5)//统统调用的是最后一个弹窗是3
*** 推荐： 定义函数的千万不要重名。同名就要闭包
函数劫持： document 网页对象 alert 是window对象
改变js函数预定义的功能.
window.alert=funciton(x){document.write(x)}
alert("abc");
结果是,弹框没有了,变成了在网页中打印了abc,为什么?
alert("abc");变成了调用上面的方法,而上面的方法就是在页面中输出数据
六、JavaScript 全局函数(掌握)
全局函数：
1.isNaN (掌握)：用来判断变量是否是数字类型的字符串
NaN: not a Number ,不是数字,是一个函数
var a ="100";//内容是数字
if(isNaN(a)) alert("a不是数字");//判断的是内容是不是数字
else alert("a是数字");//打印此行
2.parseInt,parseFloat
3.eval(掌握):
a:主要执行字符串,把结果转换成数字
alert("3+10");//3+10
alert("3"+"2");//32
alert(eval("3+10"));//13
alert(eval("3+10")+eval("2"));//15
b:将json格式的字符串转换成json, json本质就是一个map
{"a":"china","b":"us"} --for each通过key拿value
4.escape(): 编码,中文往服务器端传数据,网络传递数据时
var b ="中国";
var c =escape(b);//c=%u4E2D%u56FD
alert(c);
alert(unescape(c))//中国
5.unescape(): 解码
6.encodeURI(): 对网址（URL）进行编码
7.decodeURI(): 对网址（URL）进行解码
var e ="http://www.sohu.com?a=中国&b=美国";
var f = encodeURI(e);//
alert(f);
alert(decodeURI(f))//http://www.sohu.com?a=中国&b=美国
七、JavaScript常用对象介绍（掌握）
* Array对象 数组对象，进行数组操作
定义方式
1.采用new Array()的方式
var arr = new Array();初始长度为0;
var arr1 = new Array(10);初始长度为10;Z只写一个是定义长度,多个是初始化
初始化:
arr1[0]=1; arr1[1]=10;//如果alert[5];undefined,没有限定类型,java中0 0.0 false等有默认值
var arr2 = new Array(1,2,3,4,5,);//java需要在后面加{}来初始化
2.采用中括号[]来定义(推荐使用)
数组的长度可以随时改变
var arr3=[];//定义了一个空数组
var arr3=[3,"33",flase,"abc",4,8];//定义一个数组且初始化,不推荐放不同类型
3.如何改变数组的长度
var arr4 =[1,2,3,4,5];
增加长度到100;
第一种: arr4[99]=123; 数组的长度变成100;
第二种: arr4.length=100; 其他所有的未定义类型都是undefined
缩减数组长度到2;
arr4.length=2;
此刻 arr4[3],//undefined
4.数组引用方式 用下标或
var arr5 = ["china","usa","小日本"];
arr5["china"]=["北京","上海","天津"];
alert(arr5["china"][0]);//模拟二维数组, 打印出 北京
5.数组的类型
alert(typeof(arr5));//object
特点：
1.javascript中数组的大小可以随时改变,如同java中的集合(如List)
2.javascript中数组的下标可以是任意对象。
方法： 数组对象预定义好的方法
1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
var arr=["北京","上海","天津"];
alert(arr.join());//北京,上海,天津 默认是逗号隔开
alert(arr.join(""));//北京上海天津
2.push() : 向数组的末尾添加一个元素
arr.push("韩国");//4
alert(arr.join("*"));//北京*上海*天津*韩国
4.reverse() :反转
var arr=["北京","上海","天津"];
alert(arr.reverse());//天津,上海,北京
3.shift() : 删除并返回数组的第一个元素
var arr=["北京","上海","天津"];
alert(arr.shift());//北京
alert(arr);//上海,天津
4.sort() ; 排序 .默认同类型的数据相比较.
默认将能转换成number类型的字符串和number类型放在一起比较
先转换成toString,转换不成的作为一组来比较
var arr1=[3,8,"23","34",123];
alert(arr1.sort());//123 23 3 34 8 不符合要求
改写:给sort方法添加一个形参比较器
arr1.sort(funciton(a,b){
if(a*1>b*1){ //将字符串转换成number类型
return 1;//降序 从大到小
}else {
return -1;//升序 从小到大
}
});
案列:标题栏跑马灯特效
<body onload="init()">//初始化
<script>
function init(){
//1.获取标题栏的内容
var title = document.title;
//2.将字符串转换成对应的数组
var arr = title.split("");//以空字符串分割
// 3.将数组的第一个字符拿到并删除
var first = arr.shift();
//4.将一个字符放置到数组的末尾
arr.push(first);
title=arr.join("");//将数据组合成一个字符串
//5.把新的字符串设置成新的标题
document.title=title;
//6.定时重复上面步骤
setTimeout("init()",200);//每隔0.2s执行init(),即重复上面5个步骤;
}
</script>
</body>
* String对象 ----- 字符串类型的引用类型
String对象：
1.方式： substr: 截取字符串 两个参数第一个是下标，第二个是长度
substring: 截取字符串 两个参数第一个是下标，第二个是下标
toUppercase:
toLowercase:
indexOf:
charAt() :
replace():
anchor();创建html的锚点
substr(index,length);//截取字符串
substring(index,index);//截取字符串 两个下标
1.1案例:让p标签的内容变大 注意:innerHTML只能用于有开始和结束标签的标签对象,如input img等拿不到数据
function changeBig() {
var p = document.getElementById("p");//拿到p标签的对象
var txt = p.innerHTML;//拿到p标签对象的主体内容html代码,即 大 这个字符串
//txt=txt.big();居然变大不了!!!
p.innerHTML=txt.big();//改变字符串的内容再赋值到p标签的主体内容上
}
</script>
<p id="p">大</p>
<input id="btn" type="button" value="变大" name="" onclick="changeBig()">
2.
innerHTML与innerText的区别?
<h1 id="h1"><font>你好</font></h1>
innerHTML:<font>你好</font>
innerText:你好
2.1案例 给字体自动变换颜色
<script>
function changeColor() {
var arr=["red","green","blue","yellow","black"];
var p = document.getElementById("p");//拿到p标签的对象
var txt = p.innerText;//拿到p标签对象的文本,即 大小多少
var index = Math.floor(Math.random()*arr.length);//Math.random()*arr.length 0-5之间的double,向下取整,0-4
p.innerHTML=txt.fontcolor(arr[index]);//改变字体的内容再赋值回去
//p.innerText=txt.fontcolor(arr[index]);??点击三下是这样<font color="red"><font color="yellow"><font color="black">大小多少</font></font></font>
setTimeout("changeColor()",500);
}
</script>
<p id="p">大小多少</p>
<input id="btn" type="button" value="变大" name="" onclick="changeColor()">
* Number对象 ---- 数字原始类型引用类型
Num对象：
1. random() : 获得随机数[0,1)
2. ceil() : 返回大于等于次数的最大整数
3. floor() : 返回小于等于次数的最大整数
4. round(): 返回四舍五入后的整数
* Boolean对象 ---- 布尔原始类型引用类型
* Math对象 执行数学任务
ceil(x) 拿到大于等于x的整数 Math.ceil(3.1)//4
floor(x) 拿到小于等于x的整数Math.floor(3.6)//3
round(x) x的四舍五入 Math.round(3.5)//4
random()//[0,1) random(x) //[0,x)
* Date对象 用于处理日期和时间
Date对象： 代表一个时间
方法： getXXX() : 拿到年月日
var d = new Date();//拿到当前的时间
var dLocal = d.toLocalString();//拿到本地的环境的时间
var year= d.getYear();或 d.getFullYear();
var month = d.getMonth()+1;//月
var day = d.getDate();//日
var week = getDay();//数字 表示星期几
* RegExp 对象正则表达式对象
正则表达式
写法： 1. new的方式 var r = new RegExp("ab") ;
2. 采用/正则表达式/ (推荐) var r = /ab/ ;
var reg =/.../;//点表示任意字符 ,即表示三个任意字符
var s= "abcde";
var b = reg.test(s);//s字符串是否包含正则表达式的reg,结果为true
var str = reg.exec(s);//以数组的形式返回匹配正则表达式的字符串, str=[abc]
var reg =/(..)./;()表示子匹配,对结果进行匹配
reg.exec(s)[0]+"***"+reg.exec(s)[1];//先匹配三个点 abc; 再对abc中的两个点匹配,ab;
//所以结果就是: abc***ab
常用的匹配:
1.身份证号码的匹配: var reg = /^(\d{14}|\d{17})(\d|[xX])$/;
2.单词首字母大写: var reg = /\b(\w)|\s(\w)/g;
3.验证日期 YYYY-MM-DD: var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
yyyy/mm/dd : var reg:/^\d{4}(-|\/)\d{1,2}(-|\/)\d{1,2}$/;
4.去掉文件后缀名: var reg = /\.\w+$/;
5.验证邮箱: var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
6.匹配手机号码为135打头: var reg = /^(135)(\d{8})$/;
匹配手机号码: : var reg=/^1[3,5,8,6](\d{9})$/;
匹配13或15打头的手机号码: var reg = /^0*(13|15)\d{9}$/;
匹配电话号码: var reg= /^\d{3,4}-\d{7,8}(-\d{3,4})?$/; 0563-5380513-001;区号-号码-分机号
7.文本框只能输入数字和小数点:var reg = /^\d*\.?\d{0,2}$/;
8.判断字符串是否全由数字组成:var reg = /^\d*$/;
9.删除字符串两侧的空格:function trim(str){ return str.replace(/^\s+|\s+$/g,''); }
10.统一字符中的空格数:例: 蓝 色 理 想;--->蓝色理想
funciton replaceSpace(str){
var reg=/\s+/g;
str=srt.replace(reg,"");
return str;
}
浙公网安备 33010602011771号