Transcript The Most Important JavaScript Commands


JavaScript is a sequence of statements. Every
statement is executed by the browser in the
order that they are written in. In order to
separate these statements a semicolon(;) is
used. The semicolon should be at the end of
each executable statement. It even lets you
place many statements on just one line.
A
code line within a text string can be broken
with a backslash. An example of this is shown
below:
 document.write("Hello \
World!");
 This is an example of what not to do when
trying to break up a code line:
 document.write \
("Hello World!");

When using JavaScript, it ignores extra
spaces. This means that the extra spaces
won’t really space out your end result or
webpage. However, this white space can
make your script more readable. This is a
good idea because your script can be
organized in an easy to edit way. It can make
it easer to fix when a mistake has been made.
 Create
a web page named after this unit
number (21.htm) and demonstrate the
following:
 Show the word “Hello!” when the web page
loads.
 Write a sentence that correctly breaks up
text with a backslash.
 Demonstrate how white space does not
affect the script.
 Demonstrate your knowledge of HTML using
items shown in previous units to write words
with different font sizes and colors.




Separation of statements
Breaking up a code line
The Truth About White Space
Practice

Comments can be very beneficial when using
JavaScript. It is important to recognize that
comments will not be executed in JavaScript. They
are solely to explain the JavaScript and label certain
parts of the script so that they are easier to find.
When placing single line comments you need to start
with”//”.

An example of two comments is shown below:

// Write to a heading:
document.getElementById("myH1").innerHTML="Welc
ome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is
my first paragraph.";

In JavaScript there are letters called variables that help
store information. Just like in Algebra these letters hold
information like x=2. besides holding numbers variables
can also hold information in text values such as names
and other words. For example, var person="John Doe";.

Some facts about variables are shown below:

Variable names must begin with a letter

Variable names can also begin with $ and _ (but we will
not use it)

Variable names are case sensitive (y and Y are different
variables)







A string is a variable which stores a series of
characters like "John Doe".
A string can be any text inside quotes. You can use
single or double quotes:
Some examples are shown below:
var carname="Volvo XC60";
var carname='Volvo XC60';
You can use quotes inside a string, as long as they
don't match the quotes surrounding the string:
Examples are shown below:
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
Add comments to each line added in practice 1 to
explain what you did.
 Declare variables about your self starting with
these and adding as many as you can about
yourself:
1. favorite color
2. age
3. number of slices of pizza I can eat
4. least favorite school subject
5. what I want to do when I get older
 Place a comment after each variable explaining it.

 JavaScript
Comments
 JavaScript variables
 JavaScript Strings
 Practice





JavaScript has only one type of numbers. Numbers can be written
with, or without decimals:
Examples are shown below:
var x1=34.00;
var x2=34;
// Written with decimals
// Written without decimals
Extra large or extra small numbers can be written with scientific
(exponential) notation:
Examples are shown below:

var y=123e5;
var z=123e-5;
// 12300000
// 0.00123

Numbers can be used when dealing with any types of quantities
you deal with in JavaScript.





An object is delimited by curly braces. Inside the
braces the object's properties are defined as name
and value pairs (name : value). The properties are
separated by commas:
Ex:var person={firstname:"John", lastname:"Doe",
id:5566};
The object (person) in the example above has 3
properties: firstname, lastname, and id.
Spaces and line breaks are not important. Your
declaration can span multiple lines:
var person={
firstname : "John",
lastname : "Doe",
id
: 5566
};




A function is a block of code that will be executed when "someone" calls
it:
An example of a function is shown below:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
As you can see the function must start with <!DOCTYPE html> and end
with </html> in order to work.
 Make
a function that creates an object called
person.
 In the function add as many attributes as you
can think of to the person object.
 Have all the attributes of the person print
out in an appropriate way.




JavaScript Numbers
JavaScript Objects
JavaScript Functions
Practice

A function is written as a code block (inside curly
{ } braces), preceded by the function keyword:

function functionname()
{
some code to be executed
}
The code inside the function will be executed
when "someone" calls the function.
 The function can be called directly when an
event occurs (like when a user clicks a button),
and it can be called from "anywhere" by
JavaScript code.




Computers love to repeat things. If you set it
up right, a computer will do the same thing
over and over and over and over again. A for
loop is great for telling a computer to do a lot
of stuff.
Check out this web site to see how it is done:
http://www.w3schools.com/js/js_loop_for.as
p
 You
can use the variables to send information
to the HTML page. This technique can work
to display many colors. The computer set up
many colors based on numbers. In addition
to the color pink the computer can also do
color FFEBF6. The colors increase based on
hex code, but we can stick to 10 base for
now.



Create a loop to display as many colors as
possible on the page.
Have the HTML use the for loop to fill the
page.
Have a large part of the page display different
colored text so the screen is completely filled.
 JavaScript
Function Syntax
 Loops
 Using
the for loop to see lots of colors
 Practice

Using the techniques shown in this unit, a
programmer can generate web pages that are
customized. In our last unit we made a web
page that can be marketable. All the lines
that we made can be written using the
JavaScript document.write command.
 Use
the techniques learned in this unit to
rewrite the HTML from unit 20 and have the
page created using a series of
document.write commands.
 Write
a paragraph to show up on the page
explaining what you have done.












Print Hello to page
Break up a sentence with backslash
Demonstrate how whitespace doesn’t matter
Show font size/color
Add comments to previous items
Declare 5 or more variables on self
Declare another 5
Place a comment after each variable explaining it.
Make function for object person.
The function works
Function has object for person’s attributes
Function prints objects to the screen
 Create
a loop to display as many colors as
possible on the page.
 Have the HTML use the for loop to fill the
page.
 Have a large part of the page display
different colored text so the screen is
completely filled.
 Part of a paragraph describing what done
 Complete paragraph describing what done




Generating HTML code with JavaScript
Practice
Rubric 1
Rubric 2