JAVA 与 JS
难得有时间,还是回顾一下JS,用得少自然容易忘
一:
java与js总体的不同:
1.java是面向对象的,js可以说也是面向对象的编程,BOM和DOM编程,更准确是基于对象的,因为要创建的新的对象似乎很少
2.java是强类型的,有八种基本数据类型,引用数据类型,划分的很细;js是弱类型的主要有string number boolean(三种基本数据类型) array objec (两种复合(引用)数据类型) null undefined(两种特殊数据类型) 还有datetime之类的一般难得用
3.java的执行需要编译成字节码文件;js直接有浏览器解释就行,也就是一门解释性语言
二.js注意点
1.变量
1)弱类型 所有变量用var 定义
2)同java一样变量名要满足规范,区分大小写
3)变量声明自动提升,值不跟随变量提升,需要注意,写的时候注意点就行
4)所有的数值都是number类型,字符和字符串都是string类型,布尔是boolean类型(为false : 0,NaN,false,undefined.,null... true在做运算默认为1)
如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。
2.类型转换
1)String --> number : parseInt("string") 转整数/ parseFloat("string")转小数;转换失败是NAN(not a number); 注意: parseInt("123xxx") =123;
2)number --> string : 基本和java的转成字符串的相同
3.运算符
1)== 与 ===
==: 只比较值 123 == "123" true
===: 恒等于带类型比较 123==="123" false
2)isNaN(表达式) : 判断是否数值
3)字符串可以和数字,boolean比较,按照字典顺序比大小
4.流程控制语句
1)注意switch case default 语句中 case 后面可以跟表达式,这一点与java不同
2)for循环中不会有局部变量，都是全局的变量。
for( var i=0;i<10;i++){
document.write(i+"-");
}
document.write("跳出循环之后的i="+i)
这段代码执行后 i=10;
3)增强for循环 为 for in : for( var a in arrb){}
4)with语句的作用： 有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象。
格式 ：
with(obj){
操作obj的属性语句;
}
5.函数
1)function() : 函数没有重载,返回值可有可无,没有返回值值类型
2)一个函数重复定义参数列表不用默认使用最后一个定义,同变量声明提升一个道理
6.数组:
1)声明方式:
i.var arr =new Array();
var arr =new Array(10);
var arr =new Array("a","b"...);
ii.var arr =[];
var arr =["a","b"...];
2)JS数组自动增长,下标越界值默认为undefined
3)数组的常用方法: reverse()翻转 sort()排序 concat(arr)将arr添加进数组..pop() ,push() ,join("分隔符") splice(start, end,new arr)将从start到end的数组元素变为new arr
7.自定义对象(类)
1)关键字function 类名()
2)方式:
i.无参构造Person对象
声明类:function Person(){}
追加属性和方法:
Person.name="---"; Person.work=function(){};
调用属性和方法:
Person.name;Person.work();
ii.有参构造
function Person(age , name){
this.name=name;
this.age=age;
this.work=function(){
alert(name+"zai"+"");
}
}
调用属性和方法:
Person.name;Person.work();
同样可以追加属性和方法
iii.Object类:
声明类:
var Person = new Object();
追加属性和方法:
Person.name = "jack";
Person.age = 28;
Person.sayHello = function() {
document.write(this.name + ":" + this.age);
}
调用方法:
Person.sayHello();
iv.字面量: 这种方式接近json : "{}"表是对象 ,"[]"表示数组 可以无限嵌套
var person={
name:"李四",
age:88,
eat:function(){
alert("eating...");
}
};
调用属性和方法:
person.name;person.age
person.eat();
三.js事件:
1. 事件说明
基本上所有的HTML元素中都可以指定事件属性。
每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头，后面的是事件的触发方式，如：
onclick，表示单击
onkeydown，表示键按下
...
2. 常用的事件类型：
1)鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
2)鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
3)焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
4)按键相关的：
onkeydown 当用户按下键盘按键时触发。
onkeyup 当用户释放键盘按键时触发。
onkeypress 当用户按下字面键时触发。
5)其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
四.BOM编程
1.BOM编程概念:
全称 Browser Object Model，浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
简单来说:html网页时由浏览器内核进行解释运行的,当html网页被加载完后,浏览器内核会把页面信息封装成四个对象,分别别是:window(窗口),location(地址栏对象),history(历史记录),screen(整屏幕页面) 通过js来操作这四个对象的编程就是BOM编程
2.BOM对象：
1)screen 对象
Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。
1.1)属性：
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
2)window 对象
Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
2.1)window中的方法
i.对话框都是window的方法:
alert() 显示一个警告框。
confirm()选择确定框。
prompt() 输入框。
open()打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）
ii.定时器
setTimeout(vCode, iMilliSeconds)超时后执行代码。
setInterval(vCode, iMilliSeconds)定时执行代码，第一次也是先待，到时再执行。
3)location 对象
Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
3.1)location中的重要方法：
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
4)history对象:历史记录
方法:
back();返回上此浏览网页
forward();下一次
go(number);正数向前一个number个,负数向后number个
五.DOM编程
1.DOM编程的概念:
hteml网页时有浏览器内核解释运行的,当html页面加载完毕之后,浏览器会把html页面标签封装成document对象,可以同document对象方法获取标签,js通过操作document对象的编程称之为DOM编程
DOM树:一个标签我们称之为一个节点,节点和节点之间的关系:
父子关系: 父节点 parentNote 子节点 :childNotes(不包括孙子)
兄弟关系: 上一个(兄):previousSibling 下一个(弟):nextSibling
意思:我们学的就是window.document对象 window可以省略
2.document对象:
1)对象属性的集合：
all 获取页面所有元素对象, firfox不兼用该属性
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象
2)常用方法:
i.获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
document.getElementsByClassName()
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
ii.获取标签(节点对象)常用属性
nodeName: 得到节点名
nodeType: 得到节点类型
nodeValue: 得到节点值
parentNode: 得到父节点
childNodes: 得到子节点集合
firstChild: 获取当前节点的第一个子节点。
lastChild: 获取当前节点的最后一个子节点。
nextSibling: 获取当前节点的下一个节点。（兄节点）
previousSibling:获取当前节点的上一个节点。（弟节点）
iii.操作标签(节点对象)方法
document.createElement("标签名") 创建行节点,标签
setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 将e添加元素到elt中最后的位置
elt.insertBefore(new, child); 将new添加到elt中，child之前。
elt.removeChild(eChild) 删除指定的子节点(只能父删子)
六.结语:
我个人主要是做java的对js只是了解,没有深入研究,写的就是一些常用到的.我主要做后台,涉及前台设计的更喜欢用jQuery毕竟这个jQuery对js之后更简单实用而且也够用了,但js我还是回顾一下,毕竟不常用容易忘.下一次有时间做做MySQL的一些知识回顾总结吧,喜欢这一句话:先问问自己是不是天才,如果不是就一步一步来.
难得有时间,还是回顾一下JS,用得少自然容易忘
一:
java与js总体的不同:
1.java是面向对象的,js可以说也是面向对象的编程,BOM和DOM编程,更准确是基于对象的,因为要创建的新的对象似乎很少
2.java是强类型的,有八种基本数据类型,引用数据类型,划分的很细;js是弱类型的主要有string number boolean(三种基本数据类型) array objec (两种复合(引用)数据类型) null undefined(两种特殊数据类型) 还有datetime之类的一般难得用
3.java的执行需要编译成字节码文件;js直接有浏览器解释就行,也就是一门解释性语言
二.js注意点
1.变量
1)弱类型 所有变量用var 定义
2)同java一样变量名要满足规范,区分大小写
3)变量声明自动提升,值不跟随变量提升,需要注意,写的时候注意点就行
4)所有的数值都是number类型,字符和字符串都是string类型,布尔是boolean类型(为false : 0,NaN,false,undefined.,null... true在做运算默认为1)
如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。
2.类型转换
1)String --> number : parseInt("string") 转整数/ parseFloat("string")转小数;转换失败是NAN(not a number); 注意: parseInt("123xxx") =123;
2)number --> string : 基本和java的转成字符串的相同
3.运算符
1)== 与 ===
==: 只比较值 123 == "123" true
===: 恒等于带类型比较 123==="123" false
2)isNaN(表达式) : 判断是否数值
3)字符串可以和数字,boolean比较,按照字典顺序比大小
4.流程控制语句
1)注意switch case default 语句中 case 后面可以跟表达式,这一点与java不同
2)for循环中不会有局部变量，都是全局的变量。
for( var i=0;i<10;i++){
document.write(i+"-");
}
document.write("跳出循环之后的i="+i)
这段代码执行后 i=10;
3)增强for循环 为 for in : for( var a in arrb){}
4)with语句的作用： 有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象。
格式 ：
with(obj){
操作obj的属性语句;
}
5.函数
1)function() : 函数没有重载,返回值可有可无,没有返回值值类型
2)一个函数重复定义参数列表不用默认使用最后一个定义,同变量声明提升一个道理
6.数组:
1)声明方式:
i.var arr =new Array();
var arr =new Array(10);
var arr =new Array("a","b"...);
ii.var arr =[];
var arr =["a","b"...];
2)JS数组自动增长,下标越界值默认为undefined
3)数组的常用方法: reverse()翻转 sort()排序 concat(arr)将arr添加进数组..pop() ,push() ,join("分隔符") splice(start, end,new arr)将从start到end的数组元素变为new arr
7.自定义对象(类)
1)关键字function 类名()
2)方式:
i.无参构造Person对象
声明类:function Person(){}
追加属性和方法:
Person.name="---"; Person.work=function(){};
调用属性和方法:
Person.name;Person.work();
ii.有参构造
function Person(age , name){
this.name=name;
this.age=age;
this.work=function(){
alert(name+"zai"+"");
}
}
调用属性和方法:
Person.name;Person.work();
同样可以追加属性和方法
iii.Object类:
声明类:
var Person = new Object();
追加属性和方法:
Person.name = "jack";
Person.age = 28;
Person.sayHello = function() {
document.write(this.name + ":" + this.age);
}
调用方法:
Person.sayHello();
iv.字面量: 这种方式接近json : "{}"表是对象 ,"[]"表示数组 可以无限嵌套
var person={
name:"李四",
age:88,
eat:function(){
alert("eating...");
}
};
调用属性和方法:
person.name;person.age
person.eat();
三.js事件:
1. 事件说明
基本上所有的HTML元素中都可以指定事件属性。
每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头，后面的是事件的触发方式，如：
onclick，表示单击
onkeydown，表示键按下
...
2. 常用的事件类型：
1)鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
2)鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
3)焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
4)按键相关的：
onkeydown 当用户按下键盘按键时触发。
onkeyup 当用户释放键盘按键时触发。
onkeypress 当用户按下字面键时触发。
5)其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
四.BOM编程
1.BOM编程概念:
全称 Browser Object Model，浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
简单来说:html网页时由浏览器内核进行解释运行的,当html网页被加载完后,浏览器内核会把页面信息封装成四个对象,分别别是:window(窗口),location(地址栏对象),history(历史记录),screen(整屏幕页面) 通过js来操作这四个对象的编程就是BOM编程
2.BOM对象：
1)screen 对象
Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。
1.1)属性：
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
2)window 对象
Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
2.1)window中的方法
i.对话框都是window的方法:
alert() 显示一个警告框。
confirm()选择确定框。
prompt() 输入框。
open()打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）
ii.定时器
setTimeout(vCode, iMilliSeconds)超时后执行代码。
setInterval(vCode, iMilliSeconds)定时执行代码，第一次也是先待，到时再执行。
3)location 对象
Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
3.1)location中的重要方法：
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
4)history对象:历史记录
方法:
back();返回上此浏览网页
forward();下一次
go(number);正数向前一个number个,负数向后number个
五.DOM编程
1.DOM编程的概念:
hteml网页时有浏览器内核解释运行的,当html页面加载完毕之后,浏览器会把html页面标签封装成document对象,可以同document对象方法获取标签,js通过操作document对象的编程称之为DOM编程
DOM树:一个标签我们称之为一个节点,节点和节点之间的关系:
父子关系: 父节点 parentNote 子节点 :childNotes(不包括孙子)
兄弟关系: 上一个(兄):previousSibling 下一个(弟):nextSibling
意思:我们学的就是window.document对象 window可以省略
2.document对象:
1)对象属性的集合：
all 获取页面所有元素对象, firfox不兼用该属性
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象
2)常用方法:
i.获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
document.getElementsByClassName()
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
ii.获取标签(节点对象)常用属性
nodeName: 得到节点名
nodeType: 得到节点类型
nodeValue: 得到节点值
parentNode: 得到父节点
childNodes: 得到子节点集合
firstChild: 获取当前节点的第一个子节点。
lastChild: 获取当前节点的最后一个子节点。
nextSibling: 获取当前节点的下一个节点。（兄节点）
previousSibling:获取当前节点的上一个节点。（弟节点）
iii.操作标签(节点对象)方法
document.createElement("标签名") 创建行节点,标签
setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 将e添加元素到elt中最后的位置
elt.insertBefore(new, child); 将new添加到elt中，child之前。
elt.removeChild(eChild) 删除指定的子节点(只能父删子)
六.结语:
我个人主要是做java的对js只是了解,没有深入研究,写的就是一些常用到的.我主要做后台,涉及前台设计的更喜欢用jQuery毕竟这个jQuery对js之后更简单实用而且也够用了,但js我还是回顾一下,毕竟不常用容易忘.下一次有时间做做MySQL的一些知识回顾总结吧,喜欢这一句话:先问问自己是不是天才,如果不是就一步一步来.
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
