# 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)

开发技术-JavaScript ### 1. 概述 ## 内容提要 1 JavaScript 简史 2 JavaScript 功能、脚本语言 3 JavaScript 实现 ECMAScript > DOM BOM 4 在 HTML 中使用 JavaScript ➢直接嵌入 ➢外部引入 JS 代码压缩 ## 1 JavaScript 简史 ## 时代背景 ➢1995 年，拨号上网，速度仅 [Image](/uploads/documents/b/7/8/8/b78851704d26dc20903e8e329cf18673/p10_1.jpg) ECMAScript 提供语言核心功能 文档对象模型（DOM） 提供访问和操作网页的方法和接口 浏览器对象模型（BOM） 提供与浏览器交互的方法和接口 ### 3.1 ECMAScript 简介 ECMAScript 是一种标准，定义了 JavaScript 实现和扩展（如 DOM、BOM 等）。 ### 3.2 DOM（文档对象模型）简介 ■ DOM（Document Object Model）是一种跨平台、独立于编程语言的应用程序编程接口（API）。DOM 标准由 W3C 设定。 ■ DOM 将 HTML/XHTML/XML 文档视为树结构，每个节点代表文档中的一个组成部分，这些节点又包含不同数据类型的结构。 ■ 通过 DOM 创建的树形图，

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 assign('/discuss'); // 设置一个新的URL地址 7. } ## document document 对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document 对象就是整个DOM树的根节点。 document 的 title 属性是从HTML文档中的 <title>xxx</title> 读取的，但是可以动态改变： 1

## 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

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

学习用户界面/交互设计1.6.1.7 学习HTML和CSS1.6.1.8 学习搜索引擎优化1.6.1.9 学习JavaScript1.6.1.10 学习Web动画1.6.1.11 学习DOM、BOM和jQuery1.6.1.12 学习网页字体&图标1.6.1.13 学习可访问性相关知识 1.6.1.14 学习 web/浏览器 API 1.6.1.15 学习 JSON 制图工具 1.7.4 HTTP/网络工具 1.7.5 代码编辑工具 1.7.6 浏览器上的神兵利器 1.7.7 HTML工具 1.7.8 CSS工具 1.7.9 DOM工具 1.7.10 JavaScript工具 1.7.11 静态网页构建工具 1.7.12 无障碍访问工具 1.7.13 应用程序框架工具（台式机、手机、平板电脑等） 笔者有意将本书打造为一份专业资料，为想要或正在实践的前端开发者们提供学习材料和开发工具。其次，它同样可供主管、CTO、讲师和猎头们深入探索前端开发实践。 本书内容偏向于 WEB 技术（HTML、CSS、DOM、JavaScript）和以这些技术为根基直接构建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚，要么就是解决问题的流行方案。 本书不是一本囊括所有前端可用资源的综合纲领。其价值在于为恰好够

documentation. For example, to run our Conway's Game of Life demo with WebGPU enabled: $ ./servo --pref dom_webgpu_enabled https://demo.servo.org/experiments/webgpu-game-of-life/ Use --devtools=6080 to enable can ask for a review in the Servo chat. - Add tests relevant to the fixed bug or new feature. For a DOM change this will usually be a web platform test; for layout, a reftest. See our testing guide for more issue-12345 Auto-merging components/script/dom/ bindings/root.rs CONFLICT (content): Merge conflict in components/script/dom/ bindings/root.rs Auto-merging components/script/dom/node.rs error: could not apply 932c8d3e97d

process.env.NODE_env 会自动需要相应的文件。 ### 运行时 + 编译器 vs. 仅运行时 如果需要在客户端上编译模板（即：将字符串传递给 template 选项，或使用其在 DOM 中 HTML 作为模板挂载到元素），你需要编译器，因此需要完整的版本： 1. // 需要编译器 2. Vue.createApp({ 3. template: '[div}{{hi}}