JavaScriptWord文档下载推荐.docx
- 文档编号:4697606
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:24
- 大小:22.42KB
JavaScriptWord文档下载推荐.docx
《JavaScriptWord文档下载推荐.docx》由会员分享,可在线阅读,更多相关《JavaScriptWord文档下载推荐.docx(24页珍藏版)》请在冰点文库上搜索。
例如:
varwidth;
width=5;
在这里,var是用于声明变量的关键字,width是变量名
方式二:
同时声明和赋值变量。
varcatName="
皮皮"
;
varx,y,z=10;
方式三:
不声明直接赋值。
width=5;
总结:
变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用。
数据类型
undifined
例:
变量width没有初始值,将被赋予值undefined
null
表示一个空值,与undefined相等
Number
variNum=23;
//整数
variNum=23.4;
//浮点数
boolean
true和false
string
一组被引号(单引号或双引号)括起来的文本。
varstring1="
Thisisastring"
typeof运算符
typeof检测变量的返回值
type运算符返回值如下:
1.undefined:
变量被声明后,但未被赋值
2.string:
用单引号或双引号来声明的字符串
3.boolean:
true或false
4.number:
整数或者浮点数
5.object:
JavaScript中的对象、数组、和null
运算符号
算术运算符:
+-*/%++--
赋值运算符:
=
比较运算符:
=<
===!
逻辑运算符:
&
||!
JavaScript的逻辑控制语句
if...else条件语句
switch多分支语句
for循环语句
while循环语句
使用break进行循环中断
注释
单行注释以//开始,以行末结束。
多行注释以/*开始,以*/开始,符号/*......*/指示中间的语句是该程序中的注释。
常用的输入输出
1.alert()
alert("
2.prompt()
prompt("
提示信息"
"
输入框的默认信息"
请输入姓名"
张三"
语法约定
1.代码区分大小写
1.1javascript的关键字,例如for和if,永远都是小写
1.2内置对象,例如Math和Date是以大写字母开头
1.3DOM对象的名称通常是小写,但是方法名采用驼峰命名法
2.变量、对象和函数的名称
1名称可以包含大小写英文字母,数字,下划线,和美元符号
JavaScript和java的区别
变量声明:
java需要制定数据类型,JavaScript是弱变量,使用var声明
数据类型:
数据类型不同,JavaScript使用number
运算符:
相同
条件结构:
循环结构:
java的foreach循环用于遍历集合元素,格式为for(变量:
集合){...}。
而JavaScript格式为:
for(变量in对象){...},用于遍历数组或对象的属性
JavaScript函数
函数的含义:
类似于java中的方法,是完成特定任务的代码语句块。
使用更简单,不用定义属于某个类,直接使用
函数的分类:
系统函数,自定义函数(有参函数、无参函数、参数的调用)
常用的系统函数
parseInt():
将字符串转换为整型数字,例如:
parseInt("
86"
)将字符串"
转换为整型值86
parseFloat():
将字符串转换为浮点型,如:
parseFloat(“23.33”)将字符串转换为浮点值23.33
isNaN():
判断非数组,如varstr=isNaN("
123"
将返回false
eval():
计算表达式的值,例如,eval("
2+2”);
返回4
自定义函数
创建函数:
无参函数:
functionname(){
//javascript代码;
}
有参函数:
functionname(参数1,参数2,参数3,...){
调用函数
方法一:
函数调用一般和表单元素的时间一起使用,例:
事件名=函数名()
oncllick="
函数名()"
方法二:
直接使用函数名(传递的实参值)例如:
varresult=add(2,3);
程序调试
1.alert方法
2.IE开发人员工具:
单步进入、单步跳过、单步退出
BOM(浏览器对象模型)
1.BOM是BrowserObjectModel的缩写,简称浏览器对象模型
2.BOM提供了独立于内容而与浏览器窗口进行交互的对象
3.由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是Windows
4.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
Window对象
Window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window的子对象
由于window对象表示当前窗口对象,是一个全局对象。
JavaScript中的任何一个全局函数或变量都是window的属性
window对象的常用属性
screen:
有关客户端的屏幕和显示性能的信息
history:
有关客户访问过的url的信息
location:
记录当前URL的信息
prompt:
显示可提示用户输入的对话框
alert:
显示带有一个提示信息和一个确定按钮的警示框
confirm:
显示一个带有提示信息、确定和取消按钮的对话框
close:
关闭浏览器窗口
open:
打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout:
在指定毫秒数后调用函数或计算表达式
setInterval:
按照指定的周期(以毫秒计)来调用函数或表达式
关闭浏览器窗口:
functionclose1(){
window.close();
打开一个新的窗口:
functionopenWindow(){
window.open("
'
'
width=1200px,height=400px,menubar=1;
JavaScript的Date可以用来获取系统时间(完整实例):
time<
--显示系统时间-->
divid="
timeDiv"
显示系统时间<
/div>
//获得年月日,时分秒
functionshijian(){
vardate=newDate();
//获得年份
varyear=date.getFullYear();
//获得月份
varmonth=date.getMonth()+1;
//获得日子
varday=date.getDate();
//获得小时
varhour=date.getHours();
//获得分钟
varmin=date.getMinutes();
//获得秒
varsec=date.getSeconds();
vartime=year+"
年"
+month+"
月"
+day+"
日"
+hour+"
:
+min+"
+sec;
//获得DIV对象
vardiv=document.getElementById("
//div调用属性
div.innerHTML=time;
shijian();
运行效果为:
2018年4月16日19:
52:
56
innerHTML与innerText的区别:
div.innerHTML="
aaaaaa<
//可以解析<
标签
div.innerText="
//当成字符串
JavaScript在网页中动态显示时间
可通过
window.setInterval('
displayTime()'
1000);
每隔1s调用一次displayTime()方法,达到时间动态显示的效果
方法的递归调用
setTimeout('
通过setTimeout方法,1s调用一次本方法,自己调用自己成为方法的递归
操纵HTML属性
操纵属性<
spanid="
my_span"
span的内容<
/span>
div>
看书<
checkbox"
love"
看书"
写字<
写字"
上网<
上网"
p>
11<
/p>
//dom对象获得标签
varsp=document.getElementById("
sp.innerText="
hahah"
//更改值
sp.style.backgroundColor="
blue"
//背景颜色
//得到对象数组
varcks=document.getElementsByName("
//cks[0].value通过下标取值
//cks.item(0).value
document.write(cks.length+"
+cks[0].value+"
+cks.item(0).value);
//通过标签名称得到对象数组
varbiaoqian=document.getElementsByTagName("
p"
document.write(biaoqian);
JavaScript循环获取属性,改变属性值,达到全选与取消全选的操作:
全选
id="
all"
onchange="
sel()"
br/>
hobby"
11
22
33
44
55
66
functionsel(){
varall=document.getElementById("
//获得5个复选框对象
//复选框被选中返回true
varresult=all.checked;
if(result==true){
//循环cks数组
for(vari=0;
i<
cks.length;
i++){
//全部选中
cks.item(i).checked=true;
}else{
//全不选
=cks.length;
cks.item(i).checked=false;
}
JavaScript实现表单的删除、新增、改变标题操作
JS实现功能<
styletype="
text/css"
.title{
font-size:
30px;
background-color:
#cccccc;
/style>
divstyle="
float:
left;
tableborder="
2px"
cellspacing="
0"
cellpadding="
width="
400px"
height="
100px"
mt"
tr>
th>
姓名<
/th>
年龄<
/tr>
小黄<
40<
小邱<
64<
小董<
/table>
buttononclick="
add()"
添加一行<
/button>
del()"
删除一行<
update()"
修改标题<
--添加JS代码-->
//获得表格对象
vartable=document.getElementById("
//添加一行操作
functionadd(){
//添加一行
varnewTr=table.insertRow();
//设置内容居中
newTr.align="
center"
//newTr.style.backgroundColor='
blue'
newTr.style.fontWeight='
bold'
//添加单元格td
vartd1=newTr.insertCell();
vartd2=newTr.insertCell();
//给单元格添加内容
td1.innerText="
小黑"
td2.innerText=22;
//删除一行操作
functiondel(){
//获得表格的行数
varlen=table.rows.length;
//删除行(每次删除最后一行)
table.deleteRow(len-1);
//修改标题
functionupdate(){
//修改表格中的第一行
varfisrtRow=table.rows[0];
//tr
fisrtRow.className='
title'
JavaScript横向菜单,达到移动到菜单位置改变其背景颜色
横向菜单<
ulli{
list-style:
none;
float:
margin:
20px;
color:
#FFFFFF;
width:
80px;
height:
text-align:
center;
font-weight:
bold;
18px;
ul>
li>
首页<
/li>
电视剧<
电影<
综艺<
公开课<
/ul>
//返回所有li标签对象
varlis=document.getElementsByTagName("
li"
//得到每一个li对象
i<
lis.length;
//鼠标放上触发一个时间onmouseover
lis.item(i).onmouseover=function(){
//给每个li添加一个背景颜色
this.style.backgroundColor='
red'
//光标移开
lis.item(i).onmouseout=function(){
#cccccc'
下拉列表框对象,实现省市级联列表
下拉列表框对象<
select{
300px;
16px;
--下拉列表-->
selectid="
pro"
getCity()"
optionvalue="
河北"
河北<
/option>
河南"
河南<
广西"
广西<
山东"
山东<
/select>
--城市列表-->
city"
//获得省的对象
varpro=document.getElementById("
//城市列表对象
varcity=document.getElementById("
//获得具体的城市信息
functiongetCity(){
//得到具体省的信息
varproValue=pro.value;
city.options.length=0;
if('
河南'
==proValue){
//向城市下拉列表中添加信息
city.add(newOption('
郑州市'
郑州'
));
商丘市'
商丘'
信阳市'
信阳'
周口市'
周口'
}elseif('
河北'
==proValue){
石家庄市'
石家庄'
保定市'
保定'
张家口市'
张家口'
秦皇岛市'
秦皇岛'
广西'
百色市'
百色'
桂林市'
桂林'
玉林市'
玉林'
山东'
济南市'
济南'
青岛市'
青岛'
潍坊市'
潍坊'
烟台市'
烟台'
数组
取值:
alert(arr[0]+arr[1]+arr[2]);
排序:
arr.sort();
for(vari=0;
arr.length;
document.write(arr[i]);
添加分隔符:
vara=arr.join("
/"
a.length;
document.write(a[i]);
}
复杂的省市级联列表
复杂省市级联<
--省的下拉列表-->
option>
请选择省<
--城
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript