WD-8016F Service Manual (WD(M)-10160(5)F, WD(M)-80160F, WD(M)-65160F, WD-8016F)
INTRODUCTION TO WEB DEVELOPMENT AND...
Transcript of INTRODUCTION TO WEB DEVELOPMENT AND...
![Page 1: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/1.jpg)
INTRODUCTION TO WEB DEVELOPMENT AND HTML
Lecture 14: Programming with JavaScript - Spring 2011
![Page 2: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/2.jpg)
Outline
![Page 3: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/3.jpg)
Programming with JavaScript
![Page 4: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/4.jpg)
Programming with JavaScript
� Variable: is used to store some information. (names, numbers, etc)
� Operators: They do "things" to variables:
� Arithmetic: +, -, *, /
� Comparison: Compare strings, numbers, etc. For Example: 4 is equal to 5?
� Functions: A group of steps that will perform a desired operation
Control Structures:� Control Structures:
� Conditional: if / else / swtich
� Repeat: to repeat a single action or set of actions. for / while / break / continue
![Page 5: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/5.jpg)
Variables
� var userName = "Will Smith"
� alert(userName);
� Variables are Case sensitive!
� Must begin with a letter or an underscore. � Must begin with a letter or an underscore.
� Use descriptive names for your variables
![Page 6: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/6.jpg)
Operators
� Arithmetic operators: + - * / % ++ --
� 10 + 5 = 15
� 4 – 3 = 1
� 10 * 3 = 30
� 4 / 2 = 2
15 ++ = 16 (this increments by 1)� 15 ++ = 16 (this increments by 1)
� 8 -- = 7 (this decrements by 1)
� 8 % 5 = 3 (division remainder)
� Assignment operators
� Comparison operators
� Logical operators
![Page 7: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/7.jpg)
Assignment Operators ( =, +=, -=, /=,
%=)
� Assignment operators
� profit = income – expenses
� count = count + i �SAME � count += i
� count = count - i �SAME � count -= i
count = count / i �SAME � count /= i� count = count / i �SAME � count /= i
� count = count * i �SAME � count *= i
� count = count % i �SAME � count %= i
![Page 8: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/8.jpg)
Comparison Operators
� ==
� 4 == 3 // returns false
� !=
� 4 != 3 // returns true
� >
� <
� 4 < 3 // returns false
� >=
� 4 >= 3 // returns true
� <=>
� 4 > 3 // returns true
<=
� 4 <= 3 // returns false
![Page 9: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/9.jpg)
Logical Operators (Cont'd)
� && (AND Operator)
� ( 3 < 2 && 3 > 1 ) // returns false
� ?? (OR Operator)
� ( 3 < 2 ?? 3 > 1 ) //returns true
� ! (Not Operator)! (Not Operator)
� ! ( 3 < 2) //returns true
![Page 10: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/10.jpg)
String Operator
� You can add text to strings using the + operator.
� For example:
� firstName = "Bob"
� lastName = "Stewart"
� name = firstName + lastNamename = firstName + lastName
![Page 11: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/11.jpg)
Functions
� How to create a function in JavaScript?
function's name arguments
function calculateArea(width, height) {function calculateArea(width, height) {
area = width * height
return area
}
function body
Functions that returns a value MUSTuse a return statement.
![Page 12: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/12.jpg)
Function (Cont'd)
� Great! Now, we have created our function. But, how do we call it? How do we use it?
<form name=”frmArea” action=””>
Enter the width and height of your rectangle to calculate the
size:<br/>size:<br/>
Width:<input type=”text” name=”txtWidth” size=”5” /><br/>
Height:<input type=”text” name=”txtHeight” size=”5” /><br/>
<input type=”button” value=”Calculate area”
onclick="alert(calculateArea(document.frmArea.txt
Width.value, document.frmArea.txtHeight.value))"
/>
</form>
![Page 13: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/13.jpg)
JS Framework: Dojo Toolkit
� http://dojotoolkit.org/
![Page 14: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/14.jpg)
Get Dojo !
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
![Page 15: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/15.jpg)
Cool Examples with Dojo!!!
� See Examples in course site
![Page 16: INTRODUCTION TO WEB DEVELOPMENT AND HTMLcsit.udc.edu/~rpalomino/courses/summer11/wd/lectures/wd-lec-14.pdf · INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 14: Programming with](https://reader034.fdocuments.in/reader034/viewer/2022042916/5f56c5dabe8ec90d6c3b6d35/html5/thumbnails/16.jpg)
Questions?