Javascript学习笔记及他人建议前台脚本Word文件下载.docx
- 文档编号:20732139
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:19
- 大小:38.95KB
Javascript学习笔记及他人建议前台脚本Word文件下载.docx
《Javascript学习笔记及他人建议前台脚本Word文件下载.docx》由会员分享,可在线阅读,更多相关《Javascript学习笔记及他人建议前台脚本Word文件下载.docx(19页珍藏版)》请在冰豆网上搜索。
d)对象的名字首字母都大写
e)Javascript中当做没常量
f)结构定义:
没有分号。
功能执行语句:
加分号(回车就加分号)。
注:
换行相当于加分号来结束语句。
g)注释:
//单行;
/**/多行(可用于调试、注释)
可以使用下面格式在浏览器不支持Js代码时自动注销js代码。
!
—
Js代码;
//-->
2)定义:
a)变量在内存中占据内存直到浏览器关闭(即可以随时使用)
b)格式:
var变量名=值(声明、赋值)
c)变量再传递的情况下可以不声明(eg:
vara=3;
(var)b=a;
)
4.数据类型
检验函数typeof(变量);
用undefine判断变量有没有声明
1)类型:
a)number(intfloatdouble)计算时还是按详细类型使用
b)string(stringchar)
c)booleam
d)object(objectarraynull)注意:
分别处理
e)function(函数)
2)特点:
a)整数:
十进制(10)、八进制(o45)、十六进制(oxff)
b)浮点数是近似数(eg:
十个0.1相加实质是0.99999999—近似数)
c)字符串:
用(‘’“”两者没有区别)引号内所有转义(\)都可用,字符串中有变量用“+”连接(eg:
“abc”+x+”123”x为变量)
3)类型转换:
a)其他类型强制转换为数值型:
parseInt()、
parseFloat()
b)其他类型转换为对象型:
变量名=newString/Boolean/Number()
5.运算符和表达式
1).运算符:
a)算术运算符号:
+-*%(求模)++--
b)赋值运算符:
=+=-=*=/=%=
c)条件运算符号:
>
==!
=>
=<
====!
=
d)逻辑运算符号:
&
&
||!
(短路运算)
e)位运算符号:
>
(右移)>
(无符号右移)<
(左移)|&
~
f)其它运算符号:
?
:
2).说明:
a)
+加法运算,连接字符串a=10+5+“12abc”+20结果是“1512abc20”
b)%一种是被整除,一种求一段范围
c)赋值运算符先运算再赋值
d)条件运算符两边必须相同类型,返回布尔值(0或1)
e)逻辑运算符&
与||同于布尔值?
表达式:
表达式
f)位运算|与&
(转为二进制对齐)>
与<
(二进制)最左或最右加零(相当于乘以2或0.5)>
6.流程控制
1)顺序结构(从上往下)
2)条件结构——分支结构——选择结构
a)单路分支
If(bool){……}
b)双路分支
If(bool){……}else{……}
c)多路分支
If(bool){……}elseif(bool){……}…else{……}
Switch(变量){case值1:
表达式;
[break;
…[default]}(单值匹配)
d)嵌套分支
If(bool){if(){switch(){…}}else{for(){while(){…}}
3)循环结构
While()(先判断,在执行)、Do-while()(先执行,再循环)、For()
Break跳出循环;
continue结束本次循环;
7.函数
1)定义:
是一段完成“指定功能”的已经“命名”的代码段,只有“调用”(在声明前后都可)才能用到。
2)格式:
声明function函数名(形参){功能段(一条或多条)}
调用函数名(实参)
返回值return;
只是函数名时代表整个函数,有括号就是调用。
还可以看成变量:
var函数名=function(){…}
函数名不带括号,则代表这个函数。
3)回调函数:
一个函数的形参的位置是一个函数(调用形式),在变量不能解决时使用回调
4)应用:
全局变量,局部变量。
(a=a?
a:
1;
这可以使javascript中默认参数功能)
5)Javascript是基于对象(所有的都是对象的使用形式)(global对象和windows中的可以直接使用)
8.对象(相似其他语言中的‘类’)
1)基于对象的操作方式(面向对象封装、继承、多态)
2)将相关的操作使用一个对象完成,看成是一个整体
3)对象类型:
字符串对象、数学对象、数组对象、时间对象
4)对象中存的内容(属性——变量、方法——函数)都是和对象相关的。
5)声明对象(写一个函数,建立一个对象Object,跟这个对象有关的东西(属性、方法)都往里面放)、使用对象(this是对象的自称,)、使用系统对像(找到对象具体化对象操作对象)
对象实例.属性(取值、赋值)对象实例【“属性名”】对象实例.方法()
Eg:
(时间对象)
vardt=newDate();
varstr=”今天是”;
str+=dt.getYear()+”年”;
str+=(dt.getMonth()+1+)”+月”;
str+=dt.getDate()+”日”;
str+=dt.getHours()+”:
”;
str+=dt.getMInutes()+”:
str+=dt.getseconds()+”星期”;
switch(dt.getDay()){
case0:
str+=”日”;
break;
case1:
str+=”一”;
case2:
str+=”二”;
case3:
str+=”三”;
case4:
str+=”四”;
case5:
str+=”五”;
case6:
str+=”六”;
}<
(时间问候语、日历)
With(dt){
str+=getYear()+”年”;
str+=(getMonth()+1+)”+月”;
str+=getDate()+”日”;
str+=getHours()+”:
str+=getseconds()+”星期”;
switch(getDay()){
}
6)With(对象){所有方法如果不加对象,都是括号对象的方法}(见上例)
doucument.write(“<
table>
”)(tr、/td、/table)
另:
for(变量in对象){}with(对象){}
9.内置JS对象
1)全局对象在global里
2)不用接触(跟数据有关):
Boolean布尔型、Doctionary字典开型、Enumerator对象、Error对象、函数、数字、字符串、vbarray对象
3)掌握:
字符串(匹配、分割、查找)&
正则(定界符)、global、object、日期、数组、数学对象(javascript教材.chm)
保证一个值在一定范围:
vari=3vari=Math.max(-6,Math.min(6,i))(在-6和6之间)
4)静态(固定对象)对象:
Number、Math。
不用new对象(varnumber=Math.random())
10.自定义对象的三种方法
1)土方法(很白痴)
functionCar(){}
varc=newCar();
//属性
c.color='
yellow'
c.mileage=100;
c.brand='
BMW'
//方法
c.whistle=function(){
document.write("
getoutofmyway!
"
);
}
c.start=function(){
I'
mmoving!
}
c.stop=function(){
mtired!
document.write("
第一种方法<
br>
document.write(c.color+"
document.write(c.mileage+"
document.write(c.brand+"
c.whistle();
document.write("
c.start();
c.stop();
2)利用系统自身的Object做“封装型”(推荐使用)
functionCar(){
varc=newObject();
//属性
returnc;
}
第二种方法<
document.write(c.color+"
document.write(c.mileage+"
document.write(c.brand+"
c.whistle();
c.start();
c.stop();
3)使用this以及变量可传(很灵活)
functionCar(color,mileage,brand){
this.color=color;
//没有'
this.'
就表明不是对象里
this.mileage=mileage;
this.brand=brand;
//方法
this.whistle=function(){
this.start=function(){
this.stoop=function(){
//使用时要new一个对象
varc=newCar('
black'
200,'
大奔'
第三种方法<
c.stoop();
11.数组的声明与应用
1)数组的作用:
只要是批量的数据都需要数组生明
2)如何声明数组
a)快速声明数组:
var数组名[“字符串”,数值,布尔值,等元素,,,,](数组里面嵌数组也行)(Json格式:
varp={属性:
值,属性:
值,…})
b)声明方式(对象声明)
使用array对象vararr=newArray(“成员”,“成员”,。
。
“成员n”)
测长alert(arr.length);
赋值arr[i]=””;
取元素alert(arr[i])其中arr为数组名
Arguments默认的,课代表建立数组的所有元素,像地址。
3)遍历数组:
首选for循环。
4)数组的处理(内置处理方法)
数组排序(建立函数对象)、进栈push、出栈pop、入队shift、出队unshift、
随机背景颜色的设置:
varcolors=[“red”,”blue”,”yellow”,”green”,”#FF00FF”]document.bgColors=colors[Math.floor(Math.random()*colors.length)];
设计贪食蛇游戏
12.Dom(documentobjectmodle)的操作
1)Document-文档。
进一步指.html/.xml文件(标记语言)
(注意:
如果使用JS操作HTML/Xml文档,就要先将HTML/Xml文档结构转成JS对象)
2)Object-对象。
进一步指.html/.xml元素转成的的对象。
那就可以操作属性、操作内容、操作样式。
3)获取对象的形式:
一种是根据的ID或Class属性来指定操作(Tagname标签、id、name)
属性操作:
Varobject=document.getElementsByTagName(“***”);
写上改变的属性。
内容操作:
innnertext(IE)textContent(FF)解决两大浏览器的兼容问题
functionffie(object,value)
{if(document.all)
{if(typeof(vaule)==”undefined”)
returnobj.innerText;
elseobj.innerText=Vaule;
}else
returnobj.textContent;
elseobj.textContent=Vaule;
}(innertText、innerHtml、outerText、outerHtml用来取元素中间的内容)
注释:
object.value用来取表单(<
)里的值、文本,包括<
textarea>
元素之间的文本(eg:
inputid=”username”type=”text”name=”username”value=”zhangsan”>
alert(username.value);
会弹出“zhangsan”)
样式操作:
样式对应有多个值时:
对象.样式.属性.值(eg:
object.style.backgroundColor=”red”;
一个一个的操作属性(连字符变成首字母大写);
若不是内联样则object.offset.属性;
若是一个对象的多个属性,就可以用到“类”的方法:
object.className=”类名”;
(类名是新建的属性集的名称)
加多个类名aobj.className=”test”;
aobj.className=+”demo”;
(等同于aobj.className=”testdemo”;
)清空属性eg:
aobj.className=””;
另一种是通过数组(选项卡)遍历对象(全选、反选)varpro=“”;
for(proinaojb){document.write(“a.”+pro+“=”+aobj[pro]+“<
”);
掌握以下对象属性
document.all=[object]document.embeds=[object]document.scripts=[object]document.applets=[object]document.images=[object]document.forms=[object]document.achors=[object]document.styleSheets=[object]document.links=[object]
以上对象可以看成数组:
eg:
document.forms=[object]
With(object){
Forms[1].username.value;
Forms[“名”].username.value;
Forms.items
(1).username.value;
Forms.items(“名”).username.value;
Forms.“名”.username.value;
“名”.username.value;
[“名”].username.valu;
4)Modle-看成一个整体的倒立的树
每一个部分(元素、内容、属性、注释)都是一个节点【node,父(parentNote)、子(childNode第一个firstNote、最后一个lastNote)、同胞节点(previousSibling上一个、nextSibling下一个)】
只要知道一个节点,按关系找到其他节点。
找到节点:
节点类型nodeType、节点名nodeName、节点值nodeValue。
每个节点都拥有着关于节点的某些信息的属性。
这些属性是:
nodeName(节点名称)、nodeValue(节点值)、nodeType(节点类型)。
nodeName属性含有节点的名称。
元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text,文档节点的nodeName永远是#document
nodeName所包含的Xml元素的标签名称永远是大写的;
对于文本节点,nodeValue属性包含文本;
对于属性节点,nodeValue属性包含属性值;
nodeValue属性对于文档节点和元素节点是不可用得。
nodeType属性可以返回节点的类型(元素——1、属性——2、文本——3、注释——8、文档——9)
Alert(对象,节点);
(找名、属性、父、子、同胞)
内容输出完毕文档流结束。
5)可以在一个文档中动态的创建节点(document.createElements(”***”)或appendChild();
或insertBefore();
)、添加到文档流中、删除节点(removeChild();
页面文档流(分割文档流document.close();
13.事件处理
1)事件源
任何一个Html元素(节点)body、div、button、p、a、h1…
2)事件(你的操作):
鼠标:
click单击、dblclick双击、textcontentmenu(在body体上)文本菜单、mouseover放上、mouseout离开、mousedown放下、mouseup抬起、wousemove移动
键盘:
、keypress键盘事件、keyup抬起、keydown按下
文档:
、load加载(页面加载完后执行)、unload关闭、beforeunload关闭之前
表单:
、focus焦点、blur失去焦点、submit提交事件、change改变
其他:
、scroll滚动、select选择……
3)事件处理
三种方法加事件(一个事件源上允许有多个事件)
第一种(在标签上):
格式:
tagon事件=”事件处理程序”/>
第二种(script内):
对象.on事件=事件处理程序<
第三种(不常用):
scriptfor=”事件源ID”event=“事件”>
事件处理程序<
注意不执行或屏蔽,只需使用返回假(returnfalse)
14.事件对象(event——windows.event的简写)
属性:
srcElement代表事件源对象(解决浏览器兼容性问题)
KeyCode事件发生的键盘码keypress只能获取数字字母键,keydown或keyup全部获取(游戏:
小人行走)
鼠标事件:
clientX,clientY(客户端——窗体内鼠标坐标)sereenX,screenY(屏幕内鼠标的坐标)
15.BOM(browserobjectoudle)浏览器对象
一、浏览器本身自己就有一些对象,不用创建就可以使用
Window:
当前浏览器窗体的对象
status
opener
closed
方法:
alert()
confirm()(确定与取消返回真假)
setInterval()
动态的效果
clearInterval()
setTimeout()
clearTimeout()
open(”url”,”windowname”,”windowfeature”)弹出新(子)窗体【与链接“_blank”弹出窗体不同】与父窗体有联系
frames多窗口分帧
window下的子对象(成员):
document、frames、location、history、screen…
[window.]成员eg:
document.write()其实是window.Document.write()
prototype框架
对prototype框架的引用的方法:
scriptsrc="
prototype.js"
1)$()函数
$()相当于document.getElem
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Javascript 学习 笔记 他人 建议 前台 脚本
![提示](https://static.bdocx.com/images/bang_tan.gif)