Javascript Changing Elements

3 Key excerpts on "Javascript Changing Elements"

• 

  eBook - ePub

  The JavaScript Workshop

  A New, Interactive Approach to Learning JavaScript

  • Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride(Authors)
  • 2019(Publication Date)
  • Packt Publishing

    (Publisher)

  Application  view:

  Figure 1.16: Local storage inspection in Chrome

  DOM Manipulation

  JavaScript can modify, create, and destroy elements and attributes within the Document Object Model (DOM ). This is a very powerful aspect of JavaScript and nearly all modern development frameworks leverage this capability in some way. Similar to XHR, the browser's page doesn't need to be refreshed for us to perform these client-side amendments using JavaScript.

  We'll see a particular project based on this in the next chapter, where you'll get some first-hand experience with this very task.

  Animations and Effects

  Looking back at the web in its infancy, everything was a very static experience. Pages were served up in the browser and consisted of text and hyperlinks. Depending on the year, we usually saw black serif type against a white background with the occasional blue/purple hyperlink.

  Eventually, images and different visual stylistic attributes were available, but things really changed with the advent of various extensions such as Macromedia Shockwave and Flash Player . All of a sudden, rich experiences such as interactive video, animation, gaming, audio playback, special effects, and more were all available.

  The web standards bodies rightly recognized that all of these capabilities should not be locked behind different browser plugins, but rather be part of the native web experience using core web technologies. Of course, primary among these was JavaScript, though JavaScript often relied on a close relationship with HTML and CSS to make things work. The following screenshot shows an interactive animation created using the CreateJS library:

  Figure 1.17: Interactive animation using the CreateJS JavaScript library

  Today, we have rich implementations of the types of content creation that were previously only available with third-party plugins. Libraries such as CreateJS

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Building Websites All-in-One For Dummies

  • David Karlins, Doug Sahlin(Authors)
  • 2012(Publication Date)
  • For Dummies

    (Publisher)

  JavaScript J avaScript is the main source of interactivity and animation in web pages. And of even greater value, it helps visitors interact with objects. They can click a button, scroll a drop-down menu, choose an option from a drop-down menu, and so on — all user-initiated events trigger an action. That action might be launching a slideshow, or opening a new browser window, or a form being validated (the data a user enters is tested before that data is sent to a server). As such, JavaScript is the third leg of the basic building blocks of modern, inviting, dynamic websites, along with HTML (which we cover in Book III, and throughout this minibook) and CSS (which we cover in Book IV). Understanding the Role of JavaScript As you peruse the web to identify the source of various content you want to include in your site, train your brain (and eye) to identify JavaScript objects. You’ll find them everywhere. For example, basic fly-out menus, like the one in Figure 1-1 from eBay, are typically created with JavaScript. Drop-down menus and JavaScript There are other techniques for creating animated drop-down menus. For example, some are created using only CSS (style sheets). But JavaScript drop-down menus are the most widely implemented, powerful, and accessible in a wide variety of browsing environments. The JavaScript code that makes drop-down menus work is stored in files with a.js filename extension. If you look at the source code for a website that includes JavaScript, you most likely won’t see the hundreds or thousands of lines of JavaScript code that make drop-down menus and other animated, interactive elements do their thing

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Full Stack Web Development

  The Comprehensive Guide

  • Philip Ackermann(Author)
  • 2023(Publication Date)
  • SAP PRESS

    (Publisher)

  In addition, there is a veritable wealth of other web APIs available to you in modern browsers. As a web developer, you should at least have an overview of what APIs exist and what is possible with modern browsers. This is the only way to quickly assess whether and how certain requirements for a web application can be implemented in projects. For example, you can use web APIs to store data locally in the browser, create animations, access the file system, apply encryption algorithms, and more. In the third part of this chapter, I’ll provide a compact overview of the most important web APIs.

  7.1    Changing Web Pages Dynamically Using the DOM API

  Each time you access a web page in the browser, the browser makes a request to the server via HTTP, and the server sends HTML code back to the browser; this HTML code is parsed by the browser into its own object model that is kept in the memory. This object model is referred to as the Document Object Model (DOM ), and you can access it using JavaScript.

  Figure 7.2     Browsers Parse HTML Documents into Their Own Object Model

  7.1.1    The Document Object Model

  The DOM represents the components of a web page (i.e., the HTML elements and HTML attributes) hierarchically as a tree, the so-called DOM tree . Such a DOM tree is composed of nodes , whose hierarchical arrangement reflects the structure of a web page, as shown in Figure 7.3 . The DOM API thus defines a programming interface to access the DOM tree through a program.

  Note

  An Application Programming Interface (API ) is a programming interface that provides various objects and methods, which in turn must be present in implementations (i.e., the actual implementations of the respective interface). Implementations can differ among themselves; the important thing is that the interface is adhered to.

  The DOM API provides a set of objects (with methods) through which the content of a web page (or more generally, the content of HTML documents) can be accessed. Implementations of the DOM API exist for various programming languages (including Java, Python, and C#). However, in the following sections, we’ll focus on the implementation for JavaScript, which is implicitly available to you in every browser.

  Figure 7.3     Structure of a DOM Tree

  In Chapter 4 , you already saw that JavaScript enables you to group data together in a meaningful way in the form of objects. There, you also got to know the document object, which is available in JavaScript code that runs within a web page. This object is the entry point to the DOM API, the so-called document node , as shown in Figure 7.3

  Sign up to read

  Learn more about book