JavaScript语言基础.doc

JavaScript语言基础什么是JavaScriptJS的开发环境JS入门Htm中的代码 alert(new Date().toLocaleDateString(); /alert相当于C#中MessageBox，弹出消息框,toLocaleDateString()是一个函数，当地时间。所有JavaScript都是在客户端执行的。这句话是在页面加载时被执行，比Load还要早。即Body里的内容还没有加载就执行。 /可以使用很多次，可以写在任何位置，如body alert(head); /顺序执行，从上往下。 alert(body1); abc /显示完“abc”才弹出body2 alert(body2); def alert(body3); 如果每个页面都要使用到同一段JavaScript代码，哪应将这段代码写到一个JS文件中，这样在客户端加载了一次后，一般情况下要再用这段代码时就不会再到服务器去加载，减少网络流量，不是每个页面都要把一段JS代码下载下来。假设我每个页面都要向用户问好，就可写个test.js,代码：alert(用户你好，恭喜发财！);然后在要用的页面中引用。引用JS文件在页面中的中加入事件 如果希望点击一个按钮来执行一段JavaScript代码，就涉及到一个概念事件 点点点我JS的变量 /var i = 10; /*声明一个变量，名字为i，指向10这个整数，一旦指向10，i就是int类型了，还可以直接写i=10;程序也能执行，但千万别这么用，这样可以认为是JavaScript中的全局变量，容易引起冲突*/ /i = abc; /现在i变成了字符型，指向谁就是什么类型，可以指向任何类型，嫁鸡随鸡，嫁狗随狗。 /alert(i); JS除错与调试执行如下代码： var i = 10; i = j + 10; alert(i); 显示：(有时页面左下脚有个黄色的警告信息，双击也能看到相关错误信息) var sum=0; for (var i = 0; i =100; i+) sum = sum + i; alert(sum); 在调试模式是查看以上这段代码的运行过程，可以的监视窗口中查看变量的变化。判断变量初始化 var x; if (x = null) alert(null); if (typeof (x) = undefined) alert(undefined); if (!x) alert(不x); /if(x)表示X被初始化了或者X不为空或者X不为0。 函数的声明 /函数只有在调用时才会被执行，并且位置在哪可以不定。但常规还是把函数声明放在前面，调用放在后面，这样效率比较高。 alert(add(5,6);/函数使用之后也没有问题 function add(i1, i2) /只是声明，不会执行，没有返回值类型 return i1 + i2; function addBig(i1, i2) if (i1 i2) /这在C#中会显示“并非所有路径都有返回值”的错误，但在JavaScript中不会提示错误，会被执行。 return i1 + i2; alert(addBig(5, 6); /会显示undefined，因为5不大于6,返回的是undefined alert(addBig(9, 8);/显示17，因为9大于8，正常返回17 var i3 = add(2,1); alert(i3);练习第二个练习 function myrevers(arr) /数组传递的不是拷贝 for (var i = 0; i arr.length / 2; i+) var temp = arri; arri = arrarr.length - i-1; arrarr.length - i - 1 = temp; var arr1 = new Array(); arr10=8; arr11=a; arr12=haha; arr13 = b; alert(arr1); myrevers(arr1); alert(arr1); 第三个练习： function myJoin(arr) if (arr.length = 0) return ; var s = arr0; for (var i = 1; i arr.length; i+) s=s+|+arri; return s; var arr1 = new Array(); arr10 = 张三; arr11 = 李四; arr12 = 王五; arr13 = 吴六; alert(arr1);/打印的是Array().ToString()的结果 var s = myJoin(arr1); alert(s);JS中的Dictionary /* var dict = new Array(); dict人 = ren;/用“人”作key，“ren”作value dict口 = kou; dict手 = shou; alert(dict口); /alert(dict.口);/也能输出，但最好别这么用。 for (var k in dict) /类似于C#中的foreach，但输出的是键值，没有foreach,只有for。 alert(k);/输出key的值 人 口 手 var arr = new Array(); arr0 = jeck;/可以看着以int为key,以值为value的Dictionary arr1 = tom; for (var i in arr) alert(i);/输出0,1。数组是Dictionary的特例。 */ var arr1 = 30, 50, 80;/数组的简化声明方式 alert(arr1); var arr2 = 人:ren,口:kou; /数组的字典声明方式,“：”前的是键，后面是值。 alert(arr2口); */ /获得对象的所有成员，为什么可以获得呢？对象的成员就是以对象的key的形式出现的 /* for (var e in document) alert(e); */ var p1 = new Object(); p1.Name = tom; p1.Age = 20; p1.SayHello = function () alert(hello!); ; p1.SayHello(); for (var e in p1) alert(e); DOM编程JavaScript与Dom的关系就像C#与.NET的关系一样，主要是用JavaScript操作界面上的Html控件。离开Dom ，avaScript什么也做不成，就像C#离开了.net，能写出什么来呢？DOM入门事件动态设置事件 function bodyonmousedown() alert(别点我); alert(你点我啦！); function f1() alert(我是f1); function f2() alert(我是f2); !-!-这句代码的意思是当onmousedown时调用bodyonmousedown()，不能理解成onmousedown的处理函数是bodyonmousedown()-Windows对象 function confirmdemo() if (confirm(是否进入) /confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框，如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。 alert(进入了！); else alert(取消进入！); var intervalId; /定义一个变量保存setInterval的返回值，在想停止setInterval要传这个值，如：clearInterval(intervalId)，clearInterval清除指定的定时器。 function startInterval() intervalId=setInterval(alert(hello!), 2000);/注意被执行的代码是字符串格式，你也可以执行一个匿名函数 var timeoutld=setTimeout(alert(这是setTimeout), 2000); 案例：走马灯效果 新学期欢迎新同学 /* function scroll() var title = document.title; var firstch = title.charAt(0); var leftstr = title.substr(1, title.length); document.title = leftstr + firstch; setInterval(scroll(), 1000); */ function rightScroll() var title = document.title; var rightch = title.charAt(title.length - 1); var leftstr = title.substring(0, title.length - 1); document.title = rightch + leftstr; function leftScroll() var title = document.title; var firstch = title.charAt(0); var leftstr = title.substr(1, title.length); document.title = leftstr + firstch; /每点一次滚动速度就会加快，原因是点一次就产生一个新的定时器，并且旧的不会自动停止,所以看起来“越来越快”Body、document对象的事件 /showModalDialog(Dialog.htm);/被拦截 /btn.value = ok;/写在这里报错，因为在页面加载时btn元素还没有被告构建 Dialog.htm Dialog返回 请输入标题：请输入内容：其他事件Window对象的属性 百度 /必须return false才能取到禁止复制的作用这是一篇很好的文章。请输入手机号：请重复输入手机号：/禁止粘贴 function modifyClipboard() var txt = clipboardData.getData(Text); txt = txt + 本文章转载自传智播客技术社区，文章来源： + location.href; clipboardData.setData(Text,txt); 在拷贝文档时加尾巴！写两个页面，第一个页面加上Dialog，第二个页面： Dialog返回Document属性 div font-size: 12px; font-family: arial; .baidu font-size: 14px; line-height: 24px; font-family: arial; a, a:link color: #0000cc; .baidu span color: #6f6f6f; font-size: 12px; a.more color: #008000; a.blk color: #000; font-weight: bold; document.write(百度); /动态向页面中写入内容，页面中原有内容不受影响,由于在head中，所以写在原有body内容的前面。 document.write(新浪); 这是我的网页的主体内容！ /写在哪个位置它就画在哪个位置 document.write(我在中间); /这段代码是将其它网站的广告或连接代码插入到自己的网站中，几年前流行的内容联盟，这些东西没有写到自己的网站，只是引用另外一个网站的JS脚本，打开记事本，点打开，在“文件名”后面的对话框中粘贴“/ns?word=title%3A%BC%C6%CB%E3%BB%FA&tn=newsfcu&from=news&cl=2&rn=10&ct=0”，点打开，就能看到原网站的JS脚本，是一个超大的document.write()，所以引用网站的页面变了，自己网站的内容也跟着变，这就是通过document.write()与自己网站页面溶合在一起。 哈哈哈哈哈哈哈！ 很多网站都用CNZZ的一段JS代码，CNZZ网站会自动帮你统计访问量Document方法 function btnclick1() /alert(textbox1.value);/通过控件的id取它的value值，不推荐这么使用，很多时间可能取不到 var txt = document.getElementById(textbox1);/根据id来找某个控件，这无论它在哪个元素内也能取到。 alert(txt.value); function btnclick2() /alert(textbox2.value)这句就取不到textbox2的value，运行时显示textbox2未定义的错误，因为textbox2被放到了form中 /alert(form1.textbox2.value);这可以引用到 var txt = document.getElementById(textbox2); alert(txt.value); getElementsByName function btnClick() var radios = document.getElementsByName(gender);/取得的数据是对象数组 /*/在js中for (var radio in radios)不像C#中的foreach,并不会遍历每个元素，而是遍历Key，即取到的是key for (var radio in radios) alert(radio.value); */ for (var i = 0; i radios.length; i+) /要遍历必须用普通for循环来做 var radio=radiosi; alert(radio.value); function btnSelect() var radios = document.getElementsByName(gender); for (var i = 0; i radios.length; i+) var radio = radiosi; if (radio.checked) alert(radio.value); 男女保密getElementsByTagName function btnClick() var inputs = document.getElementsByTagName(input); for (var i = 0; i inputs.length; i+) var input = inputsi; input.value=hello 练习:哈哈呜呜 function initEvent() var inputs = document.getElementsByTagName(input);/取得所有的input for (var i = 0; i inputs.length; i+) /遍历取到每个控件 var input = inputsi; input.onclick = btnClick; /动态给元素设置事件，这里不加括号，意思是input.onclick的处理函数就是btnClick，如果加上括号表示input.onclick时调用btnClick()，调用就有返回值。 function btnClick() var inputs = document.getElementsByTagName(input); for (var i = 0; i inputs.length; i+) var input = inputsi; /window.event.srcElement，取得引发事件的控件(即被点击的控件) if (input = wind