# 05.JavaScript & DOM 19 décembre 2023 ## Développement web il3 JavaScript & DOM HE-Arc (DGR) 2022 ## JavaScript hier • Page web = HTML (+ CSS + JavaScript) • Exécuté par le browser (client) pratiques $ ^{15} $ • Interface pour scripter le navigateur - Accès et modification du contenu via DOM – Bookmarklets $ ^{16} $ , exemples $ ^{17} $ - Requêtes HTTP (Fetch API, XML Http Request) • Développement onsubmit, ...) - Embarqués dans les balises (onXXX)

appending pages in wrong locations ## Preparing the HTML Turn.js uses a DOM element as a container for all the pages. This DOM element is typically the flipbook. There are three ways to add pages to your no limit regarding the amount of pages that it can contain. This is because turn.js only keeps in DOM the last 6 pages no matter how long the book is. There will still be references to the content that in the right of the flipbook. ### 2. fixed Indicates that a page should not be removed from the DOM even when the page is out of range. ### 3. hard Sets a hard transition effect for a page. By setting

开发技术-JavaScript ### 1. 概述 ## 内容提要 1 JavaScript 简史 2 JavaScript 功能、脚本语言 3 JavaScript 实现 ECMAScript > DOM BOM 4 在 HTML 中使用 JavaScript ➢直接嵌入 ➢外部引入 JS 代码压缩 ## 1 JavaScript 简史 ## 时代背景 ➢1995 年，拨号上网，速度仅 动态性 - 跨平台 - HTML 页面添加交互行为 HTML 页面添加交互行为 - 跨平台 HTML 元素 在数据被提交到服务器之前验证数据 检测访客的浏览器信息 ➢ 控制 cookies 和本地存储 ## 主要功能 向 HTML 页面添加交互行为 读写 HTML 元素 在数据被提交到服务器之前验证数据 检测访客的浏览器信息 ➢ 控制 cookies 和本地存储 ### [Image](/uploads/documents/b/7/8/8/b78851704d26dc20903e8e329cf18673/p10_1.jpg) ECMAScript 提供语言核心功能 文档对象模型（DOM） 提供访问和操作网页的方法和接口 浏览器对象模型（BOM） 提供与浏览器交互的方法和接口 ### 3.1 ECMAScript 简介 ECMAScript 是一种标准，定义了 JavaScript

gratuit, OS (licence MIT) • Facilite le développement JS pour les tâches fréquentes : - Manipulations DOM - Manipulations CSS – Réponse aux évenements du navigateur - Effets visuels et animations - Requêtes raccourci pour jQuery() • Utilisation de sélecteurs CSS, id ou classes $(document); // retourne le DOM $("h3").hide(); // cache tous les éléments h3 $(".post"); // sélectionne les éléments log("prêt!"); }); ou $(function() { console.log("prêt!"); }); ## Sélection dans le DOM • Sélection $("h1"); $("h1").text(); // noeud élément // noeud texte en lecture

5 面向对象编程 5.1 创建对象 5.2 原型继承 6 浏览器 6.1 浏览器对象 6.2 操作DOM 6.2.1 更新DOM 6.2.2 插入DOM 6.2.3 删除DOM 6.3 操作表单 6.4 操作文件 6.5 AJAX 6.6 Promise 6.7 Canvas 7 jQuery 7.1 选择器 7.1.1 层级选择器 7.1.2 查找和过滤 7.2 操作DOM 7.2.1 修改DOM结构 7.3 事件 7.4 动画 7.5 扩展 8 underscore 8.1 Collections 8.2 Arrays 8.3 Functions 仅仅在判断函数参数是否传递的情况下有用。 ## 数组 数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如： 1. [1, 2, 3.14, 'Hello', null, true]; 上述数组包含6个元素。数组用 `[]` 表示，元素之间用 `,` 分隔。 另一种创建数组的方法是通过 Array() 函数实现： 1. new

## V irtual DOM VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and to the DOM elements to listen to the events in VueJS. ## Animation/Transition VueJS provides various ways to apply transition to HTML elements when they are added/updated or removed from the DOM. VueJS

(ECMAScript) 基础的语法 现在发展到ECMAScript 6 (es6) 2. 文档对象模型 (DOM) ● 告诉你如何用JavaScript代码去操作html文档 3. 浏览器对象模型 (BOM) ● 告诉你如何用JavaScript代码去操作浏览器 JavaScript ECMAScript DOM BOM