Introduction to JavaScript

1
Introduction to JavaScript

• from the bottom up

2
What is JavaScript?

• JavaScript is a client-side programming language
  used by browsers to emulate Java functions
  without the limitations of server-side files used
  by Java.
• Client-Side means on the users own computer.
  Client-Side scripts can be refreshed
  automatically.
• Server-Side means that the script runs on the
  server once when the page is first asked for.
  Server-Side scripts can only be ran again by
  asking for the page again from the server. This
  is slower than Client-Side, but is faster for the
  initial loading of the page.

3
How JavaScript Works

• JavaScripts are run at the time they are called,
  and can be ran again either by automation or a
  client interaction.
• JavaScripts are generally procedural in the sense
  that operations are run one step at a time, with
  no object interaction. However JavaScript can
  emulate object based interaction to some degree,
  but this is beyond the scope of this lesson.
• Variables, Statements, and Functions are the
  basic building blocks of a JavaScript.

4
Variables

• Variables are data stored in a specific location
  in memory defined by a given name. Variables can
  hold numbers, strings, and arrays.
• The number based variables are all considered
  floating-point.
• The string based variables are all of an
  indeterminate length, to be set by the length of
  the next largest chunk of memory needed for the
  string itself.
• Arrays are logical groupings of many numbers
  and/or strings.

5
Defining a Variable

• Variables in JavaScript are ALL defined the same
  way, regardless of type.
• Constructions of variables may differ depending
  on the type.
• Defining a variable means to give a name to the
  location in memory.
• Constructing a variable means to assign a value
  to a location in memory. Constructions of
  variables differ. Definitions do not.

6
Statements

• Statements in JavaScript are logical operators or
  arithmetic operators.
• Logical operators are statements such asIF
  THENDO ELSEDO
  END IF
• Arithmetic operators are statements such asA
  B C D 9 E / C 3 D

7
Logical Operators

• Logical operators in JavaScript include
• IFTHENELSE statements
• FORNEXT statements
• DOLOOP statements
• DOWHILE statements
• SWITCHCASE statements
• All logical operators continue to execute until a
  given condition is met. This condition can be
  any logical statement, such as TRUE, FALSE, EQUAL
  TO, LESS THAN, GREATER THAN, etc

8
Functions

• Functions are user defined statements. Functions
  can accept parameters to use in these statements.
• Functions can either return a value when they are
  run, or they can return nothing, known as VOID.
• Functions can be called at any point in the
  script after they have been defined.
• Parameters are variables sent along with the
  function to use while it is executing.

9
Programming in JavaScript

• Beginning Programming

10
The HTML Basics

• Open up Notepad by going to START-RUN then type
  notepad and press OK.
• In Notepad type out the following HTML

JavaScript
Test
11

• Next, in the tag set, lets learn how to
  setup a variable

var dan
3

• Notice how variable is declared var precedes
  the variable name. Then after the name a
  construction is given 3. The construction
  actually sets the value of a variable.
• Next, notice how the line ended with a semicolon
  . This is mandatory at the end of each line
  of code.
• Now lets add another variable, this time a string

var dan 3 var
str String inside double-quotes

• Notice that the string is enclosed in
  double-quotes. You can also use single-quotes to
  surround a string. Also make note that the line
  still ends with a semicolon.

12

• Arrays are defined and constructed in a different
  manner than literal strings and numbers.
• Arrays use something called a Constructor to
  actually create the array variable.

var myArray new
Array()

• Alright, look after the definition, var
  myArray, and look at the construction portion
  new Array(). Notice the keyword new.
  This always precedes constructors of a special
  variable type. The next part is the actual
  constructor. The Array() tells JavaScript to
  create an empty array, because no values were
  passed inside the parameter section. Below is
  what it looks like if we populate the array.

var populatedArray
new Array(String, 2.0, Jim)
13

• If you ran the previous code, the array
  populatedArray would contain the following
  elements
• The literal string, String
• The number 2.0
• and the literal string Jim
• Arrays dont have to have the same variable type
  throughout all of its elements. However, you
  generally dont find different types of elements
  in the same array, because this may lead to
  confusion.
• You can create two dimensional arrays as well!

var myArray new
Array(3,String) var yourArray new
Array(3) var 3dArray new Array(myArray(),
yourArray())
14

• There is a special type of String that is
  constructed similar to arrays. This type is used
  for manipulation purposes and is highly flexible.
  They are constructed like this

var myString new
String() //Empty string var yourString new
String(TEXT TEXT TEXT) //string with
value!

• The pros of using this type of string is that the
  manipulation of them in functions is very easy
  and is quite powerful. I wont go into detail
  because right now it is beyond the scope of this
  tutorial.
• Next I will show you how to use statements to
  control program output!

15
Programming with Statements

• Using statements in JavaScript to control program
  execution and output is relatively simple. You
  test a case and go on from there logically. The
  first statement we will work with is the
  IFTHENELSE statement.

