1 / 21

Introduction to JavaScript

Introduction to JavaScript. Please see speaker notes for additional information!. JavaScript is used within HTML. To run JavaScript, we will use HTML. The JavaScript will be enclosed in the HTML. HTML is run by a browser so

dbertram
Download Presentation

Introduction to JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to JavaScript Please see speaker notes for additional information!

  2. JavaScript is used within HTML To run JavaScript, we will use HTML. The JavaScript will be enclosed in the HTML. HTML is run by a browser so if you have a browser you can test your code. The code is written in notepad and then opened for testing in the browser. Since JavaScript is written within HTML, when you save your code, you will give it an HTML extension. JavaScript is coded within the SCRIPT tag within HTML. First we use the HTML tag to tell the browser we are coding HTML and then we use the script tag to tell the browser we are using a scripting language The language attribute is used to designated that JavaScript is the scripting language being used. Note that when we end the script we use </script> and when we end the html, we use </html>. The insertion of the slash, is the standard html for showing that the tag is an ending tag. <html> <script language=“JavaScript”> code </script> </html>

  3. Objects, methods and properties JavaScript uses some of the concepts of Object Orientation (OO), so it is of value to have a basic understanding of the Object Oriented vocabulary and concepts. Anobject is an entity or a thing. You and I are objects, the computer is an object and the code we produce is an object. Propertiesare the attributes that describe an object. A person has a certain color hair, eyes etc. that are properties because they areattributesof the person that help to describe the person and make them who they are. In programming properties are coded with the object by putting a period/dot between them. For example, rug.style is referring to the object rug and its style property. Taking this one step further, rug.style=“oriental” means the object is a rug and the style property has a value of oriental while rug.color=“brown” still means the object is a rug, but we are now talking about the property color which has a value of brown. Another example: stove.color=“beige” means that the object stove has a property of color which has a value of beige. Methods are an action or function that the property can perform. For example a person can talk or listen and a stove can bake or broil. Again, the method is coded with the object by putting a period/dot between them. For example stove.bake refers to the making method of the stove object. The value given to the method is an argument. For example: stove.bake(“turkey”) means the object stove has a method bake. Currently, the think being baked in the stove is a turkey so the turkey is the argument for bake. In JavaScript when we say document.write(“This is CIS17”), the document is the object, write is the method and the argument that is being written is the message This is CIS17. Note that arguments can be literals as in these examples or variables. With a variable we would code document.write(mymsg) where mymsg is defined as a variable. You could then make mymsg equal to “This is CIS17”.

  4. Basic concepts - Cautions Cautions... • JavaScript is very case sensitive • Use separate lines for each command • Be careful with parenthesis and quotes • Use single quotes within double quotes • Use a semi-colon after commands as shown in examples

  5. <html> <script language="JavaScript"> document.write("Hello World!"); alert("Hello World!"); </script> </html>

  6. The JavaScript var (for variable) can be used to define a field (note that you can eliminate the command var and it will still work). In this example, I have defined three variables and given them all an initial value of 0. <html> <script language="JavaScript"> var ans = 0; var firstnum = 0; var secondnum = 0; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); ans = firstnum * secondnum; document.write(ans); </script> </html> The prompt can be used to take in data. The message in quotes is used to ask the user for input and the 0 indicates it is numeric input. Note that the data that was keyed in with the first prompt was assigned to firstnumand the data that was keyed in with the second prompt was assigned to secondnum. ans = firstnum * secondnum; This takes the two numbers stored in firstnum and secondnum and multiplies them together. The results are stored in ans. document.write(ans); I am now using the write method to put ans to the screen. Note that ans is a variable, not a literal so it is not enclosed in quotes.

  7. <html> <script language="JavaScript"> var ans = 0; var firstnum = 0; var secondnum = 0; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); ans = firstnum * secondnum; document.write("The answer is ", ans); </script> </html> The only change here is in the document.write where I am writing the literal “The answer is ” and then the variable answer, ans. Note that I separated the literal and the variable with a comma.

  8. <html> <script language="JavaScript"> var ans = 0; var firstnum = 0; var secondnum = 0; var whattodo; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); whattodo = prompt("Enter * or /",""); if (whattodo == "*") { ans = firstnum * secondnum; } else { ans = firstnum / secondnum; } document.write("The answer is ", ans); </script> </html> I could have given whattodo and initial value of space (written as “ “). Note the = = when I am making the check for is equal to.

  9. Remember, in JavaScript when I want to test to see if two things are equal, I use = =. <html> <script language="JavaScript"> if (navigator.appName == "Netscape") { document.write("The browser is Netscape Navigator<BR>"); document.write("Netscape is in use!!!"); } else { document.write("Probably it is Internet Explorer<BR>"); document.write("I know it is not Netscape"); } </script> </body> </html> At the end of each command inside the curly brackets I put the semi-colon. Now I am writing an if statement. I am testing to see if the browser is Netscape. I do this by testing to see if navigator.appName is equal to the word Netscape. If it is, I do the commands inside the first set of curly brackets. If it not true, I do the code inside the set of curly brackets that follows the else.

  10. On this slide, I am showing the testing of checkbrowser.html using Netscape.

  11. The while says to do this loop while the contents of the ct variable is less then or equal to the contents of the data_input variable. Note that the data_input variable contains user input. The ct variable is controlled by the program. <html> <script language="JavaScript"> var data_input = 0; data_input=prompt("How many times should I write the line?",0); var ct=1; while (ct <= data_input) { document.write("This is number " + ct + "<br>"); ct = ct + 1; } document.write("<br>" + "This is the end!!!") </script> </html> The + means concatenation so I am putting the three things together in the document.write - see speaker notes. When the loop ends the message, This is the end is written. Note that the <br> means that it will be written after moving to a new line. Inside the loop, I increment ct by 1 using the structure ct = ct + 1. This means that eventually ct will no longer be less than or equal to the number that the user inputted so the loop will end.

  12. <html> <script language="JavaScript"> monthArray = new Array(12); monthArray[1]="January"; monthArray[2]="February"; monthArray[3]="March"; monthArray[4]="April"; monthArray[5]="May"; monthArray[6]="June"; monthArray[7]="July"; monthArray[8]="Auguest"; monthArray[9]="September"; monthArray[10]="October"; monthArray[11]="November"; monthArray[12]="December"; var user_month = 0; var user_day = 0; var user_year = 0; user_month = prompt("Enter the month as a number",0); user_day = prompt("Enter the day",0); user_year = prompt("Enter the year",0); document.write("The date is " + monthArray[user_month] + " " + user_day + ", " + user_year); </script> </html> Here I have defined an array and filled the array - I decided not to use the 0th element even though it would be available with this definition. Now I am taking in user input for the month, day and year. Now I am concatenating the literals, spaces and parts of the date together to produce the output. The [ ] holds the index/subscript/pointer which selects which element of the array I want. The elements are named monthArray.

More Related