JS基础学习(一)
首先感谢 http://www.w3school.com.cn/js/index.asp
学js真的很方便,&下面的内容其实是我自己做的一个备忘
第一节 大致了解 一 js基本介绍 1.轻量级脚本语言 2.可插入html,插入后可使用浏览器执行 二 js输出 document.write("中间写你要输出的东西");//在加载完全部文字后,再次使用它,会覆盖之前的内容 alert("弹出框,输入你要弹出的东西"); 三 js对事件作出反应 <button type = "button" onclick = "alert('欢迎!')">点击这里</button> (创建一个点击这里的按钮,点击后弹出对话框“欢迎”) 四 改变HTML内容(包括文字图片等) <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 五 其他杂七杂八 1.js中,用分号表示语句的结束是可选的 2.大小学敏感 3.无视多余的空格 4.可以换行,用“\” eg. document.write("Hello \ World!");————————————————————true document.write \ ("Hello World!");————————————false 5.单行注释 // 6.多行注释 /* */ 第二节 怎么写一个hello world 一 js的使用 <html> <head>//通常把函数放在head里面 <script> //中间写你的js代码 </script> </head> <body> <script> //中间写你的js代码 </script> </body> </html> 第三节 基础语法 一 变量的声明与类型 1.所有的变量声明都是 var w;//未经赋值,是空的 var a = 123; var b = "4560"; var c = "15", d = 16;//可以一行赋值多个 var c = "15", //可以分行赋值 d = 16; 2.注意事项 必须字母或者$ _开头 大小写敏感 (最好)在代码开始处,对所需要的变量进行声明 3.类型 js是动态类型,相同的变量可以用作不同的类型 js中,所有变量都是对象 1.字符串 var a = "123"; 2.数字 var a = 12; var a = 12.01; var a = 12e15; var a = 12e-15; 3.布尔 var a = true; var a = false; 4.数组 var a = new Array(); a[0] = "1"; a[1] = "2"; var a = new Array("1", "2"); var a = ["1", "2"]; 5.对象 //声明 //1 var person = { firstName : "ABC", lastName : "DEF", id : "45789" }; //2 var person = new Object(); person.firstName = "ABC"; person.lastName = "DEF"; person.id = “456780”; //使用 var targetName = person.lastName; var targetName = person["lastName"]; 6.Null 可以用Null清空变量 a = null; 7.Undefined 表示不含有值 声明新变量时,可使用new表明类型 var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; 二 Js的对象 技术中,所有的变量都是对象 js中,对象是拥有属性和方法的数据 1.访问对象的属性的语法是 targetObject.propertyName //对象名.属性名 2.访问对象的方法的语法 //对象名.方法名(参数); 注意,与C#不同,js的方法名常常首字母小写 三 函数 function 函数名(变量一, 变量二 。。。。) { //要执行的代码 //有返回值就直接return } eg. function add(num1, num2) { var c = num1 + num2;//他是局部变量,函数运行完就会删除 return c; //你也可以直接return; } & var a = add(2,3); a最终等于的是5,而不是add函数 函数外面声明的变量全是全局变量,即所有位置都能够访问 全局变量在页面关闭后删除 将一个值赋给未生明的变量,他将是全局变量,即使他在函数里面 四 运算符,比较符,与或非 //这个没什么好说的,与C#相同 五 判断语句if if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; } //除了elseif中间加了空格,其余与C#完全相同 六 选择语句 //与C#完全相同 七 循环 //所有循环的注意事项 //不要死循环!!! //for 中的三个部分都输可选的 for(var i = 0; i < 100; i++) { document.write("hahaha" + i); } for (var i=0,len=cars.length; i<len; i++) { document.write(cars[i] + "<br>"); } //遍历对象中的所有属性 for(a in person) { txt = txt + person[x]; } //下面两个与C#中的一样 while (i<5) { x=x + "The number is " + i + "<br>"; i++; } do { x=x + "The number is " + i + "<br>"; i++; } while (i<5); break;//除了C#中的用法,还可以用在有标签的引用中 eg. cars=["BMW","Volvo","Saab","Ford"]; list://这个是标签,进行标记,个人理解,类似于C#里面的 #region { document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); } continue;//同C# 八 异常处理 try { var x=document.getElementById("demo").value; //下面是定义错误类型 if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "too high"; if(x<5) throw "too low"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="Error: " + err + "."; } 第四节 稍微高级一点的应用 一 JS HTML DOM(js,html文本对象模型) 1.JS功能 1.能够改变页面中所有的HTML元素 2.------------------------属性 3.--------------------CSS样式 4.--------------------事件作出反应 2.查找HTML元素 1.通过Id查找 var x = document.getElementById("id名字"); //如果没有找到,则x = null 2.通过标签查找 var x = document.getElementById("Id名字"); var y=x.getElementsByTagName("p");//查找<p>标签内容 //y是数组,通过数组来确定使用第几个标签中的值 3.改变html中的内容 document.getElementById("p1").innerHTML = "New text!"; //获取到内容 (属性)显示在html中的东西 4.改变html中的属性 document.getElementById("image").src="landscape.jpg"; //更换图片资源 5.改变html中的样式 document.getElementById("p2").style.color="blue"; //style 是关键词 6.隐藏html中的内容 document.getElementById('p1').style.visibility='hidden'(或者visible); 7.事件 onclick//点击 onmouseover //鼠标放上 onmouseout //鼠标离开 onfocus //鼠标选中(点击) onchange //内容改变 onload //加载页面开始 onunload //退出页面时 //定义按钮时,直接定义店家事件 <button onclick="displayDate()">点击这里</button> //给按钮加上Id,在其他地方获取然后添加事件属性 document.getElementById("myBtn").onclick=function(){displayDate()}; 8.节点 var para=document.createElement("p");//创建元素<p> var node=document.createTextNode("这是新段落。");//创建要添加的文本 para.appendChild(node);//将文本添加带你创建的元素中 var element=document.getElementById("div1");//找到一个已有的节点 element.appendChild(para);//将你创建的元素添加到已有的标签中 var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child);//从一个父节点中移除一个子元素 var child=document.getElementById("p1"); child.parentNode.removeChild(child);//从当前所在的父节点中删除自己 第五节 对象 所有数据类型都是对象 一 构造器 function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } var a = new person("123", "123", 15, "red"); js,面向对象语言,但不使用类 不会创建类,也不通过类来创建对象 js基于属性,而不是基于类的 二 数字 1.js数字均为64位 2.整数最多15位,小数最多17位 3.前缀位0,八进制;前缀位0x,十六进制 三 字符串,数组,Data,Boolean,Math 这些用到现查 没有什么特殊的 四 RegExp正则 用于规定在文本中检索的内容。 var patt1=new RegExp("检索目标");//检索目标 patt1.test("The best things in life are free");//检查字符串中的指定值,返回true、false patt1.exec("The best things in life are free");//一样是检索,不过返回的是被查找的值,没有书null patt1.compile("d");//改变检索目标 var patt1=new RegExp("e","g");//第二个参数,表示要查找目标所有的关键词 do { result=patt1.exec("The best things in life are free"); document.write(result); } while (result!=null)
//未完待续