Javascript简介_第1页
Javascript简介_第2页
Javascript简介_第3页
Javascript简介_第4页
Javascript简介_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Javascript1. Javascript 简介 * Javascript 是基于对象和事件驱动的脚本语言,主要应用在客户端.-基于对象 : * 提供好了很多对象,可以直接拿过来使用 不需要new. -事件驱动 :* html做网站静态效果,javascript动态效果. - 客户端 : 专门指的是浏览器.* js特点:(1) 交互性 : 信息动态交互(2) 安全性 : js不能访问本地磁盘文件(3) 跨平台性:-java 跨平台性 ,虚拟机- 只有能够支持js的浏览器,都可以运行.* javascript 和java的区别 (老婆 和老婆饼)(1) java sun 公司 ,现在是ora

2、cle; js 是网景公司(2) Javascript 是基于对象 的, java是面向对象(3) Java是强类型的语言 , js 是 弱类型的语言.-js: var int i= "123" (4) Javascript 只需解析就可以执行,而java 需要先编译成字节码文件,在执行.2. 1 Javascript 的组成三部分组成(1) ECMAScript-ECMA :欧洲计算机协会- 由ECMA 组织 制定的js语法, 语句.(2) BOM- broswer object model : 浏览器对象模型- 浏览器中 对象 (3) DOM- document obj

3、ect model : 文档对象模型- 文档内容进行操作2.2 js和html的结合方式 (两种) (1) 使用标签 :<script type="text/javascript"> js代码 alert("aaaa") </script>(2) 使用script标签,引入一个外部的js文件.* 创建一个js文件,写js代码. * 引入外部文件 :<script type="text/javascript" src="1.js"> </script>在使用第二种方式时

4、,就不要在 script标签中写js代码 , 不会执行2.3 js的原始类型和声明变量* java的基本数据类型(8种) :byte short int long float double char boolean* 定义变量都是用关键字 var* Js 的原始类型 (5种)- string 字符串* var str="abc"-number数字类型* var m= 123;-boolean true 和 false* var flag = true;-null* var date = new Date(); /获取对象的引用,null 表示对象引用为空,所有对象的引用也是

