第7章 Javascript与前端开发技术（54）-《网页设计与制作》同步教学（人民邮电出版社）

第 7 章 Javascript与前端开发技术 1 第 7 章　Javascript与前端开发技术 知识要点 （1）掌握在网页中插入脚本语言的三种方式 （2）掌握JavaScript 脚本语言的基本语法规则：变量、运算符、表达式、语句以及函数 （3）掌握JavaScript 对象、浏览器对象和HTML DOM对象 （4）熟悉JQuery和Bootstrap的基本用法 （5）了解前端开发框架：Vue.js、React和Angular 本章目标 1 第 7 章　Javascript与前端开发技术 （1）使用脚本语言 script标记符 直接插入脚本 链接外部脚本 1．三种插入JS的方法 1 第 7 章　Javascript与前端开发技术 (2) Javascript语言的语法 所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。 1．变量 <script> var today=15; // today="Today is the 15th"; </script> 注意：JavaScript是区分大小写的，因此today和Today是不同的 1 第 7 章　Javascript与前端开发技术 (2) Javascript语言的语法 2．运算符 +、-、*、/、%、++、-- 算术运算符 &&（逻辑与）、||（逻辑或）、!（逻辑非） 逻辑运算符 <、<=、>、>=、= =、= = =、!=、!= = 比较运算符 +（字符串接合操作） 字符串运算符 &（按位与）、|（按位或）、^（按位异或）、<<（左移）、>>（右移）、>>>（无符号右移） 位操作运算符 1 第 7 章　Javascript与前端开发技术 (2) Javascript语言的语法 赋值运算符 =、+=、-=、*=、/=、%=、&=、|=、^=、<<=、>>=、>>>= 条件运算符 ?:（条件?结果1:结果2，表示若“条件”值为真，则表达式的值为“结果1”，否则为“结果2”） 其他运算符 .（成员选择运算符）、[ ]（下标运算符）、( )（函数调用运算符）、,（逗号运算符）、delete（删除一个对象的属性或一个数组索引处的元素）、new（生成一个对象的实例）、typeof（返回表示操作数类型的字符串值）、void（不返回任何数值） 1 第 7 章　Javascript与前端开发技术 (2) Javascript语言的语法 3．条件语句 if(expression1) statement1; else if(expression2) statement2; else if(expression3) statement3; … else statementn; switch(expression) { case value1: statement1; break; case value2: statement2; break; ... default: statement; } 1 第 7 章　Javascript与前端开发技术 (2) Javascript语言的语法 4．循环语句 for (initializationStatement; condition; adjustStatement) { statement; } while(expression) { statement; } do { statement; } while(expression); break; continue; 1 第 7 章　Javascript与前端开发技术 (2) Javascript语言的语法 5．函数 function functionName (parameter1, parameter2 ...) { statements; return ; } JS实例 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 对象就是客观世界中存在的特定实体。对象包含两个要素： 1．什么是对象？ 01 用来描述对象特性的一组数据，也就是若干变量，称为属性 02 用来操作对象特性的若干动作，也就是若干函数，称为方法 通过访问或设置对象的属性，并且调用对象的方法，我们就可以对对象进行各种操作，从而获得需要的功能： document.title document.write() 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 2．三种对象 Array、Date、Math、String等 JavaScript 内部对象 Part 01 window、screen、location等 浏览器对象 Part 02 document HTML DOM 对象 Part 03 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 Array对象 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 Date对象 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 Math对象 常用属性 E（欧拉常数，约为 2.718）、PI（圆周率常数，约为 3.14159）和SQRT2（2 的平方根，约为 1.414）等 常用方法 abs(num)（绝对值）、cos(num)（余弦）、pow(num1,num2)（num1 的 num2 次方）、random() （随机数）、round(num)（四舍五入）、sin(num)（正弦）、sqrt(num)（平方根）、toString()（返回表示该对象的字符串）。 Math.cos(Math.PI/3)); 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 String对象 var txt = "string"; var txt ='string'; var txt="Hello World!"; document.write(txt.length); var str="请访问我们的网站！" var n=str.replace("我们的网站" ,"https://www.ptpress.com.cn/"); document.write(n); 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 window对象表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员（全局变量是 window 对象的属性，全局函数是 window 对象的方法）。 window 对象包含document、navigator、location、history 等子对象，是浏览器对象层次中的最顶级对象。 3．浏览器对象 01 属性 document, location等 02 方法 alert(), confirm(), open(), close()等 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 screen对象 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 location对象 1 第 7 章　Javascript与前端开发技术 (3) Javascript对象和浏览器对象 navigator对象 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 它是关于如何获取、修改、添加或删除 HTML 元素（包括其内容和属性等）的标准。 在 DOM中，每个东西都是节点，包括：元素节点、属性节点、文本节点、注释节点，等等。常用父（parent）、子（child）和同胞（sibling）等术语来描述节点之间的关系。 1．什么是DOM？ 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 它是关于如何获取、修改、添加或删除 HTML 元素（包括其内容和属性等）的标准。 在 DOM中，每个东西都是节点，包括：元素节点、属性节点、文本节点、注释节点，等等。常用父（parent）、子（child）和同胞（sibling）等术语来描述节点之间的关系。 1．什么是DOM？ <html><head><title>文档标题</title></head> <body> <a href=””>我的链接</a> <h1>我的标题</h1> </body> </html> 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 可以用特定的方法和属性引用这些节点，以便在脚本中正确地使用它们。 方法是我们可以在节点（HTML 元素）上执行的动作，属性是我们可以在节点（HTML 元素）设置和修改的值。 2．使用DOM方法和属性 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 常用属性：body、forms、images、links、title等 常用方法：getElementsByClassName()、getElementById()、getElementsByTagName()、querySelector()、querySelectorAll()、write() 使用document.forms 等属性，使用document.getElementById() 等方法，可以访问到DOM中的具体元素，之后可以引用其属性和方法进行操作。 3．document对象 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 4．使用Console面板 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 5．元素对象 属性 childNodes、children、className、clientHeight、clientWidth、firstChild、id、innerHTML、lastChild、style 方法 getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()、setAttribute() 使用parentNode、firstChild、lastChild、nextSibling、previousSibling、children和childNodes等属性，可以遍历HTML DOM树，以对相应节点进行操作。 使用innerHTML、textContent和style等属性，可以访问或设置HTML元素的内容和样式。 使用appendChild()、removeChild()、replaceChild()和insertBefore()等方法，可以修改HTML DOM树。 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 6．事件处理 直接在DOM元素中指定事件处理程序 <input onclick="alert('谢谢支持')" type="button" value="点我" /> 在JavaScript中用元素的事件属性进行指定 elementObject.onXXX=function(){ // 事件处理代码 } 使用元素的addEventListener()方法 elementObject.addEventListener(eventName,eventHandler); 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 7．常见事件 类别 事件 描述 鼠标事件 onclick 当用户单击某个对象时触发 oncontextmenu 在用户单击鼠标右键打开快捷菜单时触发 ondblclick 当用户双击某个对象时触发 onmousedown 鼠标按键被按下时触发 onmouseenter 当鼠标指针移动到元素上时（从元素外部进入元素内部）触发 onmouseleave 当鼠标指针移出元素时（从元素内部离开到元素外部）触发 onmousemove 鼠标被移动时触发 onmouseover 鼠标指针移到某元素之上时（进入元素内部时触发，包括在元素内 部移动）触发 onmouseout 鼠标指针从某元素上移开时（离开元素内部时触发，包括在元素内 部移动）触发 onmouseup 鼠标按键被松开时触发 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 类别 事件 描述 键盘事件 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下并松开时触发 onkeyup 某个键盘按键被松开时触发 表单事件 onblur 元素失去焦点时触发 onchange 表单元素的内容改变时触发 onfocus 元素获取焦点时触发 oninput 元素获取用户输入时触发 onselect 用户选取文本时触发 onsubmit 表单提交时触发 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 类别 事件 描述 其他事件 onload 一张页面或一幅图像完成加载时触发 onresize 窗口或框架被重新调整大小时触发 onscroll 当文档被滚动时触发 onunload 用户退出页面时触发 ondrag 元素正在被拖动时触发 ondrop 拖动元素放置在目标区域时触发 1 第 7 章　Javascript与前端开发技术 (4) HTML DOM 实例：Tab导航 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery 1．安装与使用 下载JS文件 jquery-3.4.1.js jquery-3.4.1.min.js jquery-3.4.1.slim.js jquery-3.4.1.slim.min.js 链接JS文件 <script src="jquery-3.4.1.min.js"></script> 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery 2．基本语法 <!DOCTYPE html> <!--表明本文档是个HTML 5文档--> <meta charset="utf-8"> <!--指定文档的字符编码--> <script src="jquery-3.4.1.min.js"></script> <script> <!--自定义JQuery代码--> $(document).ready(function(){ //$(function(){ $("p").click(function(){ $(this).hide(); }); });</script> 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery 3．JQuery选择器 选择器 实例 说明 * $("*") 选取所有元素 this $(this) 选取当前 HTML 元素 标记符 $("p") 选取所有 p 元素 标记符,标记符 … $("h2,div,span") 选取所有 h2、div 和 span 元素 #id $("#test") 选取 id 为 test 的元素 .class $(".test") 选取所有 class 为 test 的元素 .class,.class … $(".intro,.demo,.end") 选取 class 为"intro"、"demo"或"end"的所有元素 parent >child $("div > p") 选取作为 div 元素直接子元素的所有 p 元素 parent descendant $("div p") 选取作为 div 元素后代的所有 p 元素 element + next $("div + p") 选取与每个 div 元素相邻的下一个 p 元素 element～siblings $("div～p") 选取与 div 元素同级的所有 p 元素 [attribute] $("[href]") 选取带有 href 属性的元素 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery 选择器 实例 说明 [attribute=value] $("a[target='_blank']") 选取所有 target 属性值等于"_blank"的 a 元素 [attribute!=value] $("a[target!='_blank']") 选取所有 target 属性值不等于"_blank"的 a 元素 [attribute$=value] $("[href$='.jpg']") 选取所有带有 href 属性且值以".jpg"结尾的元素 [attribute|=value] $("[title|='Tomorrow']") 选取所有带有 title 属性且值等于'Tomorrow'或者以 'Tomorrow'后跟连接符作为开头的字符串 [attribute^=value] $("[title^='Tom']") 选取所有带有 title 属性且值以"Tom"开头的元素 [attribute～=value] $("[title～='hello']") 选取所有带有 title 属性且值包含单词"hello"的元素 [attribute*=value] $("[title*='hello']") 选取所有带有 title 属性且值包含字符串"hello"的元素 :first/:last $("p:first") 选取第一个 p 元素 :first-child/:last-child $("p:first-child") 选取属于其父元素的第一个子元素的所有 p 元素 :even/:odd $("tr:even") 选取偶数位置的 tr 元素。索引值从 0 开始，第 1 元 素是偶数（0），第 2 元素是奇数（1），以此类推 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery JQuery选择器 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery 6．JQuery方法 HTML/CSS方法 append()（在被选元素的结尾插入内容）、attr()（设置或返回被选元素的属性/值）、css()（为被选元素设置或返回一个或多个样式属性）、html()（设置或返回被选元素的内容）、remove()、text()等 JQuery事件方法 click()、dblclick()、mouseenter()、mouseleave()、hover()、keypress()、keydown()、keyup()、blur()、change()、submit()、focus()、resize()、scroll()等。 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery JQuery方法 1 第 7 章　Javascript与前端开发技术 （5）使用JQuery 7．JQuery动画效果 动画效果方法：animate()、delay()、fadeIn()、fadeOut()、fadeTo()、fadeToggle()、finish()、hide()、show()、slideDown()、slideToggle()、slideUp()、stop()、toggle()等 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap 1．安装与使用 Bootstrap文件夹 JQuery文件拷贝到Bootstrap/js文件夹 使用Bootstrap HTML 模板 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap 2．网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap 3．Bootstrap布局 Bootstrap使用一系列的容器（container）、行（row）和列（col）来对内容进行布局。 容器类是container（固定宽度）或container-fluid（全屏宽度），行类是row，列类是col-*-*（第一个星号表示响应的设备：sm、md、lg或xl，第二个星号表示所占列数，同一行的列数相加为12），并且可以用空格分隔多个（如类 "col-sm-3 col-md-6" 表示在平板上占3列，在桌面显示器上占6列） 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap .col- 任意屏幕或小屏幕 - 针对任意尺寸屏幕或屏幕宽度小于 576px（容器最大宽度none(auto)）； .col-sm- 平板 - 屏幕宽度>= 576px（容器最大宽度540px）； .col-md- 桌面显示器 - 屏幕宽度>= 768px（容器最大宽度720px）； .col-lg- 大桌面显示器 - 屏幕宽度>= 992px（容器最大宽度960px）； .col-xl- 超大桌面显示器 - 屏幕宽度>= 1200px（容器最大宽度1140px）。 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap Bootstrap布局 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap Bootstrap格式设置 1 第 7 章　Javascript与前端开发技术 (6) 使用Bootstrap Bootstrap组件 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 1．vue.js 基本用法 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 2．vue指令 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 3．vue应用 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 4．Angular JS基本用法 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 5．指令、控制器、scope和模块 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 6．Angular JS应用实例 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 7．React基本用法 1 第 7 章　Javascript与前端开发技术 (7) 使用Vue.js、React和Angular 8．React组件 <div id="example"></div> <script type="text/babel"> function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage />; ReactDOM.render( element, document.getElementById('example') ); </script> 1 第 7 章　Javascript与前端开发技术 THANKS 1 第 7 章　Javascript与前端开发技术 $$