//basic syntax if
(1 3 4) var x 5 //execute this
statement if the statement is true! else if (1
3 statement is true else var x 2
//execute if all else fails!
16

• We can use the IF statement to test the values of
  two variables, or just one variable.

var numberOne
5 var numberTwo 9 if (numberOne numberTwo
12) numberOne else numberTwo

• Basically the above code checks if the value in
  numberOne added to the value in numberTwo is
  greater than 12. If it is, it adds 1 to
  numberOne if not, it adds 1 to numberTwo.
• IF statements are powerful for testing the values
  of variables to branch the code execution. Next
  I will go over the FOR statement, used in code
  repetition.

17

• The FOR statement executes a group of statements
  until a certain case is met. FOR statements have
  3 parts variable declaration/construction, the
  case to test, and the statement(s) to run after
  each iteration.

for(var declaredVar
1 declaredVar declaredVar

• That FOR statement, first, declares and
  constructs the variable declaredVar and sets it
  to 1. Then it tests if declaredVar is less
  than 10, and if so executes the statements inside
  the braces. After this it adds increments
  declaredVar by 1 and continues its iterations
  until the statement declaredVar longer less than 10.
• For statements are most used for large scale
  automations involving arrays, like the next
  example.

18
var length
20 var myArray new Array(length) for(var i
0 i i

• The above example does the following sets up the
  variable length to 20 then it creates the
  array myArray to have a length of 20 elements (0
  to 19) and finally it iterates through the
  elements using the FOR statement and puts the
  value of 1 added to the index into each of the
  array elements. The arrays contents look like
  this
• myArray0 1
• myArray1 2
• myArray2 3
• myArray3 4
• myArray4 5
• myArray5 6
• myArray6 7

• myArray7 8
• myArray8 9
• myArray9 10
• myArray10 11
• myArray11 12
• myArray12 13
• myArray13 14

• myArray14 15
• myArray15 16
• myArray16 17
• myArray17 18
• myArray18 19
• myArray19 20

19

• Functions are the most important part of
  JavaScript. A function is a grouping of code,
  that when called with or without argument(s)
  executes a certain piece of code and can possibly
  return a value. A function could calculate the
  square root of a number or you could have a
  function ask for a persons name and age. Hey
  that sounds like a good idea!!!! First we need
  to see what a function looks like. So lets start
  making our function to ask for a name and an age.

function askStuff()
//function statements go here!

• That is the bare bones of a function, so lets add
  some code to it, eh?

20

• What do we need to do?
• Setup our variables
• Ask for their name
• Ask for their age
• Print it to the page!

functi
on askStuff() //declare the variables we will
use //ask for their name //ask for their
age //print it to the page!
Body text!!!
21

• Variables we need the string name and the number
  agelets declare them...

functi
on askStuff() //declare the variables we will
use var name new String() var age
0 //ask for their name //ask for their
age //print it to the page! Body text!!!
22

• Next I need to tell you how to get user input.
  We will be using a JavaScript function called
  prompt to get data from the user. The prompt
  function works like this

var name prompt(Prompt label,Default value)

• So lets merge that with our code to get their
  name!

functi
on askStuff() //declare the variables we
will use var name new String() var age
0 //ask for their name name prompt(What
is your name?,John Smith)REST OF THE
CODE...
23

• Lets do the same thing with the prompt, except
  with the age.

MORE CODE ABOVE THIS...LANGUAGEJavaScript function askStuff()
//declare the variables we will use var
name new String() var age 0 //ask for
their name name prompt(What is your name?,
John Smith) //ask for their age age
prompt(What is your age?, 15) //print it to
the page! REST OF THE CODE...
24

• Ok, now you need to know how to print to the
  page. In JavaScript there is a function of the
  document called document.write. You pass to it
  a string containing text or HTML. When the page
  loads it writes this data to the HTML document,
  then to be kosher you also call the function
  document.close. Lets look at an example

document.write(BOLD TEXT TO BE PUT IN THE
HTML DOCUMENT!)document.close()

• Now we just adapt this for our code, like so

document.write(Hello )document.write(name)
document.write(, you are )document.wri
te(age)document.write( years
old.)document.close()
25

• Put all together

functi
on askStuff() //declare the variables we will
use var name new String() var age
0 //ask for their name name prompt(What
is your name?, John Smith) //ask for their
age age prompt(What is your age?,
15) //print it to the page! document.write(H
ello ) document.write(name) document.wri
te(, you are ) document.write(age)
document.write( years old.) document.clos
e()
26

• But were not done yet, we have to get the HTML
  to call the JavaScript when the page loads. So
  in the BODY tag add the following variable

• This says to the browser, when you load the page,
  also run the JavaScript function askStuff. Ok
  cool, now lets look at the whole code on the next
  page, then lets test it!!

27
JavaScript
Lesson funct
ion askStuff() //declare the variables we
will use var name new String() var age
0 //ask for their name name prompt(What
is your name?, John Smith) //ask for their
age age prompt(What is your age?,
15) //print it to the page! document.write(H
ello ) document.write(name) document.wri
te(, you are ) document.write(age)
document.write( years old.) document.clos
e() onLoadaskStuff()
28
The End!

• Well children, what have we learned today?
• JavaScript
• Variables
• Arrays
• Functions, etc
• How JavaScript makes us feel
• That we are all good people
• Richard Simmons is NOT related to John Travolta
  no matter what Oprah Winfrey thinks
• I just wanna frag everyone, my day could use some
  violence!