Website Development I

Course Info Class Notes Resources Student Websites

Class No. 13:

Introduction to JavaScript

Today’s Goal

To get started experimenting with JavaScript.

Class Resources

Web Programming book reading for THIS class

pages 312-316 and 318-319 (skip section 8.5 for now)

Introduction
History of JavaScript
Hello World Web Page
Buttons

Variables
Identifiers

Parsing Numbers: parseInt and parseFloat

Web Programming book reading for NEXT class

pages 361-362, 367-368, 401-406, and 536-538 (skip the intervening sections for now)

if Statement: if by Itself

if Statement: else and else if Clauses

Comparison Operators and Logical Operators

switch Statement

Preambles

Rescheduling Thursday’s class – with Mr. DiDominic

A common CSS coding error seen in our last class:

there must not be a space between a number and its units

correct: 1.5em 100px 50vw
incorrect: 1.5 em 100 px 50 vw

Questions from our last class or the readings or work between classes?

Making Web Pages Dynamic

What Is JavaScript?

a bit of history
JavaScript and Java
VBScript and others

“Client-Side” Computing

where JavaScript runs
how JavaScript works
what you need to know
- JavaScript language
  - relationship to Java — really very little!
- the browser DOM = Document Object Model
  - this is considerably more involved than learning the language
- the browser event model
  - this is perhaps the most difficult aspect because it involves some new concepts of how users interact with computers
putting things together
- for example, validating forms
- we will see many additional examples, such as generating lists dynamically

Writing JavaScript Code

Basic Structure and Use

the script tag

<script type="text/javascript"> ... </script>

the type="text/javascript" attribute
not needed in HTML5
MIME type = “Multipurpose Internet Mail Extensions”

all JavaScript in a file forms a single program entity
considerations for old browsers — probably not worth the bother today
advanced students: JavaScript does not have amainfunction as in Java and C and C++; it executes in-line with HTML

Basic Statements and Concepts

the document.writeln method

we’ll see better ways to put output on the screen in a future classes

embedding HTML in output strings
using single (') and double quotes (")
using the window.alert(...) method
using the built-in console — CtrlShiftI

the console.log(...) method

Variables: Working with Data

the var statement — there are no explicitly declared types

use “Hungarian notation”

invented by Charles Simonyi, a Hungarian-American software architect
Simonyi started and led Microsoft’s applications group
he built the first versions of Microsoft Office

first 1-4 characters represent the data type
examples: str, n or int, arr, plus prefixes for various object types

but there really are types internally! therefore, you need a few tricks to do type conversion...

to convert a string to an integer (so it can be used in calculations), use function parseInt

var nValue = parseInt( strValue ) ;

to convert a number to a string, just concatenate ""

var strValue = "" + nValue ;

Today’s Exercise

Goal: To learn initial JavaScript concepts by writing code.

Preamble: Today’s exercise includes a number of questions. I encourage you to discuss these questions with another student to try to determine the answers, but of course I am here to help you as well.

Step 1: Understanding the Difference Between Strings and Numbers

Create a new file for this exercise. Initialize it as an HTML file by adding the HTML5 template that we’ve been using throughout this course.
Add a script element in the <body> section of your page:

<script>
</script>

Inside the script element, add adocument.writelnstatement:

<script>
  document.writeln( "<p>This is JavaScript.</p>" ) ;
</script>
Note that the string you are writing contains HTML tags.

Save your file and open it in Microsft Edge. Be sure to open it through the web server using an address in the format:

http://cssdweb.edu/username/filename.html

Add the following three statements inside the <script> element:

document.writeln( "<p>" ) ;
document.writeln( 3 + 4 ) ;
document.writeln( "</p>" ) ;

Save your file and reload it in the browser. Do you get the result that you expected? Why or why not?
Now add:

document.writeln( "<p>3 + 4</p>" ) ;

Save your file and reload it in the browser. Do you get the result that you expected? Why or why not?
Next, add:

document.writeln( "<p>" + 3 + 4 + "</p>" ) ;

Save your file and reload it. What happened here? Why?
Change the code to:

document.writeln( "<p>" + ( 3 + 4 ) + "</p>" ) ;

Save your file and reload it. What happened here? Why? How do the parentheses around ( 3 + 4 ) change the way the code works?

Step 2: Working with String Variables

Add the following statements to your code:

var strFirstName = "insert your first name here" ;
var strLastName = "insert your last name here" ;
document.writeln( "<p>" + strFirstName + strLastName + "</p>" ) ;

Save your file and reload it. Did it work as you expected? Why or why not?
Modify the last line you added to include a space between your first and last names.

Step 3: Working with Numeric Variables

Add the following statements to your code:

var nStudents = 7 ;
var nInstructors = 2 ;
document.writeln( "<p>Total = " + nStudents + nInstructors + "</p>" ) ;

Save your file and reload it. Did it work as you expected? Why or why not?
Modify the last line to actually do the addition so that your program prints the correct total.
Save your file and reload it. What result did you get? How do you fix the code?

Step 4: Using the Browser Console

Type CtrlShiftI to open your browser’s Development Tools window. (The long way to get to this window is to click the three dots at the top right of your browser window to open a dropdown menu, pull right on More tools >, and then click Developer tools.)
Click Console to open that tab.
After the > prompt, type 9+1 and press the Enter ↵ key. Did you get the result you expected?
Assuming that your new page is still displayed and that you completed Step 3 above, type nStudents after the prompt in the console window. (If you’re viewing a different page, reload the page for Step 3, then type nStudents after the prompt.)

Notice that as you type the console tries to help you by popping up a window with all the things you can enter that match what you’re typing.

What result did you get? Is it what you expected? The console is an excellent tool for testing to see whether variables are set to the values you expect them to be set to.
Now type nStudents + nInstructors after the prompt. This demonstrates that you can do calculations in the console window. We will see much more powerful uses of the console as we move forward. This is a very important tool to help you debug your programs.

This is Class No. 13. It was last modified on Saturday, October 21, 2023 at 4:38 PM. Copyright © 2010-2024 by Jesse M. Heines. All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.