<!--[if !mso]> <style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]-->
<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]--><!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1031"/> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1"/> </o:shapelayout></xml><![endif]-->
l JavaScript和Java一样存在两种数据类型
• 原始值 (存储在栈Stack中简单数据)
• 引用值 (存储在堆heap中对象)
l 5种原始数据类型
• Undefined、Null、Boolean、Number 和 String
• JavaScript中字符串是原始数据类型
l 通过typeof运算符,查看变量类型
l Instanceof查看变量是否属于对象实例
• 所有引用类型都是object
l 通过instanceof 运算符解决typeof对象类型判断问题
l 区分 undefined 和 null
• 变量定义了未初始化 --- undefined
• 访问的对象不存在 --- null
l String对象 ----- 字符串类型的引用类型
• var s = new String("itcast");==比较值
l Number对象 ---- 数字原始类型引用类型
• var n = new Number(100);
l Boolean对象 ---- 布尔原始类型引用类型
• var b = new Boolean(true);
l Math对象 执行数学任务
l Date对象 用于处理日期和时间
l Array对象 数组对象,进行数组操作
JS
l 方式一
function add(a,b){
return a + b;
}
函数无需定义返回值,可以直接返回
l 方式二
• var add = function(a,b){return a+b;}
l 方式三
• var add=new Function('a','b','return a+b;‘);
方法的最后一个参数是函数体,之前是可变参数
l 方式一
function add(a,b){
return a + b;
}
函数无需定义返回值,可以直接返回
l 方式二
• var add = function(a,b){return a+b;}
l 方式三
• var add=new Function('a','b','return a+b;‘);
方法的最后一个参数是函数体,之前是可变参数
编解码相关的内部函数:
l encodeURI / decodeURI 编解码URI
• 进行url跳转时可以整体使用encodeURI 对地址进行编码
l encodeURIComponent / decodeURIComponent 编解码URI组件
• 传递参数时需要使用encodeURIComponent
l escape / unescape 对字符串进行unicode编码
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z
encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z
其它内部函数:
l isNaN 检查某个值是否为数字
l parseInt / parseFloat 解析字符串为整数 / 浮点数
l eval 计算javascript 字符串,并把它作为脚本代码来执行
定义对象
javaScript中所有对象都是Object实例
var person = new Object();
JavaScript对象 实际上是一个key:value 集合结构
person.name = “小丽”; // 定义属性
person.setName = function(name) { // 定义方法
this.name = name;
}
也可以使用 { } 来直接 JavaScript对象
var company = {
name : "中国银行",
getName : function(){
alert(this.name);
}
};
company.getName();
类定义
l function可以JavaScript函数,也可以定义JavaScript类结构
var Person = function(name,age){ // 构造函数
this.name = name;
this.age = age;
this.setName = function(name){
this.name = name;
};
this.getName = function(){
return this.name;
};
}
var p = new Person("小丽",18);
p.setName("小明");
alert(p.getName());
alert(p.age);
函数就是一个类:
function add(a,b){
return a+b;
}
var o=new add();
o.name='小李';
o.print=function(){
alert(o.name);
}
o.print()
修改类原型
l 通过function对象prototype属性添加类原型的属性和方法
var Car = function(){
}
var car1 = new Car();
// 通过function对象 prototype属性
// 去定义类模板原型中属性和方法
Car.prototype.name = "保时捷";
var car2 = new Car();
alert(car1.name);
car2.name = "宝马";
alert(car1.name);
var arr=new Array(25,3,18);
arr.sort();
Array.prototype.mysort=function(){
for(var i=0;i<this.length-1;i++)
{
for(var j=i+1;j<this.length;j++){
if(this[i]>this[j])
{
var temp=this[i];
this[i]=this[j];
this[j]=temp;
}
}
}
}
arr.mysort();
alert(arr);
Javascript单继承
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {
}
//B和A有一样的效果
ClassB.prototype = new ClassA();
ClassB.prototype.sayColor=function(){
alert(‘red’);
}
var b=new ClassB();
JS多继承
function A(){
this.showinfo = function(){
alert("A的信息");
}
}
function B() {
this.printMsg = function(){
alert("B的信息");
}
}
function C(){
// 继承A
this.newMethod = A;
this.newMethod();
delete this.newMethod;
// 继承B
this.newMethod = B;
this.newMethod();
delete this.newMethod;
// 新加的方法
this.companyinfo = function(){
alert("c的信息");
}
}
var o=new C();
o.showinfo();
o.printMsg();
o.companyinfo();
BOM
l DOM Window 当前浏览器窗口
l DOM Navigator 浏览器类型
l DOM Screen 当前屏幕
l DOM History 浏览器历史记录
l DOM Location浏览器导航栏
1.Window
l Window 对象表示浏览器中打开的窗口
l 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象
父操作子
window.frames 返回窗口中所有命名的框架
<script type="text/javascript">
function jump(){
window.frames[0].location.href="http://www.baidu.com"
}
</script>
</head>
<body>
主页面
<input type="button" value="跳转" onclick="jump()" />
<iframe src="2.html"></iframe>
</body>
子操作父
Window.parent得到父对象
window.parent.document.getElementById("msg").value=company
l parent是父窗口(如果窗口是顶级窗口,那么parent==self==top)
l top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)
l self是当前窗口(等价window)
l opener是用open方法打开当前窗口的那个窗口
案例二:通过open和close 控制窗体打开和关闭 3.html
***** window对象 BOM模型中顶级对象,所有方法、属性调用省略 window.
Bom/3.html
案例三:opener使用,如果A窗口打开B窗口,在B窗口中 window.opener 获得 A窗口 window对象 4.html 5.html
使用 window. showModalDialog() 重写案例三 6.html 7.html
Js window.showModalDialog()方的使用简介
a.url: 弹出窗口指向哪一个页面
b.varArgIn: 向弹出页面传递的参数
写法如下:
window.showModalDialog("openner3.htm",tableObj);
2.在父页面中,如何制定所需传递的常数
在Js中,定义一个类是很简单的(类的写法,不过感觉像是个HashMap),定义方法如下
//定义一个超级对象
var tableObj = new Object();
//下面的写法就是自定义属性了,"tableObj."后面的属性名可以随便写,感觉有点像key值
//"="后面的是属性值,也是什么都行,感觉有点像value值
tableObj.table = window.document.getElementById("myTable");
tableObj.userName = window.document.getElementById("txtUserName").value;
//模拟调用一下
var tempObj = tableObj;
//在这里,"."后的属性名与之前对象定义的属性名一直就Ok了,感觉像通过key值取value值
//"tempObj.table.tagName"之所以这样写是因为"tempObj.table"是指向了id为"myTable"的一个Table对象,所以可以调用这个对象的"tagName"属性来查看其是什么元素
alert(tempObj.table.tagName);
alert(tempObj.userName);
3.在子页面中如何接收来自父页面的参数
调用下面的方法即可:
var comeFromFatherPageObj = window.dialogArguments;
4.子页面向父页面传递返回值(当子页面即将关闭时)
写法如下:
//首先在父页面调用window.showModalDialog()方法的时候做些操作,如下:
objReturnValue = window.showModalDialog("openner3.htm",tableObj);
//然后再子页面,即将关闭的时候加一句话,如下:
window.returnValue = "asdad";//可以是任何东西
window.close();
三种常用函数
window.alert(String)
Boolean window.confirm(String)
String window.prompt(String)
l setTimeout(code,millisec)
• code 要调用的函数后要执行的 JavaScript 代码串
• millisec 在执行代码前需等待的毫秒数
eg:setTimeout(“showtime()”,1000)
广告漂浮
<head>
<script language=JavaScript>
function move()
{
document.getElementById("layer1").style.left= Math.random()*500;
document.getElementById("layer1").style.top= Math.random()*500;
setTimeout("move()",1000);
}
</script>
</head>
<body onload="move();">
<div id="layer1" style="position:absolute;">
<a href="http://www.itcast.cn">
<img src="piaofu.jpg" width="150" height="100" border="0"></a>
</div>
<h2>随机漂浮的广告</h2>
</body>
其它浏览器对象:
l DOM History
• History 对象包含用户(在浏览器窗口中)访问过的 URL
• back() 加载 history 列表中的前一个 URL
• forward() 加载 history 列表中的下一个 URL
• go() 加载 history 列表中的某个具体页面
• 练习:返回按钮制作
DOM
nodeName |
String |
节点的名字;根据节点的类型而定义 |
nodeValue |
String |
节点的值;根据节点的类型而定义 |
nodeType |
Number |
节点的类型常量值之一 |
ownerDocument |
Document |
指向这个节点所属的文档 |
firstChild |
Node |
指向在childNodes列表中的第一个节点 |
lastChild |
Node |
指向在childNodes列表中的最后一个节点 |
childNodes |
NodeList |
所有子节点的列表 |
parentNode |
Node |
返回一个给定节点的父节点。 |
previousSibling |
Node |
指向前一个兄弟节点;如果这个节点就是第一个兄弟节 点,那么该值为null |
nextSibling |
Node |
指向后一个兄弟节点;如果这个节点就是最后一个兄弟节 点,那么该值为null |
hasChildNodes() |
Boolean |
当childNodes包含一个或多个节点时,返回真 |
attributes |
NamedNodeMap |
包含了代表一个元素的特性的Attr对象;仅用于Element节点 |
appendChild(node) |
Node |
将node添加到childNodes的末尾 |
removeChild(node) |
Node |
从childNodes中删除node |
replaceChild |
Node |
将childNodes中的oldnode替换成newnode |
insertBefore |
Node |
在childNodes中的refnode之前插入newnode |
l nodeName
• 如果节点是元素节点,nodeName返回这个元素的名称
• 如果是属性节点,nodeName返回这个属性的名称
• 如果是文本节点,nodeName返回一个内容为#text 的字符串
l nodeType
• Node.ELEMENT_NODE ---1 -- 元素节点
• Node.ATTRIBUTE_NODE ---2 -- 属性节点
• Node.TEXT_NODE ---3 -- 文本节点
l nodeValue
• 如果给定节点是一个属性节点,返回值是这个属性的值
• 如果给定节点是一个文本节点,返回值是这个文本节点内容
• 如果给定节点是一个元素节点,返回值是 null
Document常用对象方法
l 每个载入浏览器的 HTML 文档都会成为 Document 对象
l 常用属性
all[] 提供对文档中所有 HTML 元素的访问
forms[]返回对文档中所有 Form 对象引用
body 提供对 <body> 元素的直接访问
l 常用方法
• getElementById()返回对拥有指定 id 的第一个对象的引用
• getElementsByName()返回带有指定名称的对象集合
• getElementsByTagName()返回带有指定标签名的对象集合
• write()向文档写 HTML 表达式或 JavaScript 代码
相关推荐
【标题】:“day01基础WEB” 在计算机科学领域,Web开发是构建和维护Web应用程序的过程,它使得用户可以通过互联网进行交互。"day01基础WEB"可能是一个学习系列的第一部分,专注于介绍Web开发的基本概念和技术。这...
day04_javascript加强 day05xml day06xml day07_tomcat服务器 day08_http协议 day09_servlet编程 day10_会话管理 day11_jsp基础 day12_jsp加强 day13_自定义标签&编码实战 day14_mysql基础 day15_mysql...
了解DOM(文档对象模型)操作、事件监听和AJAX(异步JavaScript和XML)是JavaScript编程的基础。 5. **前端框架**: 如Bootstrap、Vue.js、React.js和Angular等,它们提供了预设的样式、组件和工具,简化开发流程,...
最后,"JavaWeb视频教程_day1-资料源码"这部分内容可能涉及了如何将JavaScript与JavaWeb技术结合,例如AJAX(异步JavaScript和XML)用于前后端数据交换,使用JSON(JavaScript Object Notation)作为数据格式,或者...
Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这个"很实用的Ajax例子"应该包含了一些基础到进阶的Ajax应用示例,非常适合初学者学习和理解Ajax的工作...
同时,JavaScript还可以实现页面的动画效果,增强视觉吸引力。 HTML是构成网页的基础,它定义了网页的结构。在购物商城系统中,HTML页面与CSS(Cascading Style Sheets)结合,用于展示商品列表、详情页、购物车、...
Ajax examples using ColdFusion MX, SQL Server, SOAP: Contact Manager, NOAA 7 Day Forecast code and demos. - **技术栈**:使用ColdFusion MX、SQL Server和SOAP服务。 - **核心功能**: - 联系人管理器:...
综上所述,"JavaWeb视频教程_day2-资料源码"的压缩包内容可能涵盖了JavaScript的基础知识、DOM操作、AJAX、JSON、jQuery、ES6新特性以及JavaScript在服务器端的应用等方面,为学习者提供了一套全面的JavaWeb开发中的...
而JavaScript是一种广泛用于客户端Web开发的脚本语言,它可以实现动态内容、交互式用户界面和Ajax(异步JavaScript和XML)技术,极大地增强了网页的用户体验。 在压缩包内的"03day练习"文件可能包含了多个HTML文件...
JavaScript还提供了AJAX(异步JavaScript和XML),使得网页可以无需刷新就能与服务器进行数据交换。`day4_6.html`和`day4_9.html`可能涉及了AJAX的使用,包括创建XMLHttpRequest对象、发送HTTP请求以及处理响应数据...
- AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它使用JavaScript向服务器请求数据,而无需重新加载整个页面。 - **Ajax请求参数**包括: - `contentType`:设置请求内容类型。 - ...
尽管实际的教程可能只涵盖了13天的内容,但“jQuery Day 15”仍然能为你提供丰富的学习资源和实践机会,进一步提升你在JavaScript和jQuery方面的技能。记住,实践是最好的老师,通过动手实践这些知识点,你会更加...
5. **JSON的省市联动**:JSON是一种轻量级的数据交换格式,这里可能讲解了如何利用JSON实现省市联动下拉框,这是前端交互中常见的功能,涉及到Ajax异步请求和JavaScript的DOM操作。 6. **源代码和资源文件**:"day...
在实际项目中,为了提高用户体验,我们还可以添加一些额外的功能,如使用AJAX异步加载数据,或者使用更现代的库如jQuery、Vue.js等来简化代码和增强可维护性。此外,对于移动设备,可能还需要考虑触摸事件的支持和...
可能涉及HTML、CSS和JavaScript的基础知识,以及如何利用AJAX实现异步数据交互。 9. **部署与运行**:最后,崔希凡还会讲解如何将完成的项目打包成WAR文件,部署到Tomcat这样的应用服务器上,以及如何进行测试和...
开发者可以查看.js文件来学习如何利用AJAX与服务器进行异步通信,以及如何用JavaScript进行前端页面的动态操作。 **MySQL**:MySQL是一款广泛使用的开源关系型数据库管理系统。在购物商城项目中,MySQL用于存储商品...
这可能涉及到使用JavaScript库,如jQuery UI的Datepicker插件,或者更现代的解决方案,如Moment.js或Day.js来处理日期和时间。这些库提供了丰富的API,可以定制日期选择器的样式、日期格式、禁用日期等。 在ASP.NET...
JavaScript,简称JS,由网景公司的Brendan Eich在1995年发明,起初是为了增强网页的交互性。它是一种轻量级、解释型的动态类型语言,广泛用于客户端的网页脚本,但如今也通过Node.js在服务器端得到了广泛应用。 在...
在JavaScript中,AJAX(Asynchronous JavaScript and XML)技术实现了网页的异步更新,使得页面无需刷新即可获取新数据。如今,XML已被JSON(JavaScript Object Notation)取代,因为JSON更简洁且与JavaScript语法...
在这个项目中,你还可以学习到如何通过AJAX或现代的Fetch API获取远程数据,如从API接口获取神奇宝贝的图片和信息,进一步增强用户体验。同时,你还可以利用CSS预处理器(如Sass或Less)和模块化工具(如Webpack或...