DOC PREVIEW
CSUDH TBE 540 - JavaScript Lesson 1

This preview shows page 1-2-16-17-18-33-34 out of 34 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 34 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

JavaScript Lesson 1PrerequisitesObjectivesWhat is JavaScript?Slide 5Slide 6What can you do with JavaScript?Slide 8How do you add JavaScript to a web page?Slide 10Slide 11JavaScript - SampleSlide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Self Check - JS Lesson 1Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33Try some!JavaScript Lesson 1TBE 540PrerequisitesBefore beginning this lesson, the learner must be able to…Create a basic web page using a text editor and/or a web page editor.Edit the existing HTML code of a web page.ObjectivesThe learner will be able to successfully add JavaScript code to a web page.The JavaScript will produce a useful effect and enhance the page’s value to the user.What is JavaScript?JavaScript is a programming language. This means that the instructions you write in JavaScript will make something happen.You can include it easily within the HTML code of a web page to customize the page.What is JavaScript?•JavaScript is related to Java and C++, but it does not need to be “compiled” (translated to binary) before it is used.•JavaScript is not the same as Java.What is JavaScript?•JavaScript code is “interpreted” - the browser executes each line of code as it is encountered.•JavaScript is free and many existing samples are available. (see TBE 540 HTML page for links)What can you do with JavaScript?Visit the links from Lesson 8 on the TBE 540 HTML page to see what can be done using JavaScript. (http://www.csudh.edu/fisher/tbe540/lesson8.html)Would any of these JavaScript samples be appropriate for your web project?Later you will learn how to add JavaScript code to your pages.What can you do with JavaScript?How do you add JavaScript to a web page?If you are going to add JavaScript, it is necessary to be able to edit the HTML code of a web.If you are using a web editor and are unsure of how to edit HTML code, check HELP in your editor.How do you add JavaScript to a web page?At first (maybe always) you will be simply pasting in JavaScript code copied from other sources.Sometimes you will customize the code.You can also type the code into your HTML.How do you add JavaScript to a web page?When you copy or type the code, notice where it should go.JavaScript is most commonly placed in the <HEAD> section of a page, but there are often parts that must go elsewhere.JavaScript - SampleHere is an explanation of a simple use of JavaScript - asking a question and displaying an answer.You will try this in the Fun with Buttons! exercise.In this case, there will be a JavaScript function (small program) called getName() placed in the HEAD section of the HTML.It will ask for a name and print Hi and the name.JavaScript - SampleHere’s what the function looks like (explanations follow):<script language="JavaScript">var stName="XX"function getName() {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - SampleThe script tags are needed to identify this code as JavaScript.<script language="JavaScript">var stName="XX"function getName() {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - SampleThe line beginning var sets up a variable called stName with a beginning value of XX (just to fill it up).<script language="JavaScript">var stName="XX"function getName () {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - Samplefunction getName() defines the name of the function (notice the two parentheses).<script language="JavaScript">var stName="XX"function getName() {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - SampleThe braces { } show where the function begins and ends.<script language="JavaScript">var stName="XX"function getName() {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - SampleThe line beginning stName= displays the message Please enter your name and waits for an entry, which will become the value of stName.<script language="JavaScript">var stName="XX"function getName() {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - SampleThe line beginning alert displays Hi, and the value of the variable stName.<script language="JavaScript">var stName="XX"function getName( ) {stName=prompt("Please enter your name"," ") alert("Hi, " + stName)} </script>JavaScript - SampleJavaScript - SampleSomething has to start the getName() function.In the Fun with Buttons! exercise, it will be clicking on a graphic or a “form” button (more about forms in a later lesson).JavaScript - SampleTo start a function, its name will be somewhere in the HTML: getName()You will see this code in an IMG tag: onclick=“getName()”When the graphic is clicked, the function starts.JavaScript - SampleYou will also see this code between <FORM> and </FORM> tags: <input type="button" value="HI" onclick="getName()“>FORMs are used to make buttons and input boxes appear on a web page.Self Check - JS Lesson 1True or false - JavaScript and Java are exactly the same thing.Self Check - JS Lesson 1True or false - JavaScript and Java are exactly the same thing.False - Java must be “complied” (translated to binary) before running, while JavaScript runs automatically every time the web page is opened. Java is also much more powerful than JavaScript.Self Check - JS Lesson 1JavaScript is most often found in the _____ section of the HTML code for a web page.<HEAD><BODY><TABLE><LIST>Self Check - JS Lesson 1JavaScript is most often found in the _____ section of the HTML code for a web page.<HEAD><BODY> {may be here, too}<TABLE><LIST>Self Check - JS Lesson 1Which of the following is the correct way to begin JavaScript?<SCRIPT LANGUAGE=“Javascript”><SCRIPT LANGUAGE=“JavaScript”><JAVASCRIPT><JavaScript>Self Check - JS Lesson 1Which of the following is the correct way to begin JavaScript?<SCRIPT LANGUAGE=“Javascript”><SCRIPT LANGUAGE=“JavaScript”> *<JAVASCRIPT><JavaScript>* {upper and lower case must be exact}Self Check - JS Lesson 1Suppose you created a function called HAPPY(). What command would activate the function? happy()HAPPYHAPPY()Self Check - JS Lesson 1Suppose you created a function called HAPPY().


View Full Document

CSUDH TBE 540 - JavaScript Lesson 1

Download JavaScript Lesson 1
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view JavaScript Lesson 1 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view JavaScript Lesson 1 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?