Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day - - PowerPoint PPT Presentation

▶
introduction to javascript
SMART_READER_LITE
LIVE PREVIEW

Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day - - PowerPoint PPT Presentation

Mar 31, 2023 268 likes •492 views

Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day 2 Overview 1. What is javascript? 2. Output 3. Variables 4. Comments 5. Input 6. Putting it all together What is javascript? Output Variables Comments Input Putting

slide-1
SLIDE 1

Introduction to Javascript

ATLS 3020 - Digital Media 2 Week 2 - Day 2

slide-2
SLIDE 2

Overview

  • 1. What is javascript?
  • 2. Output
  • 3. Variables
  • 4. Comments
  • 5. Input
  • 6. Putting it all together

What is javascript? Output Variables Comments Input Putting it all together

slide-3
SLIDE 3

What is javascript?

  • “Real” programming language

○ HTML = hypertext markup language ○ CSS = cascading style sheets ○ Javascript = a scripting language

  • Makes web pages dynamic and adds interactivity

HTML CSS HTML CSS Javascript

What is javascript? Output Variables Comments Input Putting it all together

slide-4
SLIDE 4

What is javascript?

  • Not Java

○

Ham ≠ Hamburger

○

Java ≠ Javascript

  • Client-side scripting

○

Runs entirely in the web browser (not on the server)

○

Official language for HTML 5

○

Runs in all major web browsers

HTML PHP SQL/MySQL Javascript/jQuery CSS ajax

Front-End Back-End Client Server

What is javascript? Output Variables Comments Input Putting it all together

slide-5
SLIDE 5

What is javascript?

Javascript can be added in 2 ways

What is javascript? Output Variables Comments Input Putting it all together

① Directly to the HTML page ② In an external file

<body> <h1>This is my webpage</h1> <script> alert("Hello!"); </script> </body> HTML index.html <body> <h1>This is my webpage</h1> <script src="script.js"></script> </body> HTML index.html alert("Hello!"); Javascript script.js

slide-6
SLIDE 6

Output

  • Output means that something will display on the

webpage when a users views it

  • Javascript has many different ways to output to a

webpage.

What is javascript? Output Variables Comments Input Putting it all together alert("Hello!"); Javascript document.write("Hello!"); Javascript

① Dialog box ② Print to webpage

slide-7
SLIDE 7

Strings

  • Output must be a string
  • A string is anything within single or double quotes.

Examples:

○ “Hello!” ○ ‘I hope it doesn’t rain today’ ○ “123456790” ○ ‘! Alert # 4 !’

What is javascript? Output Variables Comments Input Putting it all together

slide-8
SLIDE 8

Exercise

  • Create a simple webpage that adds javascript directly to

the HTML page. This webpage should use both types of

  • utputs:

○ alert box ○ print directly to webpage

  • Next, copy your javascript code into an external file and

link it to the HTML page. What happens?

Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/outputs Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/outputs.zip What is javascript? Output Variables Comments Input Putting it all together

slide-9
SLIDE 9

What are variables?

  • A variable stores data within your code.
  • Think of variables in algebra. Example: x=3

○ “x” is the name of the variable ○ “3” is the value the variable holds ○ The value of x can (and will) change over time

What is javascript? Output Variables Comments Input Putting it all together

slide-10
SLIDE 10

Creating variables

Creating a variable is done in 2 steps:

What is javascript? Output Variables Comments Input Putting it all together

① Create the variable ② Assign it a value

var firstName; Javascript firstName = "Brittany"; Javascript

Or these can be combined into 1 line of code (but note there is still 2 steps happening).

var firstName = "Brittany"; Javascript

slide-11
SLIDE 11

Using variables

Referring to a variable will access the value it has stored

What is javascript? Output Variables Comments Input Putting it all together

This . . .

var firstName; firstName = "Brittany"; document.write(firstName); Javascript

is the same as this:

document.write("Brittany"); Javascript

Why would we want to do this?

slide-12
SLIDE 12

Exercise

  • Update your webpage to use variables in place of the
  • utput strings.
  • Change the capitalization of the variables (example:

change firstName to firstname). What happens?

Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/variables Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/variables.zip What is javascript? Output Variables Comments Input Putting it all together

slide-13
SLIDE 13

What is a comment?

  • Comments are like notes that you can leave in code
  • Help developers remember what different parts of the

code does

  • They will not display on the webpage

What is javascript? Output Variables Comments Input Putting it all together

slide-14
SLIDE 14

How to add comments

Comment syntax depends on the language

What is javascript? Output Variables Comments Input Putting it all together <!-- This is a comment --> <h1>Welcome to my webpage!</h1> HTML /* This is a comment */ .red { color: red; } CSS // This is a comment document.write("Brittany"); Javascript /* This is a multi-line comment */ document.write("Brittany"); Javascript /* * This is also a multi-line comment */ document.write("Brittany"); Javascript

Javascript comments can be added in 2 ways: ① Single-line comment ② Multi-line comment

slide-15
SLIDE 15

Exercise

  • Add some comments on your webpage
  • Does it matter where we add comments? (Before or after
  • ur code)

Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/comments Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/comments.zip What is javascript? Output Variables Comments Input Putting it all together

slide-16
SLIDE 16

Input

  • Input usually means the “user’s input”
  • This finally adds interactivity to the webpage!
  • We build webpages to prompt the user for input and

then react to that input.

What is javascript? Output Variables Comments Input Putting it all together

slide-17
SLIDE 17

(Literal) Input prompt

Javascript can “ask” the user for input in many ways, here is 1 example:

What is javascript? Output Variables Comments Input Putting it all together prompt("What is your name?"); Javascript

Why doesn’t this do anything? We need to store the response.

var name; name = prompt("What is your name?"); Javascript

① Create a variable ② Store the value of “prompt” in that variable

slide-18
SLIDE 18

Outputting the input

We can use this variable just like any other variable we’ve created.

What is javascript? Output Variables Comments Input Putting it all together var name; name = prompt("What is your name?"); document.write(name); Javascript

We can combine strings!

var name; name = prompt("What is your name?"); document.write("Hello, " + name + ". How are you?"); Javascript

What if we wanted to write: “Hello, <name>. How are you?”

slide-19
SLIDE 19

Exercise

  • Update your script to prompt user for some input.
  • Then use that data in one of your outputs.
  • What happens if we add more than one prompt?

Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/inputs Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/inputs.zip What is javascript? Output Variables Comments Input Putting it all together

slide-20
SLIDE 20

Lab Assignment #2

  • Write a webpage that asks the user for their first name

and then asks them for their last name.

  • Use their input data to write a message back to them.
  • Your webpage should include:

○

both types of outputs (dialog box and printed directly to HTML)

○

at least one single-line comment and one multi-line comment

○

at least two “prompts”

○

at least two variables (your “prompts” should be stored with different variables)

  • You can write your javascript directly on the HTML page or you can

include a javascript file, your choice.

What is javascript? Output Variables Comments Input Putting it all together