JavaScript是前端工程师用的不能再熟悉的一种脚本语言,主要是用户创建动态网页、与后端交互等。下面是我学习时整理的JavaScript基础语法
1.js基本常识
js命名规范:
1.一定要有意义,尽量用英文单词
2.不要以数字开头,不能使系统的关键字,不能使用运算符
3.注意大小写
大小写:
变量名和函数名 第一个单词 小写以后每个单词 首字母大写
对象 : 每个单词首字母都要大写
分号:
结构定义语句后不加分号 if for while
功能执行语句一定要加分号 赋值等
变量:
变量声明后是浏览器关闭后才释放的,在没关闭之前可以随时使用
数据类型:
typeof(变量);
1.number (int float double) 注意:计算时还是按整形和浮点型分开使用
2.string (string char)
3.boolean
4.object(object array null) 使用时分别处理
5.undefined 没有声明变量
整数
var a=10;
var a=045;
var a=0Xff;
浮点数不能用等号进行判断
字符串'',""没有区别,所有的转义都可以使用,
2.函数
1.函数的作用 ---决定去不去使用
2.函数的参数 ---决定怎么用
3.返回值 ---决定调用后如何处理
a.函数组成:
1.函数名
2.参数:根据需要使用参数
3.函数体(功能)
4.返回值(可选)
注:函数名不加()时,这个函数名就代表整个函数。函数名可赋值给一个变量,那么这个变量就可以当作这个函数的函数名使用,也可以直接var test=function(){}
b.回调函数(参数中用到了函数):
例:
function demo(a,b,fun){
return a+b+fun(a,b);
}
demo(1,2,test);
function test(x,y){
return 100+x+y;
}
也可以:
demo(1,2,function(x,y){
return x*y;
});
再者:
functioin table(start,end,check){
for(var i=start;i<end;i++){
if(check(i)){
document.write(i+'</br>');
}
}
}
//1.从这个函数中(10,500)取出3的倍数
//2.从这个函数中(-200,200)取出负数
table(10,500,function(num){
if(num%3==0) return true;
else return false;
});
c.系统函数
系统函数中的global和window对象可以供程序员使用
escape(charstring)//为字符串进行编码.所有空格、标点、重音符号以及其他非ASCII
字符否用%xx编码代替,其中xx等于表示该字符的十六进制数
unescape(charstring) 与其用法一致但是是解码操作
isNaN(data)判断data是否为不是数字类型(NaN)
eval(codestring) 检查并执行代码
<script>
a="23.45";
var str='var f="'+a+'";if(!isNaN(f)){ var i=parseInt(f);}else{var i=0;}';
eval(str);
alert(1);
</script>
d.函数特性
d-1.js中函数外声明的变量即可看成全局变量
默认参数:
function test(a,b,c){
a = a ? a : 1;
b = b ? b : 2;
c = c ? c : 3;
alert(a+"-----"+b+"-----"+c);
}
test();
d-2.如果形参数大于实参数,那么函数内将把所有形参合成一个数组arguments
3.javascript对象
3.1 基本常识
a.基于对象的操作方式(面向对象封装、继承、多态)
b.将相关的操作使用一个对象完成,看作是一个整体
javascript——–php
对象————-类
对象实例 —–对象
c.对象包括:
字符串对象
数学对象
数组
事件对象
d.对象中存的内容:
d.1、属性(变量)
d.2、方法(函数)
都是和这个对象相关的
e.使用步骤:
e.1.找到对象
e.2.实例化对象
e.3.操作对象
f.实例对象
f.1对象实例:用'.'进行操作
f.2对象实例.属性 (取值,赋值)
f.3对象实例["属性名"]
f.4对象实例.方法();
如Date对象:
<script>
var dt=new Date();
var str="今天是:";
str += (dt.getYear()+1900)+"年";
str += (dt.getMonth()+1)+"月";
str += dt.getDate()+"日 ";
str += dt.getHours()+":";
str += dt.getMinutes()+":";
str += dt.getSeconds()+" ";
var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
str += arr[dt.getDay()];
document.write(str);
</script>
3.2自定义对象
a.方法一:
<script>
function Play(){
}
var p = new Play();
//属性
p.width=300;
p.height=200;
p.num=4;
p.autotime=3;
//方法
p.autoPlay=function(){
alert("dsfdsfdsfdgf");
}
p.test=function(){
}
alert(p.width);
p.autoPlay();
</script>
b.方法二:
function Play(){
=》》》》》》var p = new Object();
}
var p = new Play();
c.方法三:
function Play(){
var p = new Object();
//属性
p.width=300;
p.height=200;
p.num=4;
p.autotime=3;
//方法
p.autoPlay=function(){
alert("dsfdsfdsfdgf");
alert(p.num);//this.num,静态方法中无this
}
p.test=function(){
}
return p;
}
var p = new Play();
<script>
function Play(){
var p = new Object();
//属性
p.width=300;
p.height=200;
p.num=4;
p.autotime=3;
//方法
p.autoPlay=function(){
alert("dsfdsfdsfdgf");
alert(this.num);
}
p.test=function(){
}
return p;
}
var p = new Play();
alert(p.width);
p.autoPlay();
</script>
d.方法四:
//有this就得有对象
function Play(width,height,num){
this.width=width;
this.height=height;
this.num=num;
this.autoPlay=function(){
alert("###########");
}
this.test=function(){
}
return p;
}
var p = new Play(3000,200,8);
alert(p.width);
p.autoPlay();
</script>
遍历属性名(接上):
var pro="";
for(pro in p){
alert(p[pro]);
}
with(对象st){
所有方法如果不加对象都是st的方法
}
with(document){
write("<table>");
}
3.3内置对象
a.Function对象:
<script>
var demo=new Function("x","y","return x+y");
demo=new Function("x","y","return x*y");
alert(demo(3,4));
</script>
b.String对象:
var str = new String("abcdefg");
var str = "abcdefg";
c.快速声明对象:
var p=new Object();
p.name="zhangsan";
p.age=10;
p.sex="nan";
/*
json
{属性1:值1,属性2:值2,属性3:值3,属性4:值4}
*/
var p={name:"zhangsan",age:10,sex:"nan"};
alert(p.name);
alert(p["age"]);
match()一般用于验证操作
Number对象:
alert(Number.MAX_VALUE);
d.静态对象:不创建对象的情况下直接用对象名访问
e.Math对象:
不要实例化,直接调用
如100以内随机数:
var num=Math.random()*100;
document.write(num+"<br>");
4.数组
数组的声明与应用
a、数组的作用:只要是批量的数据都需要使用数组声明
b、如何声明数组
4.1.快速声明数组的方法
var 数组名=[元素1,元素2,元素3,元素4];
其中的元素可以为另一个数组.
4.2.使用array对象
function MyArray(){
this.length=arguments.length;
for(var i=0;i<arguments.length;i++){
this[i] = arguments[i];
}
this.sort=function(){}
this.pop=function(){}
this.push=function(){}
}
var arr = new Array("成员","成员","成员n");
var arr = new Array(10);
var arr=[1,5,3,4,2,9,8,7];
arr.sort(function(a,b){//可用此方法对函数进行重写
if(a>b){
return -1;
}
else if(a == b){
return 0;
}
else{return 1};
});
document.write(arr);
var arr=["aaa","aaaa","aa","b","aaaaaaaa"];
//arr.push("wwww","yyyy");
//arr.pop();
//arr.unshift("hello");
arr.shift();
alert(arr);
alert(arr.length);
reverse();数组反转
join(s);数组转为字符串,'s'为连接符
c、遍历数组
d、数组的处理(内置处理方法)
5.DOM
作用:DOM(Document Object Model)
1.document 文档 HTML/XML文件 即标记语言
2.Object对象(HTML元素 转乘的对象(js对象))
注意:如果使用js操作HTML文档,就需要先将HTML文档中的结构转成js对象
a.操作属性
b.操作内容
5.1.innerText//里面的东西全以文本形式显示 obj.innerText=”brother“,
该属性火狐浏览器不兼容,可用textContent代替,用法相同
使用时可自己写一个方法,用document.all判断是否支持所有方法,即自己写个转换
“`
if(document.all){
alert(document.all);
}
ffie(a,”wwww”);
alert(ffie(a));
function ffie(obj,value){
if(document.all){
if(typeof(value)==”undefined”){
return obj.innerText;
}
else obj.innerText=value;
}else{
if(typeof(value)==”undefined”){
return obj.textContent;
}
else obj.textContent=value;
}
}
5.2.innerHTML//里面的内容以HTML形式显示
使用时尽量使用innerHTML
5.3.outerText
5.4.outerHTML //3,4都包含自己本身的标签
表单
表单元素取值需要用```value(<input>,<textarea>)```
**c.操作样式**
对象.style.属性="";同时属性需要格式化,即"-"去掉,后面的单词首字母大写
---
但有些属性无法从内联式样式中获取,此时用另一个属性即可 , 如width/offsetWidth
---
操作样式较多时,可添加className,className数量不限;将className清空即取消样式
var pro="";
for(pro in a){
document.write("a."+pro+"="+a["pro"]+"<br>");
}
可用此方法获取a标签中的所有属性
有了以上三点的操作之前先转成对象
“`
转成对象的两种形式:
1.标记名(多个)、id(唯一)、name(多个)
document中的三个方法
var objs=document.getElementsByTagName(“div”);
var obj = document.getElementById(“one”);
var obj = document.getElementsByName(“two”);
2.通过数组获取
document.body;
document.title;
window.frames;
document.all;//所有的标记
document.embeds;//所有动画
document.scripts;//所有js脚本
document.applets;//所有Java脚本
document.forms;//所有图像
document.images;//所有表单
document.anchors;//所有的锚点
document.styleSheets;//所有的样式
document.links;//所有链接
有7种方式访问(02.html)
其各种操作按照对象操作原则,可以无限制的在js中添加属性
Model:
一、将文档想成一个倒数,每一个部分(元素、内容、属性、注释)都是一个节点
二、只要知道一个节点,按关系找到其他节点,
父节点, parentNode
子节点(第一个,最后一个) childNode firstNode lastNode
同胞节点 (上一个,下一个) nextSibling previousSibling
三、找到节点:节点类型nodeType,节点名nodeName,节点值nodeValue
nodeName属性含有节点的名称
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName是#text
文档节点的nodeName永远是#document
注释:nodeName所包含的XML元素的标签名称永远是大写的
对于文本节点,nodeValue属性包含文本
对于属性节点,nodeValue属性包含属性值
nodeValue属性对文档节点和元素节点时不可用的。
nodeType属性克返回节点的类型
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
document.close():关闭文档流
注意:不能用输出的方式在已经结束的文档流中添加数据,此时可以动态创建节点完成操作+
可以再一个文档流中:
1.创建节点
(在文本流中创建用document)document.createElement("");//只有一个文件中只能存在一个的节点不可创建
appendChild();
insertBefore();
2.添加到文档流中
3.删除节点
removeChild();
d.事件处理:
一、事件源:任何一个HTML元素(节点),body,div,button,p,,a,h1…………
二、事件 :你的操作
鼠标:
click 单击
dblclick 双击
textcontentmenu(在body) 文本菜单
contextmenu //右键点击(06.html 2)
mouseover 放上
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动
键盘:
keypress 键盘事件 指数字字母键,其余键无效
keyup 键盘抬起
keydown 按下 此时所有的键都可以取到
文档:
load 加载 load中的内容在加载时最后执行(06.html 4)
unload 关闭 关闭或切换页面时触发
beforeunload 关闭之前
表单:
focus 获得焦点事件
blur 失去焦点事件
submit 提交事件
change 改变事件
其他事件:
scroll 滚动事件
selected 选择事件
三、事件处理程序
有三种方法添加事件:
1.格式:<tag on事件="事件处理程序"/>(05.html 1)
2.
<script>
对象.on事件=事件处理程序(05.html 2)
</script>
3.<script for="事件源id" event="事件">
事件处理程序
</script>
<body oncontextmenu="return false"></body>//可以屏蔽掉时间(06.html) 且必须用return false.用函数返回值的话要写成return tesat()
事件对象:event window.event
属性:
1.srcElement //代表事件源对象
2.keyCode //时间发生时的键盘码 keypress keydown keyup
3.clientX,clientY
4.screenX,screenY
5.returnValue
6.cancelBubble
6.浏览器对象
浏览器本身就有一些对象,不用创建即可使用
window : 当前浏览器窗体的
属性:
status
opener//在子窗体中代表父窗体
closed
方法:
alert()
confirm()
setInterval()
clearInterval();//循环执行
setTimeout("aaa()",3000) //只执行一次,在规定时间内执行某一操作
clearTimeout()
open();//开启新窗体(11.html)(16)
window子对象:
document
frames
location
history
screen
[window.]成员
document.write();
本身window
open可以弹出子窗体
frames//多个窗体
跳转位置函数:
<meta http-equiv="refresh" content="3"><!--3秒钟刷新一次-->
<meta http-equiv="refresh" content="3;url=http://www.brophp.com"><!--3秒钟加载一次页面-->
header("Location:login.php");//前面不能有输出
window.navigate(url)
location.href=url;
location.replace('url')
记得:
location='url';
location.reload(true);(14.html)
history
history.back()
history.go(-2)(15.html)
screen
(16.html)
表单对象:
document.getElementById()
document.forms.username
document.frm1.username
本身表单有的属性都可以作为对象的属性
action
method
enctype
title
方法:
submit()
focus()//获取焦点
事件:
onfocus();//获取焦点
onblur();//失去焦点
onchange();//内容改变事件
form 上的onsubmit();(17.html)
select标签:
selectedIndex代表选项框下标
options[selectedIndex]获取选项
位置:(images/weizhi.png)
style.top
style.left
offsetWidth
offsetHeight
offsetTop //距离外面一层盒子的距离
offsetLeft
scrollHeight
scrollWidth
scrollTop //滚动条滚动的高度,一般从0开始计数,计数为+时元素上升,反之下降。
没有滚动条使用js操作是的某一容器内的文本(如div)向上滚动,则需要对该div的上一层非
直接文本容器的scrollTop属性进行改动而不是文本的属性,(22.html)
scrollLeft
//用absolute布局可以是元素脱离文档流,
//用fixed布局可以使页面中某一元素的位置不随滚动条的改变而改变,此时fixed的
布局相对于HTML标签