Scribd
Upload
54 views14 pages

01.03.JS Output

JavaScript allows webpages to be interactive by reading and writing HTML elements, reacting to events, and validating data. It can output data through alerts, prompts, directly writing to the HTML, and modifying element content. The browser console is useful for debugging JavaScript.

Uploaded by

varsha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views14 pages

01.03.JS Output

JavaScript allows webpages to be interactive by reading and writing HTML elements, reacting to events, and validating data. It can output data through alerts, prompts, directly writing to the HTML, and modifying element content. The browser console is useful for debugging JavaScript.

Uploaded by

varsha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

INTERACTIVITY

01.03 Output WITH JAVASCRIPT

JavaScript Output
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

Interactivity
• HTML5 and CSS3 are not really
interactive
• New elements and pseudo-classes can
only go so far
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

What Can JavaScript do?


• Read and write HTML elements
• Reacts to events (mouse events,
keyboard events, etc.)
• Validate data
• Detect the visitor's browser
• Create cookies
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

JavaScript Output
• JavaScript doesn’t have a built-in
print function
• Data is displayed via
– an alert box using window.alert()
– a prompt using window.prompt()
– HTML output using document.write()
– HTML element using innerHTML()
– the browser console using console.log()
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

alert()
• In JS, an alert is a pop-up window that
displays information
alert(“My Message Here”);

• The parentheses mean that this is a


function
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

prompt()
• Very similar to alert, but wants input.

prompt(“Enter your name: ”);


INTERACTIVITY
01.03 Output WITH JAVASCRIPT

document.write()
• What if we want something permanent?
• document.write() writes directly to the page

document.write(“Time to learn JavaScript ”);


• Here we have combined a function with an
object that will add to page
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

document.write()
• Not usually recommended since it can
easily be misused
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

innerHTML
• To change the contents of the DOM, use
innerHTML combined with the element you
want to change no parentheses!!

element.innerHTML = “Time to learn JavaScript ”;


• The element will come from the API
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

console.log()
• This option write the data to the browser
console
console.log(“Leave a secret message”);

• The console is a place to see what is


going on during the execution of your
program
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

The console
• You should be utilizing the console by
now
• Does more than take “print” statements,
also provides debugging information for
JavaScript, HTML and CSS
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

Debugging
• Safari: Preferences  Advanced Check the
Show development menu in menu box”
• Google Chrome: Developer  JavaScript
Console
• Firefox: Tools Console
• Edge: F12
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

Review
• Right now, we are doing simple things
with output
• As you learn more, the power grows
INTERACTIVITY
01.03 Output WITH JAVASCRIPT

Acknowledgements/Contributions
These slides are Copyright 2015- Colleen van Lent as part of
http://www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the attribution
requirements of the license. If you make a change, feel free to add
your name and organization to the list of contributors on this page as
you republish the materials.

Initial Development: Colleen van Lent , University of Michigan School of


Information

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy