|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/javascript-mini-projects/
课程评论：没有评论
本课程《JavaScript Projects JS Dynamic interactive DOM elements》旨在帮助初中级前端开发者通过实践掌握JavaScript，并利用HTML、CSS构建动态交互的网页元素。课程教授五项独特且富有创意的迷你项目，这些项目均使用原生JavaScript（Vanilla JavaScript）开发，您可以在此基础上进行扩展，为您的作品集增添亮眼的功能和交互。 课程内容概览： * **项目一：JavaScript 文本生成器** * 学习使用 `DOMContentLoaded` 事件，`toUpperCase()` 等字符串方法，条件与循环（`for`，`while`），`Math.random()`，DOM操作（`createElement()`，`append()`，`querySelector()`），以及数组的 `sort()` 方法。 * **项目二：JSON数据分页加载** * 掌握事件监听器，`DOMContentLoaded`，三元运算符，`fetch` 方法，JSON数据处理，DOM操作（`createElement()`，`append()`，`querySelector()`，`innerHTML`，`textContent`），以及使用 `classList.add()` 禁用按钮。 * **项目三：JavaScript 图片轮播器** * 学习通过 `setInterval()` 改变页面内容，使用 `querySelector()`，`classList.add()`，`append()`，`remove()` 操作DOM元素，通过 `addEventListener()` 创建交互式内容，以及常用的JavaScript基础（`forEach()`，`push()`，`Array.length`）。 * **项目四：动态列表构建器及本地存储** * 学习DOM操作（`createElement()`，`append()`，`querySelector()`，`innerHTML`，`textContent`），用户交互，元素样式设置（`setAttribute()`，`style.display`），元素添加与删除（`appendChild()`，`removeChild()`），类名检查（`classList.contains()`），元素焦点设置（`focus()`），文本节点和元素创建（`createTextNode()`，`createElement()`），以及利用 `localStorage` 进行数据存储（`setItem()`，`getItem()`），JSON数据转换（`JSON.stringify()`，`JSON.parse()`），动态创建文本文件并设置下载功能。 * **项目五：JavaScript 动态时间轴组件** * 深入DOM操作（`createElement()`，`append()`，`querySelector()`，`innerHTML`，`textContent`），使用CSS `transform: translateX()` 移动元素，通过事件监听器创建交互内容，并从JSON对象生成页面内容。学习 `querySelector()`，`addEventListener()`，`forEach()`，`classList.add()`，`classList.remove()`，`parseInt()`，`Number()`，`createElement()`，`append()` 等JavaScript方法。课程还包括根据字符串随机生成页面内容。 课程优势： * **实践导向：** 通过五大实际项目，巩固和提升JavaScript技能。 * **原生JS：** 强调使用Vanilla JavaScript，为您打下坚实的基础。 * **独特项目：** 提供市面上少见的创新项目，提升您的作品集价值。 * **经验丰富的讲师：** 由拥有超过20年实战经验的讲师授课，并提供答疑。 * **源码提供：** 包含所有项目的源文件，方便您学习与二次开发。 * **适合人群：** 适合希望通过有趣且实用的项目来提升HTML，CSS和JavaScript技能的初学者和中级开发者。 加入课程，动手实践，享受开发乐趣，打造属于您自己的动态网页项目！
Practice and learn more about JavaScript as you create 5 amazing projects all with Vanilla JavaScriptExplore and sharpen your skills with Mini projects that you can extend upon to create some amazing functionality and interactions for web users. Add them to your portfolio have fun while you learn.Challenge yourself and design your own versionsSource code is included to get you started.Perfect for Beginner and intermediate web developers that want to build fun and useful projects with HTML, CSS & JavaScript.These are unique coding mini projects you won't find anywhere else.Sharpen your HTML, CSS & JavaScript skills with these projects.Project #1 JavaScript Lorem ipsum generator Adding EventListenersDOMContentLoaded when page loadsString methods like toUpperCase()Conditions and Loops (for loops and while)JavaScript Math method - random()DOM document createElement(), append(), querySelector()Array methods sort()Project #2 Pagination from JSON data multiple pages and content loading appAdding EventListeners for interactionDOMContentLoaded when page loadsTernary operatorFetch methodJSON data - as JavaScript ObjectsDOM document createElement(), append(), querySelector() - elements innerHTML and textContentDOM disable buttons - classList.add() Create HTML elements and create interactive content dynamicallyProject #3 JavaScript Carousel Images Slider ComponentChange Content on the page with Intervals setInterval()Select and manipulate DOM page elements with JavaScript querySelector() classList.add() append() remove()Create interactive Page content - addEventListener()Practice common JavaScript Fundamental coding - forEach() push() into arrays Array.length DOM disable buttons - classList.add() Create HTML elements and create interactive content dynamicallyProject #4 JavaScript Dynamic List builder with Download and saving of list items to localstorage.How to generate a text file with JavaScript from string contentDOM document createElement(), append(), querySelector() - elements innerHTML and textContentAdd user interaction DOM document createElement()Element updates to style setAttribute() style.display() Add and remove page elements appendChild() removeChild() methodsCheck element classes classList.contains()Set element focus focus()createTextNode() and createElement()Save items to local Storage localStorage.setItem() localStorage.getItem()Convert object to string JSON.stringify() convert String to Object JSON.parse()encodeURIComponent() to create text file dynamically and set download click of hyperlinkProject #5 JavaScript Dynamic TimeLine Component DOM document createElement(), append(), querySelector() - elements innerHTML and textContentMove elements using StylingInteractive Content with event listenersGenerate Page content from JSON data objectJavaScript Methods querySelector() addEventListener() forEach() classList.add() classList.remove() parseInt() Number() createElement() append()Generate Page content randomly from string charactersMove elements on the page using Transform XAdding styling and JavaScript for dynamic and interactive content--- Source Code included - build your own version of the projects ---Taught by an instructor with over 20 years of REAL WORLD experience ready to answer any questions you may have.You have nothing to lose - build your own version of the projects HAVE FUN - Join NOW
