CS105 Introduction to Computer Concepts Project
advertisement
CS105 Introduction to
Computer Concepts
Project
Code academy
• http://www.codecademy.com/courses/my-first-webpage/0/1
practice HTML+CSS
Build your static webpage
• Find a sample webpage
e.g., http://www.htmlandcssbook.com/code-samples/chapter-17/example.html
• Make modifications
Build your dynamic webpage
• Using template
• http://www.cs.umb.edu/~yangmu/cs105/pizza/
• Make modifications
JAVASCRIPT
• JavaScript is used in millions of Web pages to improve the
design, validate forms, detect browsers, create cookies, and
much more.
• JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as Internet
Explorer, Mozilla, Firefox, Netscape, Opera.
6/30/2016
CS105 Section 1 - Lecture 9 - 3
5
WHAT IS JAVASCRIPT?
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language (a scripting language is a
lightweight programming language)
• A JavaScript consists of lines of executable computer code
• A JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
• Everyone can use JavaScript without purchasing a license
6/30/2016
CS105 Section 1 - Lecture 9 - 3
6
Are Java and JavaScript the Same?
• NO!
• Java and JavaScript are two completely different languages in
both concept and design!
• Java (developed by Sun Microsystems) is a powerful and much
more complex programming language - in the same category as
C and C++.
6/30/2016
CS105 Section 1 - Lecture 9 - 3
7
How to Put a JavaScript Into an HTML Page?
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
6/30/2016
CS105 Section 1 - Lecture 9 - 3
8
Ending Statements With a Semicolon?
• With traditional programming languages, like C++ and Java,
each code statement has to end with a semicolon (;).
• Many programmers continue this habit when writing
JavaScript, but in general, semicolons are optional! However,
semicolons are required if you want to put more than one
statement on a single line.
6/30/2016
CS105 Section 1 - Lecture 9 - 3
9
JavaScript Variables
• Variables are used to store data.
• A variable is a "container" for information you want to store. A
variable's value can change during the script. You can refer to a
variable by name to see its value or to change its value.
• Rules for variable names:
• Variable names are case sensitive
• They must begin with a letter or the underscore character
• strname – STRNAME (not same)
6/30/2016
CS105 Section 1 - Lecture 9 - 3
10
Arithmetic Operators
Operator
+
Description
Example
Addition
x=2
Result
4
y=2
x+y
-
Subtraction
x=5
3
y=2
x-y
*
Multiplication
x=5
20
y=4
x*y
/
Division
15/5
5/2
%
++
Modulus (division remainder)
Increment
3
2,5
5%2
1
10%8
2
10%2
0
x=5
x=6
x++
--
Decrement
x=5
x=4
x--
6/30/2016
CS105 Section 1 - Lecture 9 - 3
11
Assignment Operators
6/30/2016
Operator
Example
Is The Same As
=
x=y
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
CS105 Section 1 - Lecture 9 - 3
12
Comparison Operators
Operator
Description
Example
==
is equal to
5==8 returns false
===
is equal to (checks for both value and type)
x=5
y="5"
x==y returns true
x===y returns false
6/30/2016
!=
is not equal
5!=8 returns true
>
is greater than
5>8 returns false
<
is less than
5<8 returns true
>=
is greater than or equal to
5>=8 returns false
<=
is less than or equal to
5<=8 returns true
CS105 Section 1 - Lecture 9 - 3
13
JavaScript Basic Examples
<script>
document.write("Hello World!")
</script> format text with HTML code - heading
<script>
alert("Hello World!")
</script>
6/30/2016
CS105 Section 1 - Lecture 9 - 3
14
Example
<script>
x=“Hello World!”
document.write(x)
</script>
<script>
x=“String Example….”
document.write(“Print x=” +x)
</script> use line break html code
6/30/2016
CS105 Section 1 - Lecture 9 - 3
15
JavaScript Popup Boxes
• Alert Box
• An alert box is often used if you want to make sure information comes
through to the user.
• When an alert box pops up, the user will have to click "OK" to proceed.
<script>
alert("Hello World!")
</script>
6/30/2016
CS105 Section 1 - Lecture 9 - 3
16
JavaScript Popup Boxes - 2
• Confirm Box
• A confirm box is often used if you want the user to verify or accept
something.
• When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
• If the user clicks "OK", the box returns true. If the user clicks "Cancel",
the box returns false.
6/30/2016
CS105 Section 1 - Lecture 9 - 3
17
JavaScript Popup Boxes - 3
• Prompt Box
• A prompt box is often used if you want the user to input a value before
entering a page.
• When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
• If the user clicks "OK“, the box returns the input value. If the user clicks
"Cancel“, the box returns null.
6/30/2016
CS105 Section 1 - Lecture 9 - 3
18
Prompt Box Example
<script>
x=prompt (“Enter a value:”, “ ”)
document.write(“Value entered <br>”,+x)
</script>
6/30/2016
CS105 Section 1 - Lecture 9 - 3
19
Conditional Statements
• Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
• if statement - use this statement if you want to execute some code only if a specified
condition is true
• if...else statement - use this statement if you want to execute some code if the condition
is true and another code if the condition is false
• if...else if....else statement - use this statement if you want to select one of many
blocks of code to be executed
6/30/2016
CS105 Section 1 - Lecture 9 - 3
20
Conditional Statements - 2
if (condition)
{
code to be executed if condition is true
}
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
6/30/2016
CS105 Section 1 - Lecture 9 - 3
21
Conditional Statements Examples
<script>
x=3
if(x<0)
{
alert (“negative”)
}
else
{
alert (“positive”)
}
</script>
6/30/2016
CS105 Section 1 - Lecture 9 - 3
22
Adding 2 numbers using HTML input
form
• http://employees.oneonta.edu/higgindm/javascript/AddNums
Ex.html
6/30/2016
CS105 Section 1 - Lecture 9 - 3
23