5、object.- undifined* 定义一个变量,没有赋值.* var aaa; * typeof() 查看当前对象类型 alert(typeof(变量);2.4 js的语句- java中的语句:* If 判断* switch语句* 循环 for while do-while - js 中 的语句* if判断语句var a = 5;If (a = 5 )alert("sss") * switch 语句:var b=5 ;switch(b)case 4:alert("4");break;case 5:alert("5")break;

6、default :alert("other");break; * while 循环var i = 5;while (i>1)alert(i);i-; * for 循环* java 中 for (int i=0; i<=5 ;i +)* js 中 for ( var i=0; i<=5 ;i +)2.5 js 的 运算符* +=: x+=y - x= x+y;var j= 123;alert(j/1000*1000) /java中得到结果为0;/js 中得到 结果为 123.在js 中不区分整数 小数.* 字符串的相加和相减 的操作* 相加时 做字符串连接

7、, 相减做减法运算var str="123"alert(str+1) / 与 java中相同 ,显示 1231alert(str-1) / 相减时 执行减法运算var str="abc"alert(str-1) / 提示NaN 表示不是个数字 * 布尔类型相加相减操作 var flag=true; / 设置为 true 相当于赋值为1alert(flag+1) ; alert(flag-1) ;var flag1=false;/设置为false 相当于赋值为0alert(flag+1) ;alert(flag-1) ; * = 和 = 区别var i=

8、"5"if(i=5)alert("5")elsealert("other") / 弹出alert= 比较 值, = 比较 值 和数据类型 向页面输出语句(写html代码) * document.write("<a href=''>") ; document.write("百度一下") ; document.write("</a>") ; 作业: js实现99乘法表2.6 js的数组 *什么是数组?-java 里 数组的 定义 int a

9、rr = 1,2,3; * 定义方式(三种)JS 数组可以存放不同类型数据(1) var arr = 1,2,3; var arr = 1,"2",true ;(2) 使用内置对象 Array 对象 var arr1 = new Array(5); /定义一个数组,数组的长度是5arr10 = "1"(3) 使用内置对象 Array Var arr2 = new Array (3,4,5); / 定义数组 内容 * 数组里有一个属性 教 length :可以获取 数组长度.2.7 js 的函数(方法)* 在 java里面定义方法 public 返回类型

10、void /int 方法名(参数列表)方法体;返回值;* 在JS 中定义 函数(方法) 有三种方式:(1) 使用关键字 function : Function 方法名 (参数列表)方法体;返回值可有可无; function test ()alert("ok"); test();/定义一个有参数的方法,实现两个数相加 function sum(a,b)var sum = a + b;alert(sum); sum(1,2); /有返回值的效果function test (a,b,c)var sum = a+b+c;return sum;alert( test(1,2,3);(

11、2) 匿名函数 var add =function (参数列表) 方法体;返回值; var add = function (a,b)alert(a+b);add(3,4); (3) 一般不用2.8 js 的全局变量 和局部变量* 全局变量 : 在script标签里面定义一个变量,这个变量在页面中 js部分都可以使用- 在方法外部使用,在方法内部使用,在另一个script标签使用.<script type="text/javascript"> var aa = 10 ; alert ("方法外部调用:"+aa);function test ()

12、alert("方法内部调用:"+aa) test();</script><script type="text/javascript"> alert ("在另一个script 标签使用:"+aa);</script>* 局部变量 : 在方法内部定义一个变量, 只能在方法内部使用- 如果在方法外部调用变量 ,提示出错 aa 未定义function test ()var aa= 10 ; test(aa);2.9 js标签的位置<script type="text/javascript&q

13、uot;> var ss = document.getElementById("test");alert(ss.value);</script></head> <body><input id="test" name="test" type="text" value="aa" > </body>* html 是从上到下解析,建议把 script标签放到 </body> 后面 .2.10 js的重载3.1 js 的Stri

14、ng 对象* 创建String对象 - var str ="abc" ; * 方法和属性(文档)* 属性 length : 字符串的长度var str = "hello word!"document.write(str.length);* 方法 (1) 与html相关的方法-bold() :加粗var str = "hello word!"document.write(str.bold();(2) 与java相似的方法- charAt() : 返回指定位置的字符串;var str = "abcdefg"docume

15、nt.write(str.charAt(1);- indexOf() : 返回某个指定的字符串值在字符串中首次出现的位置.var str = "abcdefg"document.write(str.indexOf("w"); - split() : 切分字符串,成数组.var str = "a-b-c-d-e-f-g"var arr= str.split("-");document.write(arr.length); - replace() : 替换字符串.* 传递两个参数:- 第一个参数 :原始字符串- 第二个

16、参数 : 替换字符串var str = "hello word!"var str1 = str.replace(/o/g,"0");document.write(str1); - substr() : 从第几位开始,向后截取 几位var str = "hello word!"document.write(str.substr(2,3); 显示 llo3.2 js Date 对象* js 获取当前时间var date = new Date(); 转换成习惯格式var date = new Date();alert(date.toLoca

17、leString();* 获取当前年的方法var date = new Date(); alert(date.getFullYear();* 获取当前月方法 ,返回(0 11);var date = new Date(); alert(date.getMonth()+1);* 获取当前的星期getDay() : 星期返回的是( 0 6); * 获取当前日 .返回(1 31);var date = new Date();alert(date.getDate();* 获取当前 小时getHours()var date = new Date();alert(date.getHours(); * 获取

18、当前分钟 getMinutes() ;* 获取当前 秒getSeconds();* 获取1970年至今毫秒数var date = new Date();alert(date.getTime();3.3 js 的 Math 对象 (数学运算) 对象里 都是静态方法, 使用可以直接使用 Math.* ceil(x) : 对数进行上舍入。var a= 10.2;document.write(Math.ceil(a); * floor(x) : 对数进行下舍入。document.write(Math.floor(a); * round(x):把数四舍五入为最接近的整数。document.write(M

19、ath.round(a);* random() :返回 0 1 之间的随机数。- 得到 0 - 9 的随机数document.write(Math.floor(Math.random()*10);3.4 js 的全局函数* 由于不属于任何对象, 直接写名称使用* eval() : 执行 js代码(如果字符串是一个js代码,使用方法直接执行).var str= "alert('1234')"eval(str);* encodeURI() : 对字符串进行编码* decodeURI() : 对字符串进行解码var str= "中文测试 abcdef&q

20、uot;var ec= encodeURI(str)document.write(ec+"<br/document.write(ec);>");var dc= decodeURI(ec);document.write(dc); * isNaN () : 判断是否是 数字;不是 数字返回 true 是数字 返回 flase;var str = "asda"alert(isNaN(str); * parseInt() : 解析一个字符串返回一个整数. 类型转换var str = "123"alert(parseInt(str)

21、+1);3.5 js 的bom对象* bom : broswer object model : 浏览器对象模型 .* 有哪些对象?*navigator 获取浏览器信息alert(navigator.appName);* screen 获取屏幕信息alert(screen.height+"="+screen.width)* location 获取请求url地址alert(location.href)设置url 地址- 页面上安置一个按钮 , 按钮上绑定一个事件 当我点击这个按钮,页面可以跳转到另外一个页面.<body><input type="bu

22、tton" value="跳转" onclick="change()"> </body> <script type="text/javascript">function change()location.href=""</script>* history 请求的url 历史记录 * window (重点)* 窗口对象* 顶层对象(所有的bom对象都是在window里面操作的)* 方法:- widow.alert() : 页面弹出 提示框- confirm() :

23、确认框function del()var flag = window.confirm("显示内容");alert(flag);- prompt() : 输入的对话框 mpt("请填写",0);- open() : 打开一个新的窗口window.open("打开的新窗口的地址","","窗口的特征,宽度和高度"); window.open("","","width=200,height=100"); - close()

24、 : 关闭窗口 (浏览器兼容性差)window.close();- 做定时器-setInterval() : 方法可按照指定的周期(毫秒计)调用函数或计算表达式window.setInterval("js代码","毫秒数") 1秒=1000毫秒window.setInterval("alert('123')",3000) ;/表示 每三秒 弹出一次 123.-setTimeout() : 在指定的毫秒数后调用函数或计算表达式。只执行一次 window.setTimeout("alert('123

25、9;)",3000) ; / 三秒后 弹出123-clearlnterval() : 清除 setInterval 设置的定时器 setInterval 有一个返回值.var id= window.setInterval("alert('123')",2000) ;function stop()window.clearInterval(id); -clearTimeout(): 清除 setTimeout() 设置的定时器 (同上)3.6 js 的dom 对象* dom : document object model : 文档对象模型* 文档: 超

26、文本标记文档 (html) . xml* 对象: 提供了 属性和 方法* 模型: 使用属性和方法 操作 超文本标记型文档* 可以使用js 里面的dom 提供的对象,使用这些对象的属性和方法,对标记型文档进行操作.* 想要对标记型文档进行操作 , 首先需要对标记型文档里面的所有内容封装成对象.* 要想对标记型文档进行操作,解析标记型文档 - 如何使用 dom 解析标记型文档* 根据html 层级结构,在内存中 分配树形结构 把html中的每部分都封装成对象 .-decument 对象: 整个文档.-element : 标签对象- 属性对象- 文本对象- Node 节点对象 : 这是对象是这些对象

27、的父对象* 如果在对象里面找不到想要的方法, 这个时候到Node 对象里面去找.Node 接口 的特性和方法特性/方法 类型返回类型 说明四种语言的职责:Html : 负责提供标签,封装数据,这样便于操作数据.CSS : 负责提供样式,对标签中的数据进行样式定义.使用属性和 属性值设置样式.Dom : 负责将标签及其内容解析,封装成对象,对象中具有属性和行为.操作html文档Javascript : 负责提供程序设计语言 , 对页面中的对象进行逻辑操作. 专门治的是 js 的语法语句(ECMAScript).3.7 Document 对象* Document : 每个载入浏览器的HTML 文档

28、都会成为 Document 对象,获得整个文档.* 常用方法:* write () 方法:(1) 箱页面输出 变量 (值)(2) 向页面输出 html 代码.var str = "avc"document.write(str);document.write("<hr/>") * getElementById() - 通过id 得到 元素 (标签). <input type="text" onclick="test()" name="test" id="test&quo

29、t; value="删除" > <script> var input1 = document.getElementById("test");alert(input1.value); </script> Input1.value = "aaaaa" /赋值* getElementsByName() - 通过标签的name的属性值得到标签 返回带有指定名称的对象集合.(理解为数组); <input type="text" name="name1" value=&q

30、uot;增加" ><br/> <input type="text" name="name1" value="修改" ><br/> <input type="text" name="name1" value="删除" ><br/> <input type="text" name="name1" value="重置" ><br/

31、> <script type="text/javascript">var inputs = document.getElementsByName("name1");for(var i = 0; i<inputs.length;i+)var input1 = inputsi;alert(input1.value);</script>* getElementsByTagName(): 根据标签获取返回集合Var inputs = document.getElementsByTagName("input"

32、);3.8 window 弹窗案例*实现过程 1. 创建一个页面a) 有两个输入项和一个按钮b) 按钮上面有一个时间: 弹出一个新窗口 open2. 创建弹出页面a) 表格b) 每一行有一个按钮和编号和姓名c) 按钮上有一个事件 : 把当前的编号和姓名,赋值到第一个页面相应的位置. 关闭窗口.- opener 属性: 获取创建当前窗口的窗口. 做这个案例的时候 会有一个问题* 由于我们现在访问的是本地文件,js安全性,谷歌浏览器安全级别很高 , 不允许访问本地文件* 在实际开发中,没有这样的问题, 实际中不可能访问本地的文件.4.1 在末尾添加节点(案例)第一步 :获取到ul标签第二步 : 创

33、建li标签document.createElement(“标签名称”)方法;第三步 : 创建文本document.createTextNode(“文本内容”);第四步: 把文本添加到li 下面使用appendChild方法.第五步: 把li添加到ul末尾使用 appendChild 方法.<body> <ul id="ulid"><li>111</li><li>222</li><li>333</li><li>444</li> </ul> <

34、;input type="button" value="add" onclick="add()"> <script> / 在末尾添加节点function add()/获取ul标签var ul1 = document.getElementById("ulid");/创建标签var li1 = document.createElement("li");/创建文本var tex1= document.createTextNode("5555");/把文本加入到li

35、下面li1.appendChild(tex1);/把li加入到 ul下面ul1.appendChild(li1); </script> </body>4.2 Node对象属性* nodeName* nodeType* nodeValue* 使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象* 标签节点对应的值nodeType: 1nodeName: 大写标签名称 比如 SPANnodeValue: null<span id="spanid"> aaaaa</span> <script> va

36、r span1 = document.getElementById("spanid"); alert(span1.nodeType); alert(span1.nodeName); alert(span1.nodeValue);5.1 innerHTML属性*浏览器几乎都支持该属性 ,不是dom的组成部分.* 第一个作用 : 获取文本内容 <span id="spanid"> aaaaa</span> <script> var span1 = document.getElementById("spanid&q

37、uot;); alert(span1.innerHTML); </script>* 第二个作用 : 向标签里面 设置内容(可以使 html代码);<div id="div1"></div> <script> var div1 = document.getElementById("div1");div1.innerHTML="<h2>AAAAA</h2>" </script>*练习: 向div里面添加一个表格 <div id="div1"></div> <script> va

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论