2. JavaScript的发展历史(了解)
1995年 网景公司研发了第一个商用浏览器 js最开始出现的目的是为了解决表单提交 是布兰登艾奇 利用10天时间解决了表单提交问题 借鉴LiveScript---JavaScript JavaScript和Java有什么区别 微软也研发浏览器 1995年 发布了IE3.0----自己研发了一个类似于js的东西 研发了一套标准:ECMAScript1.0 es1 现在用的最广泛的标准是ECMASCript5.0简称es5 ECMASCript6.0---简称es6
3. JavaScript介绍
3.1.网站组成
HTML--超文本标记语言---结构 css---层叠样式表-----样式 js---js脚本语言---网站交互
3.2.什么是JavaScript
==基于对象和事件驱动的解释性脚本语言==
-
基于对象:JavaScript 是一种基于对象的语言,这意味着它能运用自己已经创建的对象,因此,许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
-
事件驱动:JavaScript 可以直接对用户或者客户输入做出响应,无须经过 web 服务器,它对用户的响应,以事件驱动的方式进行。
-
解释性
-
解释性:可以直接识别,读一行执行一行
-
编译性:高级语言,c c++ ,先编译计算机能识别的,再执行(速度快)
-
3.3.==JavaScript的特性==
基于对象 事件驱动 解释性 跨平台
3.3.==JS的组成==
ECMASscipt:js的标准 这个标准里面有js的语法和常用对象 DOM Document Object Modal 文档对象模型 BOM browser object Modal 浏览器对象模型
4.代码初识
4.1 JS引入方式
4.1.1 行间引入
<!-- 第一种 行间引入 将js的语法直接写在开始标签上 注意:双引号不能嵌套双引号 单引号也不能嵌套单引号 但是双引号和单引号可以相互嵌套 onclick 鼠标点击事件 alert("提示信息") 浏览器弹窗 缺点:结构行为不分离 不方便后期维护 --> <button οnclick="alert('今天周一')">提交</button>
4.1.2 内部引入
<!-- 第二种 内部引入 js代码放在script标签中 script标签可以放在任意位置 代码的执行顺序是从上往下执行 建议:一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来 缺点:结构行为不分离 --> <script> //浏览器弹窗 alert("弹走弹走6") //操作div标签 操作p标签 </script>
4.1.3 外部引入
<!-- 第三种 外部引入 在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径" 注意:引入外部文件的script标签 里面不能再写其他的js脚本 --> <script src="./1.js"> // alert("没有弹走") 不要在这里面再写其他的js代码 </script> <script> alert("没有弹走") </script>
4.1.4 语法规则与注释
<body> <!-- 注释 单行注释 // 一行js代码 快捷键是ctrl+/ 多行注释 /* 多行js代码 */ 快捷键是ctrl+shift+/ --> <!-- js的语法 1-每行语句后面要加; 2-js中严格区分大小写,有时候会使用驼峰命名 fontSize --> <script> /* */ // alerT("123"); </script> </body>
4.2 JavaScript的调试语句
4.2.1alert()
<script> alert("提示信息"); alert("你在说什么"); console.log("123") </script>
4.2.2 console.log()
<script> //2.console.log() console.log("中午吃啥"); console.log("米饭","泡面","西北风"); </script>
4.2.3 打断点
4.3 变量
-
概念:存储数据的容器 称作变量(标识符) 给存储数据的区域起个名字
-
语法:var 变量名 = 值
基础用法
<script> // 1.声明变量--基础用法 var a; console.log(a);//undefined 未定义 声明了变量但是没有赋值 //2 赋值 读法:将右侧数据123赋值给左边的变量a a = "123"; console.log(a);//123 //3.声明变量和赋值同时进行 var b = "456"; //4.同时声明多个变量 逗号意味着这行代码没有结束 var c = "泡面", d = "赵四"; console.log(c, d)//泡面 赵四 //5.连等写法 x y的值都是”789 var x = y = "789"; console.log(x, y);// 789 789 </script>
特殊用法
//6.特殊用法 不建议使用 t = "10";//全局变量 console.log(t);//10 console.log(a1);//a1 is not defined 没有声明没有赋值 var a2; console.log(a2);//undefined 只是声明了变量 但是没有赋值
-
变量的命名规则
-
以数字 字母 下划线 $组成,但是不能以数字开头
-
不能使用关键字和保留字
-
见名知意 使用驼峰命名(大驼峰和小驼峰都可以)
-
变量不要重名 重名会覆盖
-
5.JS基础交互
5.1 获取标签
<body> <div id="Box">这是一个盒子</div> <div id="Box"></div> <ul id="wrap"> <li>泡面</li> <li>米饭</li> <li id="list">尼古拉斯赵四</li> </ul> <script> // 1.通过id获取元素 选择到具体的某一个 // 通过id获取 document.getElementById("id名字") var oDiv = document.getElementById("Box") console.log(oDiv) var oList = document.getElementById("list") console.log(oList) var oWrap = document.getElementById("wrap") console.log(oWrap) </script> </body>
<body> <div class="Box1">盒子1</div> <div class="Box1">盒子2</div> <div class="Box1">盒子3</div> <div class="Box1">盒子4</div> <div class="Box1">盒子5</div> <ul class="wrap"> <li>这是li标签1</li> <li>这是li标签2</li> <li class="Box1">这是li标签3</li> <li>这是li标签4</li> </ul> <script> //1.通过类名获取标签 document.getElementsByClassName("类名") 获取整个文档下的该类名的标签 //通过类名获取到的是一个集合 如果想获取到这个集合中的某一个具体元素 集合[序号/下标] var oDivs = document.getElementsByClassName("Box1"); console.log(oDivs);//HTMLCollection(6) console.log(oDivs[0]);//获取集合中的第一个盒子 console.log(oDivs[4]);//获取集合中的第五个盒子 console.log(oDivs[6]);//undefined </script> </body>
<body> <div class="Box1">盒子1</div> <div class="Box1">盒子2</div> <div class="Box1">盒子3</div> <div class="Box1">盒子4</div> <div class="Box1">盒子5</div> <ul class="wrap"> <li>这是li标签1</li> <li>这是li标签2</li> <li class="Box1">这是li标签3</li> <li>这是li标签4</li> </ul> <script> console.log(oDivs[6]);//undefined //2.通过父元素获取 父元素.getElementsByClassName("类名") 获取该父元素下的类名标签 var father = document.getElementsByClassName("wrap")[0]; var child = father.getElementsByClassName("Box1")[0]; console.log(child) // 3.注意 通过类名获取的是一个集合 哪怕这个集合中有一个元素 也得加下标/序号 </script> </body>
<body> <div class="Box1">这是div标签1</div> <div class="Box1">这是div标签2</div> <div class="Box1">这是div标签3</div> <div class="Box1">这是div标签4</div> <div class="Box1">这是div标签5</div> <div class="Box1">这是div标签6</div> <div class="Box1">这是div标签7</div> <div class="Box1">这是div标签8</div> <div class="Box1">这是div标签9</div> <div class="Box1">这是div标签10</div> <ul id="wrap"> <li> <div>这是li列表</div> </li> <li> <div>这是li列表</div> </li> <li> <div>这是li列表</div> </li> </ul> <script> // 1.通过标签名获取标签 document.getElementsByTagName 获取整个文档下的对应标签 var oDivList = document.getElementsByTagName("div"); console.log(oDivList);//HTMLCollection(10) console.log(oDivList[9]); </script> </body>
// 2.父元素.getElementsByTagName("标签名") 获取该父元素下对应的标签 var father = document.getElementById("wrap"); var child = father.getElementsByTagName("div"); console.log(child);//HTMLCollection(3)
==注意:通过类名和标签名获取拿到的都是一个集合,都需要通过集合名[下标]来获取具体某一个标签==
5.2 鼠标事件
==注意:onmouSEOver和onmouseenter及onmouSEOut和onmouseleave的区别放在事件冒泡讲==
onclick : 点击事件 ondblclick:鼠标双击 onmouSEOver/onmouseenter : 鼠标移入事件 onmouSEOut/onmouseleave: 鼠标移出事件 onmousemove : 鼠标移动事件 onmousedown : 鼠标按下 onmouseup : 鼠标抬起 oncontextmenu: 鼠标右键显示菜单
<body> <div id="Box"></div> <script> // 需求:点击盒子之后 弹窗内容 马上吃饭 alert("马上吃饭") // 标签.事件类型 = fucntion(){ 要执行的代码} // 1.获取标签 var oDiv = document.getElementById("Box"); //2.绑定事件----onclick 点击事件 oDiv.onclick = function () { //3.要执行的代码 // alert("马上吃饭") console.log("单击") } // //3.双击事件 oDiv.ondblclick = function(){ alert("双击"); } // 4.鼠标移入 oDiv.onmouSEOver = function(){ console.log("移入"); } // 5.鼠标移出 oDiv.onmouSEOut = function(){ console.log("移出") } // 6.鼠标移动 oDiv.onmousemove = function(){ console.log("移动") } // 7.鼠标按下 oDiv.onmousedown = function(){ console.log("按下") } // 8.鼠标抬起 oDiv.onmouseup = function(){ console.log("抬起") } // 9.右键显示菜单 oDiv.oncontextmenu = function(){ console.log("显示右击菜单") } // 10.鼠标移入 oDiv.onmouseenter = function(){ console.log("移入123") } // 11.鼠标移出 oDiv.onmouseleave = function(){ console.log("移出123") } </script> </body>
6.面试题
1-什么是JavaScript 基于对象和事件驱动的解释性脚本语言 2-JavaScript的特性是什么 基于对象 事件驱动 解释性 跨平台 3-JavaScript的组成是什么 ECMASscipt:js的标准 这个标准里面有js的语法和常用对象 DOM Document Object Modal 文档对象模型 BOM browser object Modal 浏览器对象模型 4-js的引入方式有哪些,有什么特性? 第一种 行间引入 将js的语法直接写在开始标签上 注意:双引号不能嵌套双引号 单引号也不能嵌套单引号 但是双引号和单引号可以相互嵌套 onclick 鼠标点击事件 alert("提示信息") 浏览器弹窗 缺点:结构行为不分离 不方便后期维护 第二种 内部引入 js代码放在script标签中 script标签可以放在任意位置 代码的执行顺序是从上往下执行 建议:一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来 缺点:结构行为不分离 第三种 外部引入 在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径" 注意:引入外部文件的script标签 里面不能再写其他的js脚本 5-变量的命名规则 - 以数字 字母 下划线 $组成,但是不能以数字开头 - 不能使用关键字和保留字 - 见名知意 使用驼峰命名(大驼峰和小驼峰都可以) - 变量不要重名 重名会覆盖 6-获取标签的的三种方式 类名,id,标签名 7-鼠标事件有哪些 onclick : 点击事件 ondblclick:鼠标双击 onmouSEOver/onmouseenter : 鼠标移入事件 onmouSEOut/onmouseleave: 鼠标移出事件 onmousemove : 鼠标移动事件 onmousedown : 鼠标按下 onmouseup : 鼠标抬起 oncontextmenu: 鼠标右键显示菜单 8-报错信息"a is not defined"是什么意思 没有声明没有赋值 9-什么时候会输出undefined 声明但没有赋值 10-鼠标的事件类型有哪些
原文地址:https://www.jb51.cc/wenti/3287913.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。