js study.docx
- 文档编号:25258235
- 上传时间:2023-06-06
- 格式:DOCX
- 页数:14
- 大小:1.89MB
js study.docx
《js study.docx》由会员分享,可在线阅读,更多相关《js study.docx(14页珍藏版)》请在冰豆网上搜索。
jsstudy
Js教程
两种插入方式:
直接插入:
Html:
写在js文档里插入:
js:
输出:
需从JavaScript访问HTML元素,使用document.getElementById(id)
document.write()仅仅向文档输出写内容
数据类型:
字符串:
“”或’’
数值数据:
int\float
Boolean
Undefined:
Null
Object:
对象
varperson={firstname:
"Bill",lastname:
"Gates",id:
5566};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
声明变量:
使用var关键词来声明变量,
varcarname=newString;
varx=newNumber;
vary=newBoolean;
varcars=newArray;
varperson=newObject;
varcarname="Volvo";
varname="Gates",age=56,job="CEO";声明可以跨行
varcarname="Volvo";
document.getElementById("demo").innerHTML=carname;
运算符:
+,-,*,/,%(取余),++,--,=,+=,-=,*=,/=,%=
==,===(全等值和类型),!
=,>,<,>=,<=,&&(and),||(or),!
(not)
txt1="Whatavery";
txt2="niceday";
txt3=txt1+txt2;
txt3包含的值是"Whataveryniceday"。
x=5+5;//10
document.write(x);
x="5"+"5";//55
document.write(x);
x=5+"5";//55
document.write(x);
x="5"+5;//55
document.write(x);
规则是:
如果把数字与字符串相加,结果将成为字符串。
条件运算符:
variablename=(condition)?
value1:
value2
分号:
分号用于分隔JavaScript语句
JavaScript代码块
functionmyFunction()
{
document.getElementById("demo").innerHTML="HelloWorld";
document.getElementById("myDIV").innerHTML="Howareyou?
";
}
JavaScript对大小写敏感,JavaScript会忽略多余的空格
对代码行进行折行:
\
document.write("Hello\
World!
");
不过,您不能像这样折行:
document.write\
("HelloWorld!
");
JavaScript对象
person=newObject();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
Javascript函数
条件:
if语句、if...else语句、if...elseif....else语句、switch语句
if(time<20)
{x="Goodday";}
switch(n)
{
case1:
执行代码块1
break;
case2:
执行代码块2
break;
default:
n与case1和case2不同时执行的代码
}
循环:
for(语句1;语句2;语句3)
{被执行的代码块}
语句1,语句2都可以省略
for(vari=0;i>5;i++)
{x=x+"Thenumberis"+i+"
";}
For/In循环:
语句循环遍历对象的属性
varperson={fname:
"John",lname:
"Doe",age:
25};
for(xinperson)
{
txt=txt+person[x];
}
Java标签:
label:
语句
break和continue语句仅仅是能够跳出代码块的语句。
语法
breaklabelname;
continuelabelname;
list:
{
document.write(cars[0]+"
");
document.write(cars[1]+"
");
document.write(cars[2]+"
");
breaklist;
document.write(cars[3]+"
");
document.write(cars[4]+"
");
document.write(cars[5]+"
");
}
try
{//在这里运行代码}
catch(err)
{//在这里处理错误}
functionmyFunction()
{
try
{
varx=document.getElementById("demo").value;
if(x=="")throw"empty";
if(isNaN(x))throw"notanumber";
if(x>10)throw"tohigh";
if(x<5)throw"toolow";
}
catch(err)
{
vary=document.getElementById("mess");
y.innerHTML="Error:
"+err+".";
}
}
Java使用标识
extJS教程
AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),
Ajax的核心是JavaScript对象XmlHttpRequest
Ext.onReady(function(){
Ext.MessageBox.alert("hello","Hello,easyjfopensource")
})
怎么部署工程?
怎么新建JS文件?
底层API(core):
底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。
其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js、Element.js等文件。
控件(widgets)
实用工具(Utils)
//详见PPT
title:
'lyr:
新窗口',//窗口显示名称
width:
300,
height:
140,
collapsible:
true,//是否可折叠
layout:
'column'//布局方式
model:
true,
item:
[]//窗口需要增加的内容
}).show();//
//example5Ext.grid.GridPanel
//HTML文件
//JS
varsm=newExt.grid.CheckboxSelectionModel();
//columnModle表头
varcm=newExt.grid.ColumnModel([
newExt.grid.RowNumberer(),//自动行号
sm,
{header:
'编号',dataIndex:
'id'},
{header:
'姓名',dataIndex:
'sex'},
{header:
'名称',dataIndex:
'name'},
{header:
'描述',dataIndex:
'descn'}
]);
vargrid=newExt.grid.GridPanel({
el:
'grid',//renderTo:
'myPanel'
ds:
ds,//Store数据源
sm:
sm,
cm:
cm,
cm.defaultSortable=true;//为每个列都安上排序
//为单独的列安装排序{header:
'编号',dataIndex:
'id',Sortable:
true},
});
grid.render();
CSS教程
css实现方法有3种:
1.内联式样式表(行样式)2.嵌入式样式表3.引入式样式表
1.内联样式表
relative;border: solid2px#030;width: 800px;height: 400px;margin-top: 80px;margin-left: 50px;"> 内联式样式(行样式即在标签上写上style="")
2.嵌入式样式表
//example2嵌入式样式表
//after,before
--
div{color:
red;font-size=20px;}
-->
...
...
green;font-size: 12px;">
3.选择器
class选择器--样式格式:
.+"自定义名称"+{样式}。
引用的时候class="刚才的自定义名称"--class又叫类,一类,可以被多个标签引用
id选择器--样式格式:
#+"自定义名称"+{样式}。
引用的时候id="刚才的自定义名称"--id是唯一的,一个页面中只能有一个(建议尽量用class)
关联选择器--即有关系的选择器(父子关系,类似于小例子4的父子标记)
组合选择器--把多个标签定义成一个样式,多个标签之间用逗号隔开
伪元素选择器--对同一个标签的不同状态定义的一个选择器,常用的有标记的4种状态,其他的以后遇到了可以XX
a:
link-普通的、未被访问的链接
a:
visited-用户已访问的链接
a:
hover-鼠标指针位于链接的上方
a:
active-链接被点击的时刻
p:
first-line--第一行
p:
first-letter--第一个字母
//example3
body{font-size:
12px;font-family:
Tahoma,"宋体";margin:
0;padding:
0;}//htmlselector
img{border:
nono;}//htmlselector
div{width:
800px;height:
400px;margin-left:
20px;border:
1pxsolid}//solid实线,htmlselector
.btn{font-size=12px;text-align=center;}//classselector
.hong{bachground-color:
#FF0000;}//#RRGGBB,前两位是红色,中间2位是绿色,后两位是蓝色,最小是0,最大是F,
.lv{background-color:
#00FF00;}
.lan{bachground-color:
#0000FF;}
#username{border:
1pxsolid#CCCCCC;color:
#666666;font:
12px/25px"微软雅黑";height:
25px;padding:
02px}//idselector;font-size:
12px;line-height:
25px;padding内边距上下02px
a:
link{font-size:
12px;}//伪函数选择器,普通的、未被访问的链接
a:
hover{font-size:
14px;color:
#FF0000;}//鼠标指针位于链接的上方
.btnp{font-size:
16px;color:
#990000}/*关联选择器btn下的p标签字体大小16px,颜色#990000*/
.zuhe1,.zuhe2{font-size:
20px;color:
#FF00FF}/*组合选择器--注意他跟关联选择器的区别是中间的逗号*/