JavaScript笔记
一、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 浏览器对象模型
DOM: Document object Model 文档对象模型
三、JavaScript与Html的结合方式(掌握)
Javascript与HTML的结合方式有三种:
1.采用事件来调用,代码写在字符串中
<button onclick = "alert('大家好')">点击</button>
2.采用定义函数的方式: 用function来定义函数
function fun(){ alert('你好')} ;
3.采用外部js文件.
利用<script src = "a.js"></script>引入
四、JavaScript基本语法(掌握)
* 定义变量:采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
* 数据类型: undifined,表示未定义类型。
Number类型。代表了一切数字类型
String类型。字符串类型
Boolean类型。布尔类型
Function类型。函数类型
Null类型。
object :对象类型.
* 判断变量的类型 :
1. 采用typeof函数判断 :typeof(a) == "string"
2. 采用instanceof运算符: a instanceof String
* 三大结构
a.顺序结构
b.选择结构
c.循环结构 for,while,do...while
* 运算符
1.一元运算符 +(正号) - ++ --
2.二元运算符 +(加法) - * / %
3.三元运算符 ? :
4.等号 == 判断的是内容,"100"=100;
=== 全等于 ,判断类型和内容;
* 类型的转换
1. Number转String : 3 + ""
2. Number转Boolean :在javascript中,非0为真,0为假。如果变量为null或者undefined,也为假.
3. String转Number:
a. parseInt,parseFloat
b. 乘以1即可
五、JavaScript 函数的定义(掌握)
* 函数的定义有三种方式:
1.采用function关键字来定义
2.采用匿名的方式来定义
3.采用new Function()的方式(了解,不推荐)
* 函数的调用:
1.函数调用的时候参数可以传递多个,可以和函数定义的形参个数不符合
2.如果函数重名了,那么调用的时候一定是调用最后一个,与参数无关。
*** 推荐: 定义函数的不要重名。
函数劫持:改变函数本身的作用.
六、JavaScript 全局函数(掌握)
全局函数:
1.isNaN (掌握):用来判断变量是否是数字类型的字符串
NaN: not a Number ,不是一个数字
2.parseInt,parseFloat
3.eval(掌握): 把字符串转换成数字
4.escape(): 编码
5.unescape(): 解码
6.encodeURI(): 对网址(URL)进行编码
7.decodeURI(): 对网址(URL)进行解码
七、JavaScript常用对象介绍(掌握)
* Array对象 数组对象,进行数组操作
定义方式
1.采用new的方式
2.采用中括号[]来定义
数组的长度可以随时改变
特点:
1.javascript中数组的大小可以随时改变
2.javascript中数组的下标可以是任意对象。
方法:
1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
2.push() : 向数组的末尾添加一个元素
3.shift() : 删除并返回数组的第一个元素
4.sort() ; 排序 .默认同类型的数据相比较.
传递一个function类型参数,制定自己的规则:
var arr=[3,8,"23","34",123];
alert(arr.sort(function(a,b)
{
if(a*1>b*1)
return 1;
else
return -1;
}
补充:标题栏滚动:
<body onload="init()">
<script type="text/javascript">
function init()
{
var title=document.title; //1、拿到标题栏文本
var arr=title.split(""); //2、将文本转换为数组
var first=arr.shift(); //3、拿到数组的第一个元素
arr.push(first); //4、将第一个元素添加到数组最后
title=arr.join(""); //5、将数组再组合成一个字符串
document.title=title; //6、将字符串再赋值到标题栏
setTimeout("init()",300); //7、每隔1秒循环前6步
}
</script>
</body>
变换颜色:
function color()
{
var arr=["red","yellow","blue","green","purple","pink"];//1、将颜色装进数组
var p=document.getElementById("p"); //2、拿到标签主体内容
var index=Math.floor(Math.random()*arr.length); //3、随机取得一个整数作为数组的下标
p.innerHTML=p.innerText.fontcolor(arr[index]); //4、给标签的主体内容改变颜色并赋值回去
setTimeout("color()",1);
}
* String对象 ----- 字符串类型的引用类型
String对象:
方式: substr: 截取字符串 两个参数第一个是下标,第二个是长度
substring: 截取字符串 两个参数第一个是下标,第二个是下标
toUppercase:
toLowercase:
indexOf:
charAt() :
replace():
* Number对象 ---- 数字原始类型引用类型
Num对象:
1. random() : 获得随机数[0,1)
2. ceil() : 返回大于等于此数的最大整数
3. floor() : 返回小于等于此数的最大整数
4. round(): 返回四舍五入后的整数
* Boolean对象 ---- 布尔原始类型引用类型
* Math对象 执行数学任务
* Date对象 用于处理日期和时间
Date对象: 代表一个时间
当前日期时间:new Date().toLocaleString();
方法: getXXX() : 拿到年月日
* RegExp 对象正则表达式对象
正则表达式
写法: 1. new的方式 var r = new RegExp("ab") ;
2. 采用/正则表达式/ (推荐) var r = /ab/ ;
八、JavaScript模拟类的定义
1、定义类并创建类的实例对象
function Person(){
}
var p = new Person();
2、定义共有属性和私有属性
定义私有属性:
1)、在函数中:用var定义;
2)、在函数外:用对象.属性名定义;
定义公有属性:
1)、在函数中:用this.属性名定义;
2)、在函数外:函数名.prototype.属性名 = 默认值
function Person(){
var name = "颜玲";
this.age = 18;
}
Person.prototype.height=172;
3、定义公有方法和私有方法
定义私有方法:
1)、在函数中:采用 var 方法名 = function(){} 定义;
2)、在函数外:采用 对象名.方法名 = function(){} 定义
function Person(){
var show = function(){
alert("我是私有方法") ;
}
this.display = function(){ //公有方法
show() ;
}
}
var p= new Person();
p.show() ; //调用不来,因为是私有的
p.display() ; //可以调用,公有方法
定义公有方法:
1)、在函数中:采用 this.方法名= function(){} 定义
2)、在函数外:采用 函数名.prototype.方法名=function(){} 定义
Person.prototype.sing = function(){
alert("我喜欢颜玲!") ;
}
4、静态属性和静态方法
***注意: 定义静态属性和方法都用函数名来定义。
调用的时候只能用函数名来调用,不能用对象调用。
function Person(){
}
Person.name = "张三" ;
Person.show = function(){
alert("我是静态方法") ;
}
var p = new Person() ;
alert(p.name) ; //弹不出来,因为name是静态的
p.show() ; //出错,因为show方法是静态的,要用函数名调用 */
5、构造函数(无参,有参)
***注意: 函数名不要重复,因为先定义的函数永远调用不了
6、如何创建javascript对象
创建javascript对象的三种方式:
1)、采用 new 函数名() ;
2)、采用 new Object() ;
3)、采用 json格式定义
function Person(){};
var p = new Person() ;
var obj = new Object() ;
obj.name = "李四" ;
alert(typeof(obj)) ;
alert(obj.name) ;
var json = {"a":"中国","b":"美国","c":"日本"} ; //定义了一个json对象
var json1 = {1:"中国",2:"美国",3:"日本"} ; //定义了一个json对象
alert(typeof(json)) ; //object
alert(json.a) ; //拿到中国字符串
alert(json["b"]) ; //拿到美国字符串
alert(json1["2"]) ; //拿到美国字符串,注意不要用json1."2"此种写法
//如果想拿到所有的值,需要用foreach循环
for(var i in json){
alert(i + " :" + json[i]) ; //打印所有的值,写法不能用json.i
}
7、 扩展已有对象的方法
Array.prototype.getMax = function(){} //扩展数组的方法
8、继承
function Person(){
var name = "张三" ; //私有
this.age = 100 ; //公有
var show = function(){ //私有
alert("我是私有方法") ;
}
this.display = function(){ //公有
show() ;
}
}
function Student(){
this.display = function(){
alert("大家好") ;
}
}
//希望student函数继承于Person函数
------------Student.prototype = new Person() ;----------------
var s = new Student() ;
alert(s.name) ; //弹不出来,因为name是私有的,继承不下来
alert(s.age) ;
s.show() ; //报错,因为show方法是私有的,继承不下来
s.display() ;
9、重载重写
重载没有意义,重写意义不大。
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
此笔记可能尚不完善,为本人学习整理,整理不易,仅供参考,如有错误,请联系作者修改,特此分享,谢谢阅读!
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------