JavaScript基础
来源：互联网 发布：网站通用域名有用吗 编辑：程序博客网 时间：2024/06/11 22:32
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
- 1、JavaScript的特点：
- 1、跨平台
2、安全性（JavaScript的代码不能直接访问硬盘的内容） - 2、JavaScript是基于对象的语言。
- JavaScript是解释型语言（不需要经过任何的编译过程），java是解释，编译型语言。
JavaScript是弱类型语言。java中声明的变量的时候，必须声明变量的类型，而JavaScript声明变量时不需要明确数据的类型，任何的变量都是使用一个关键字var去声明即可。 - 3、JavaScript组成部分
- 1、EMCScript（基本语法）
2、BOM(browser object Model)浏览器对象模型，浏览器对象模型中把浏览器 的各个部分用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。
3、DOM(Document Object Model)文档对象模型，一个html页面被浏览器加载的时候，浏览器就会对整个html页面上所有标签都会创建一个对应的对象进行描述。
一、JavaScript的引入
方式1：可以在<script>标签内进行编写
<script type="text/javascript"> alert("hellow world!");</script>方式2：可以引入外部的JavaScript文件
<script src="test.js" type="text/javascript"></script>方式2要注意的是：script标签是有开始标签和结束标签，不能在一个标签体内结束。标签体内不允许再写入内容(内容会无效)。一般我们会使用引入外部的JavaScript文件（复用性高），不会与其他的html代码混杂在一起。
网页的注释：
html <!– –>
css /* */
JavaScript //（单行注释）和/* */（多行注释）
二、JavaScript的基本语法
1、声明变量
//JavaScript的变量声明，格式： var 变量名=数据//后定义的同名变量会覆盖前定义的同名变量 var a = 10; var a = 11; alert(a);//声明变量可以不写var，可以省略。因为JavaScript中的变量数据类型是根据存储的数据类型决定的 var b = "狗娃"; b = true; //对b重复赋值为不同的数据类型是被允许的 document.write(b); 2、JavaScript的数据类型
typeof 查看变量的数据类型
使用格式：typeof 变量名
- JavaScript的数据类型，全部数字都是number类型，全部字符都是String类型
- number：小数和整数类型
string：字符和字符串类型
boolean：布尔类型
undefined：未定义类型（当一个变量没有经过定义的时候，使用typeof查看其数据类型的时候是undefined）
字符串转换数字的函数
parseInt（）
parseFloat（）
var a = 12;alert(typeof parseInt(a));//字符串中，数字更随着非数字字符，会去掉非数字字符var b = "12a";alert(parseInt(b)); //当字符串中，以非数字字符开头，会解析不成成功。//会显示 NaN (not a number)b = "a12";alert(parseInt(b)); //以0x开头的字符串，会将其当做一个16进制的数据处理b = "0x10"；alert(parseInt(b)); //这里true与number类型相加，是作1使用的var c = 1+true;document.write(c);//当我们==判断时，会将字符串转换数字进行比较，当转换不了的时候，则比较字符的长度3、控制流程
这里一些与java一样的if-else，for，while，do-while，switch,break,continue等流程控制就不再做出讲解
//for-in循环，遍历一个数组var array = [1,2,3,4]for(var index in array){ document.write(arr[index]);}//2、还可以循环一个对象属性//定义一个对象的构造方法function Person(id , name){ this.id = id; this.name = name;}//创建一个对象var p = new Person(110,"Lee");//循环输出一个对象的属性for(var prop : p){ document.write(p[prop]);}- with语句:在存储对象的属性和调用对象的方法就不用重复指定对象
- with语句的格式：
with(对象){}
with（document）{ //省略document这个对象的书写，直接使用document的write方法 write（“123”）；}4、函数
- 函数的定义：function 函数名（形参列表）{函数体；}
1、在JavaScript中函数定义形参是不能使用var关键字
2、不需要表明返回值的类型
3、在JavaScript中是没有函数重载的，后面定义的同名的函数会覆盖前面的同名函数
4、在JavaScript中任何函数内部都隐式的维护了一个argument的对象，当调用函数传递数据的时候，是会先传递给argument的对象，再由argument对象分配给形参。
function add(a,b){ document.write(a+b); return sum; } //调用函数，当没有返回值的时候，res接受到的值为undefined var res = add(1,2); document.write(res); //即使没有定义形参，但我调用函数的时候依然能传递参数进去，因为其隐式地维护了一个argument对象 function test(){ document.write(argument.length); for(var i=0;i<argument.length;i++){ document.write(argument[i]); } } //当我们调用test时，传入参数的时候，时会先出传递给argument对象 //结果是 -> 3 test（1,2,3）;三、JavaScript的内置对象
1、String对象
//比较的是对象，不是比较的是内容 var s1 = new String("hellow"); var s2 = new String("hellow"); document.write(s1==s2); //当我们要比较值时,没有equals方法,必须调用String对象的toString方法来进行比较 document.write(s1.toString==s2.toString); //Stirng对象常用的方法 //1、Anchor() 产生锚点，会将字符串产生一个<a>标签，并且将其命名为传入的字符串参数 document.write("123".Anchor("five")); //2、bink() 为元素添加blink标签 //3、charAt 返回指定索引位置处的字符 document.write("123".charAt(1)); //4、cahrCodeAt返回一个整数，代表指定位置字符的编码 //5、Fontcolor() 给字符串添加一个<font>标签，并且设置其颜色属性值 //6、indexOf() 返回字符串中，第一次出现指定字符串的index //7、lastIndexOf()返回字符串中，最后一次出现指定字符串的index //8、italics() 给字符串添加一个<i>斜体标签 //9、link() 给字符串添加一个<a>标签 document.write("123".link("http://www.baidu.com")); //10、Replace() 返回根据正则表达式进行文字替换后的字符串参数 document.write("123".replace(“”，“”)); //11、split() 切割字符串 //12、substr() 截取子字符串 //13、toUpperCase() toLowerCase() 转大小写2、Date对象
<html><head><script type="text/javascript">/* 最美的不是下雨天，而是曾与你躲过雨的屋檐。*/ //获取当前系统时间 vat date = new Date(); document.write(date.toLocaleString()); function getCurrentTime(){ var time = new Date(); var span = document.getElementById("span"); span.innerHTML = time.toLocaleString(); } </script></head><body> <!--给span标签注册一个点击事件，获取当前时间--> <span id="span" onclick="getCurrentTime()">点击这里获取当前时间...</span></body></html>3、number对象
//格式：//var num = new Number("数字");//var num = "数字"; //常用的方法： //1、toString();把数字转换成指定进制形式的字符串形式 document.write("二进制"+(new Number(1).toString(2))); //2、toFixed();指定保留的小数位，四舍五入4、数组对象
JavaScript中数组的长度是可以发生变化的
//创建数组对象var a1 = new Array();var a2 = new Array(100);即使指定长度，也可以改变长度var a3 = new Array("元素1","元素2","元素3");var a4 = ["元素1","元素2","元素3"];//1、concat 将两个数组组成一个新的数组返回 arr1 = arr1.concat(arr2);//2、join 返回一个字符串，包含着所有元素，并且元素由指定的分割符连接//3、pop 移出数组中的最后一个元素，并且返回这个元素//3、push 将新元素添加到一个数组中，并返回数组长度//4、reverse 返回一个元素颠倒的新数组//5、shift 移出数组的第一个元素，并且返回它//6、slice 返回一个数组中的一段//7、sort(sortfunction) 传入一个方法，来对数组进行排序。如果这个参数被省略，则元素按照 asc码排序//8、splice 从数组中移出一个或多个元素，在所移出元素的位置插入新元素，返回所移出的元素（一个参数，开始删除元素的索引值，第二个参数就是删除元素的个数，第三个或多个参数是需要插入的元素）5、prototype原型
- prototype原型解决的问题是如何将一个方法，添加到一个对象中。
- 即是，当我们需要给JavaScript的内置对象添加一些方法时，就可以使用prototype原型来对JavaScript的内置对象添加自定义的方法
- 1、prototype是函数必备的属性（保留属性，只要实现function就有这个保留属性）
2、prototype的值是一个对象
3、可以任意修改函数的prototype属性的值
4、一个对象会自动拥有prototype的所有成员属性和方法
3、格式：Array.prototype.（方法名） = function(){函数体；}
//例如，对Array数组对象添加自定义方法 //Array对象获得了prototype属性的方法了 Array.prototype.eat = function(){ document.write("eat"); } //现在初始化一个Array数组对象后，就能拥有个自定义方法了 var array = new Array(); //调用自定义的方法 var.eat();四、BOM编程
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型中把浏览器 的各个部分用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
- 浏览器对象：
- 1、window 代表一个窗口对象
2、location 代表了地址栏对象
3、screen 代表了整个屏幕的对象
1、window对象的常用方法
<html><head><script type="text/javascipt">//window 对象的方法//使用window对象的任何属性和方法，都可以省略window//open方法 打开指定的html新页面，并且可以设置新窗口的一些属性 function showAd(){ window.open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");}//resizeTo() 将窗口大大小更改为指定的宽度和高度值//moveBy() 相对于原来的窗口，移动指定的值//moveTo() 将窗口，移动到指定的位置//setInterval() 每经过指定毫秒值，就会自动执行指定代码。并返回该定时任务的IDvar id = window.setInterval("showAd()",1000)；//clearInterval() 取消定时任务，根据任务的ID取消任务window.clearInterval(id);//setTimeout() 经过指定毫秒值后，执行指定的代码一次。 window.setTimeout("showAd()",2000);</script></head><body> <input type="button" onclick="showAd()" value="open"></body></html>2、window对象的注册事件
<html><head><script type="text/javascipt">/* 注册事件的方式： 1、直接在html元素标签上直接注册 <body onload="ready()"> 2、可以使用js代码，获得对应的标签对象进行注册*/ //onload() 当页面加载完成的时候，就会调用该方法 function ready(){ document.write("当body元素被加载完毕，就会调用该方法。"); } //这里要注意的是，html网页是从上而下加载的，因此<script>标签内自行该代码的时候，实际上body标签并没有被加载。因此，是获取不了该body的对象。 //解决的办法是，可以将<script>标签放到<body>标签后面。或者是，为body标签注册onload事件，当body加载完成之后调用该方法。 //获得对应的标签对象进行注册事件 var body = document.getElementById("body"); body.onload() = function(){ document.write("当body元素被加载完毕，就会调用该方法。"); }</script></head><!--直接在html元素标签上直接注册,该onload事件是表明：当body标签加载完成后，就会调用该方法--><body id="body" onload="ready()"></body></html>3、window对象的常用事件
- 鼠标点击事件：
- onclick() 单击事件
ondblclick() 双击事件
onmousedown() 鼠标点击事件
onmouseup() 鼠标起来事件 - 鼠标移动事件：
- onmouseout() 当鼠标移出
onmousemove() 当鼠标移动 - 焦点相关：
- onblur 在对象失去输入焦点触发
onfocus 在对象获取到了输入焦点触发 - 其他
- onchange() 当对象或者选中区的内容改变时触发
onload() 在浏览器完成对象的装载后立即触发
onsubmit() 当表单将要被提交时触发
4、location对象
主要用于操作地址栏的
<html><head><script type="text/javascript">/*属性： href 设置或获取整个url为字符串 protocol 设置或获取url的协议部分 href 设置或获取href属性中跟在问号后面的部分方法： reload() 重新加载当前页面*/ function showURL(){ //获取当前的URL alert(location.href); } //调用该方法能刷新页面 function refresh(){ location.reload(); }</script></head><body> <input type="button" onclick="showURL" value="显示当前网址..."/></body></html>5、screen对象
- screen对象的属性
- availHeight 获取系统屏幕的工作区域的高度排除任务栏
avialWidth 获取体统屏幕的工作区域宽度，排除任务栏
height 获取屏幕的出自分辨率
width 获取屏幕的水平分辨率
五、Dom编程
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上所有标签都会创建一个对应的对象进行描述，在浏览器上看到的信息只不过就是html对象属性信息而已，我们只要能做找到对应对象的属性，则以改变浏览器当前显示的内容。
文档树的每一标签对象我们都称为一个节点node（）
例如，我们可以来获取一下一个html页面的标签节点，以及其属性。
<html><head><script type="text/javascript"> //document对象的集合属性： //获取html文件中所有标签节点 var allNodes = document.all; for(var i=0;i<allNodes.length;i++) { alert(allNodes[i].nodeName); } //获取html中所有的a标签的href属性 function test(){ var links = document.links; for(var i=0;i<links.length;i++){ alert(links.href); } }</script></head><body><a href="#">连接1</a><a href="#">连接2</a><a href="#">连接3</a><input type="button" onclick="test" value="添加连接..."/></body></html>- 而我们获得html页面的各种节点，有两种方法：
- 1、根据属性寻找节点
2、通过关系找节点
1、根据属性寻找节点
<html><head><script type="text/javascript">/* 通过html元素的标签属性寻找节点 document.getElementById("html元素的id"); document.getElementsByTagName("标签名"); document.getElementsByName("html元素的name"); innerHTML 是用于设置标签体的内容的 value 是用于设置标的value属性的*/ function showImg(){ //根据标签名字获取节点 var images = document.getElementsByTagName("img"); for(var i =0;i<image.length;i++){ //设置该节点的属性 images[i].src=""; //此时是不用加上px images[i].width="300"; } }</script></head><body><img src="#"/><input type="button" onclick="showImg()" value="添加图片.."/></body></html>2、通过关系找节点
<html><head><script type="text/javascript">/* 通过关系找标签 parentNode 获取当前元素的父节点 childNodes 获取当前元素的所有下一级子元素(空文本，注释也算作一个子节点) firstChild 获取当前节点的第一个子节点 lastChild 获取当秦节点的最后一个子节点 nextSibling 获取当前节点的下一个节点 previousSibling 获取当前节点的上一个节点*/ var bodyNode = document.getElementsByTagName("body")[0]; //获取父节点 var parentNode = bodyNode.parentNode; //同时也会获取空白文本，注释的这些节点，所以我们需要进行排除 var children = bodyNode.childNodes; //我们可以通过节点的类型进行判断筛选 /* 文本节点的类型 3 注释节点的类型 8 标签节点的类型 1 */ for(var i=0;i<children.length;i++){ alert(children[i].nodeName+" "+children[i].nodeType()); }</script></head><body></body></html>3、创建与插入节点
<html><head><script type="text/javascript">/*创建节点 document.createElement("标签名"); 创建新元素节点 elt.setAttribute("属性名","属性值") 设置属性 elt.appendChild(e); 添加元素到elt中的最后的位置 elt.insertBefore(new,child); 添加子节点到指定的child子节点的前面 elt.removeChild(child); 删除指定子节点 (这两个方法都必须要求elt是child的直接父节点)*/ function add(){ //创建节点，并为其设置属性 var inputNode = document.createElement("input"); inputNode.setAttribute("type","button"); inputNode.setAttribute("value","newButton"); //获得<body>节点 var bodyNode = document.getElementsByTagName("body"); //为<body>节点添加子节点 bodyNode.appendChild(inputNode); }</script><body> <input type="button" onclick="add()" value="add" ></body></html><html><head><script type="text/javascript"> function addFile(){ //创建<tr>节点，两个<td>节点 var trNode = document.createElement("tr"); var tdNode1 = document.createElement("td"); var tdNode2 = document.createElement("td"); //为两个<td>节点添加内容（这里与其，特意地创建<input>和<a>节点添加到两个<td>节点当中，不如直接为其添加标签内容更加简便） tdNode1.innerHTML= "<input type='file' />"; tdNode2.innerHTML="<a href='#' onclick='delFile(this)' />"; //将两个<td>节点添加到<tr>节点当中 trNode.appendChild(tdNode1); trNode.appendChild(tdNode2); //获取<tbody>节点和<table>标签里面最后面的<tr>标签，以达到将新创建的节点添加到指定位置 var tableNode = document.getElementsByTagName("tbody")[0]; var lastRow = document.getElementById("lastRow"); tableNode.insertBefore(trNode,lastRow); } //删除指定的<tr>节点 function delFile(aNode){ var trNode = aNode.parentNode.parentNode; var tbodyNode = document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(trNode); }</script></head><body> <!--table里面的元素，直接的父节点是tbody--> <table> <tr> <td><input type="file"></td><td><a href="#" onclick="delFile(this)"></td> </tr> <tr id="lastRow"> <td colspan="2"><input type="button" onclick="addFile()" value="添加" /></td> </tr> </table></body></html>4、操作节点的css
<html><head><script> //获取相应的节点 var spanNode = document.getElementById("span"); //操作其style属性 spanNode.style.fontSize="100px"; spanNode.style.color="red";</script></head><body><span id="span">1</span></body></html>六、简单的JavaScript程序
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title></head><body> <!-- 这里我们需要做的是一个，标签的联动。就是一个标签的状态的改变会导致其它标签的内容或属性发生改变。 比如，在<select id="province">标签选择不同的省份，则在<select id="city">标签里显示该省份的相应的一些城市 --> <select onchange="change()" id="province"> <option>GuangDong</option> <option>HuNan</option> <option>HuBei</option> </select><br> <select id="city"></select></body><script type="text/javascript"> var citis = [["guangzhou","shenzhen","huizhou","dongguan"],["changsa","zhangjiajie"],["wuhan","jingzhou"]]; function change(){ //获取第一个select标签所选择的内容的索引值，获取对应的城市 var provinceNode = document.getElementById("province"); var city = citis[provinceNode.selectedIndex]; //直接设置select标签的option标签长度为零，清空第二select标签的长度 var cityNode = document.getElementById("city"); cityNode.options.length=0; //创建城市标签，并加入对应的城市 for(var i=0;i<city.length;i++){ var option = document.createElement("option"); option.innerHTML = city[i]; cityNode.appendChild(option); } }</script></html> 1 0
- javaScript基础
- JAVASCRIPT 基础
- JavaScript基础
- JAVASCRIPT基础
- JavaScript 基础
- javascript基础
- javascript基础
- JavaScript 基础
- JavaScript基础
- javascript基础
- JavaScript基础
- javascript基础
- javascript基础
- Javascript基础
- JavaScript基础
- JavaScript基础
- javascript基础
- javascript基础
- pandas的数据类型之Series，DataFrame
- IO多路复用select函数
- JavaSript中排序算法（一）
- java-------华为机试-----------进制转化
- ValueError: insecure string pickle简单解决方案
- JavaScript基础
- 多线程在项目中的运用
- C#用ComboBox实现模糊搜索 解决各种细节问题
- 【IMWeb训练营作业】Vue.js入门练习demo之select下拉菜单
- 杨辉三角与二项式定理
- css3的一些总结
- eclipse总是在Building WorkSpace（sleeping）
- jQuery学习笔记（一）
- 死锁产生的原因及四个必要条件
