JS导入
js简介
- 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
- Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
- 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
- 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.
ECMAScript
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
- Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
ECMAScript描述以下内容：
语法、类型、语句、关键字、保留字、运算符、对象（封装、继承、多态）
js是基于对象的语言，对象已经定义，只要调用即可
js代码引入方式：
1、直接编写在script标签 <script> alert("hello world") </script> 最好在<body>标签中，否则CSS布局时可能找不到 2、导入文件 <script src="hello.js"></script>
JS语法基础
2.1 js基础规范
1、每行代码用 ; 来结束，没有分号以换行符来结束
2、注释: /* */ //
3、使用 {} 来封装 代码块
2.2 变量
1、弱变量类型（很随便，与Python类似）
2、无需声明变量类型，使用关键字 var 定义即可（也可不使用var，定义的变量即是全局变量）
3、一行多变量
var a=1024,b="hello",c=[1,2,3];
4、变量命名：
首字符只能是字母,下划线,$美元符 三选一，且区分大小写，x与X是两个变量 Camel 标记法：首字母是小写的，接下来的字母都以大写字符开头 var myTestValue = 0, mySecondValue = "hi"; Pascal 标记法：首字母是大写的，接下来的字母都以大写字符开头 var MyTestValue = 0, MySecondValue = "hi"; 匈牙利类型标记法---推荐 在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“ var iMyTestValue = 0, sMySecondValue = "hi";
2.3 标志符
- 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
- 常用于表示函数、变量等的名称
- 例如：_abc,$abc,abc,abc123是标识符，而1abc不是
- JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符
Function对象
函数定义：
方法一: function 函数名(参数){ 函数体; return 返回值; } 方法二： var 函数名=new Function("参数1","参数n","函数体") 可以使用变量、常量或表达式作为函数调用的参数； 函数由关键字function定义； 函数名的定义规则与标识符一致，大小写是敏感的； 返回值必须使用return； 第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型
注释：
js的函数加载执行方式与Python不同，执行代码时会先加载所有函数，所以函数调用在函数上面也是没问题的
Function的属性与方法
function f(a,b,c) { console.log("ok") } console.log(f.length) //3
内置对象argument：用来获取调用函数时传入的所有实参
function add(a,b){ console.log(a+b);//3 console.log(arguments.length);//2 console.log(arguments);//[1,2] } add(1,2) // ------------------arguments的用处1 ------------------ function nxAdd(){ var result=0; for (var num in arguments){ result+=arguments[num] } alert(result) } nxAdd(1,2,3,4,5) // ------------------arguments的用处2 ------------------ function f(a,b,c){ if (arguments.length!=3){ throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments") } else { alert("success!") } } f(1,2,3,4,5)
函数作用域与闭包：
js与Python相似，函数有作用域，控制语句if，while不存在
if(1==1){ var s=12; } console.log(s);//12 // ---------------------- function f(){ var temp=666; } f(); console.log(temp);//Uncaught ReferenceError: temp is not defined
事例：
var city = 'beijing'; function func(){ var city = "shanghai"; function inner(){ city = "langfang"; console.log(city); } return inner; } var ret = func(); ret(); console.log(city)
BOM
browser object modal：浏览器对象模型，对浏览器窗口进行访问和操作。使用BOM，开发者可以移动窗口、改变状态栏中的文本以及进行其他与页面内容不直接相关的动作。
使js能与浏览器对话。
Window对象
window对象：
所有浏览器都支持 window对象。
概念上：一个html文档对应一个window对象；
功能上：控制浏览器窗口
使用上：window对象不需要创建，直接使用即可
对象方法：
alert() 显示带有一段消息和一个确认按钮的警告框。点击确定之后返回 undefined
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。点击确定返回 true;取消返回 false
prompt() 显示确认、取消按钮以及可提示用户输入的对话框。点击确定返回输入内容，取消返回 null
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。（执行一次）
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
事例：
var num = Math.round(Math.random()*100); function acceptInput(){ //2.让用户输入(prompt) 并接受 用户输入结果 var userNum = prompt("请输入一个0~100之间的数字!","0"); //3.将用户输入的值与 随机数进行比较 if(isNaN(+userNum)){ //用户输入的无效(重复2,3步骤) alert("请输入有效数字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用户大了,让用户重新输入(重复2,3步骤) alert("您输入的大了!"); acceptInput(); }else if(userNum < num){ //小了==> 提示用户小了,让用户重新输入(重复2,3步骤) alert("您输入的小了!"); acceptInput(); }else{ //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm). var result = confirm("恭喜您!答对了,是否继续游戏?"); if(result){ //是 ==> 重复123步骤. num = Math.round(Math.random()*100); acceptInput(); }else{ //否==> 关闭窗口(close方法). close(); } }
<body> <input type="text" id="id1" name="input1" onclick="begin()"> <button onclick="end()">stop</button> <script> function showTime() { var curr_time=new Date().toLocaleString(); var ele=document.getElementById("id1"); ele.value=curr_time } var clock1; function begin() { if (clock1==undefined){ showTime(); clock1=setInterval(showTime,1000); /*1秒之后执行showTime函数*/ } } function end() { clearInterval(clock1); clock1=undefined; } </script> </body>
History对象
history对象属性
History对象包含用户在浏览器窗口中访问过的URL。
History对象是window对象的一部分，可通过window.history 属性对其访问。
length 返回浏览器历史列表中URL 数量。
history对象方法
back() 加载history列表中的前一个URL
forward() 加载history列表中的后一个URL
go() 加载history列表中的某个具体页面
Location对象
Location对象包含有关当前 URL的信息。
Location对象是window对象的一个部分，也可通过window.location来访问。
Location对象方法
location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别，无法返回原来的URL
DOM对象（DHTML）
DOM定义
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性：
1 attribute 节点的属性节点 2 nodeType 节点类型 3 nodeValue 节点值 4 nodeName 节点名称 5 innerHTML 节点所有内容 6 innerText 节点所有文本内容
导航属性：
parentNode - 节点（元素）的父节点 (推荐) firstChild – 节点下第一个子元素 // 紧挨的下个节点，并不是标签 lastChild – 节点下最后一个子元素 childNodes - 节点（元素）的子节点
以上不够精准，推荐使用下面的属性：
1. parentElement // 父节点标签元素 2. children // 所有子标签 3. firstElementChild // 第一个子标签元素 4. lastElementChild // 最后一个子标签元素 5. nextElementtSibling // 下一个兄弟标签元素 6. previousElementSibling // 上一个兄弟标签元素
以上查找都是根据一个已知标签来定位另外一个标签，
还可根据以下方法(标签自带的属性)查找一类标签：
标签属性id: getElementById()
标签名： getElementsByTagName()
标签属性name：getElementsByName()
标签属性class: getElementsByClassName()
也可只在局部查找：
但是只支持 getElementsByClassName() 和 getElementsByTagName()
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length)
node增删改查
增：三步
1.创建标签
2.找到父标签
3.加到父标签下
var new_ele=document.createElement("div"); //创建新标签对象 var p_ele=document.getElementById("div"); //找到父集标签 new_ele.innerText="fuck you man"; //给新标签添加文本 p_ele.appendChild(new_ele); //添加到父级标签内
删：
1.获得要删除的元素
2.获得它的父元素
3.父元素.removeChild(元素)
改：
第一种：先删除然后重新增加
第二种：使用setAttribute()方法修改属性；使用innerHTML属性修改元素内容
查：