c12012oct914.notebook october 09, 2014cisweb.bristolcc.edu/.../cis120/c12012oct914.pdf · 2014. 10....

25
c12012Oct914.notebook 1 October 09, 2014 Our first JavaScript program.

Upload: others

Post on 03-Apr-2021

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

1

October 09, 2014

Our first JavaScript program.

Page 2: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

2

October 09, 2014

Right click and select View Page Source to see the code that made this page.

Page 3: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

3

October 09, 2014

The JavaScript is inside html. I didminimum html so we could focus onJavaScript.

I tell the browser that I am going tostart using JavaScript by usingthe script tag.

I am doing the write method on the document. So, I am writing the contents of the parenthesis.I am writing the literal Hello World! which because it is a literal is enclosed in quotes.

alert() will put the literalHello World! in the prompt.

Note that each of the JavaScript code lines ends in a semi­colon.The semi­colon means that instructor is done.

Note that the script has a .html extension.

Page 4: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

4

October 09, 2014

Page 5: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

5

October 09, 2014

The next JavaScript, multiply.html will ask the user to input two numbers. The user types one number, clicks OK and will then be prompted for the next number.

Page 6: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

6

October 09, 2014

Next it will prompt for the second number.

Page 7: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

7

October 09, 2014

67

Page 8: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

8

October 09, 2014

Page 9: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

9

October 09, 2014

Here the write will put out the literal followed by the number stored in the variable ans.Note that I left a space after is so there would be a space between the literal and the 24.

Page 10: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

10

October 09, 2014

Page 11: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

11

October 09, 2014

parseFloat deals with decimal numbers and parseInt deals with integers.

parseFloat specifies thatfirstnum and secondnumwill be numbers so the + causes an ADD to happen.

Here firstnum andsecondnum areconcatenatedto make 83.

document.write("<br>"); has a literal <br> and that literal is a tag so a line is skipped.

Page 12: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

12

October 09, 2014

Page 13: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

13

October 09, 2014

Data comes in a text or string. If I add I want numbers. I usethings like parseFloat to convert from text to number format sowe can use the data in a calculation.

I can also use + or Numberto convert.

parseFloat allows for decimalsparseInt allows for whole numbers

Page 14: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

14

October 09, 2014

72

Page 15: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

15

October 09, 2014

When I calculate and assign to a variable ortake in data and assignto a variable, I use =.

When I compare forequality I use ==.

What to do if the condition is true is enclosed in curly braces.After the else, you enclose what to do if the condition is false in curly braces.

Page 16: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

16

October 09, 2014

"" means that a field is empty or null.condition is in parenthesis

Page 17: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

17

October 09, 2014

Page 18: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

18

October 09, 2014

What happens if I enter something other than or * or /. As we saw, if I enter a + or a B or a 5you will take the else and do the divide.

Page 19: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

19

October 09, 2014

Now if the user does not enter an *, I check to see if they entered a /. If that is not true then I decided to move 0 to ans. I could have also put out an errormessage.

Next I need to put this in the JavaScript code.

Page 20: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

20

October 09, 2014

The else is now going to ask the second question. The second question is whether wanttodo == /. If it does I will do a divide,if it does not I will set ans = 0.

Page 21: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

21

October 09, 2014

The else is now going to ask the second question. The second question is whether wanttodo == /. If it does I will do a divide,if it does not I will set ans = 0.

Note after the else I have two curly braces and embedded inside themI ask the next question and deal with its yes and its no.

Page 22: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

22

October 09, 2014

Need to add the + and ­

Page 23: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

23

October 09, 2014

Now I want to deal with + ­ as well as * /

Page 24: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

24

October 09, 2014

Page 25: c12012Oct914.notebook October 09, 2014cisweb.bristolcc.edu/.../CIS120/c12012Oct914.pdf · 2014. 10. 10. · c12012Oct914.notebook 9 October 09, 2014 Here the write will put out the

c12012Oct914.notebook

25

October 09, 2014