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的属性与方法
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function f(a,b,c) { console.log("ok") } console.log(f.length) //3
内置对象argument:用来获取调用函数时传入的所有实参
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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
事例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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() 把内容滚动到指定的坐标。
事例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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(); } }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<body> <input type="text" id="id1" name="input1" οnclick="begin()"> <button οnclick="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定义
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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()
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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属性修改元素内容
查: