Javascript Changing Elements

2 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

  • Doug Sahlin(Author)
  • 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