int222 internet i - internet fundamentals
DESCRIPTION
INT222 Internet I - Internet Fundamentals. Week 1. Outline. Course Overview Internet Architecture Introduction to JavaScript Demo. Course Overview. Course outline https://scs.senecac.on.ca/course/int222 Course standards http://wsong18.wordpress.com/standards/ Academic Honesty Policy - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/1.jpg)
INT222Internet I - Internet Fundamentals
Week 1
![Page 2: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/2.jpg)
2
Outline
• Course Overview• Internet Architecture• Introduction to JavaScript • Demo
![Page 3: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/3.jpg)
3
Course Overview
• Course outlinehttps://scs.senecac.on.ca/course/int222
• Course standardshttp://wsong18.wordpress.com/standards/
• Academic Honesty Policyhttps://scs.senecac.on.ca/page/academic-honesty-policy
• In this course, you will learn web client (front-end) development concepts and techniques, using JavaScript, HTML and the DOM, and CSS.
![Page 4: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/4.jpg)
4
Evaluation
6 labs (1 % or 2% each) 10% 3 quizzes (1.5% or 2% each ) 5%3 assignments (6% + 6% + 8%=) 20%2 term tests (17% + 18%=) 35% Final exam
30%----------------------------------------------------Total 100%
![Page 5: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/5.jpg)
5
Promotion Policy
To obtain a credit in this subject, a student must:• Achieve a grade of 50% or better on the final
exam• Satisfactorily complete all assignments• Achieve a weighted average of 50% or better
for the tests and final exam• Achieve a grade of 50% or better on the
overall course
![Page 6: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/6.jpg)
6
Communication
• Blackboard• My web site:
http://wsong18.wordpress.com/
• INT222 course sitehttps://zenit.senecac.on.ca/~emile.ohan/int222/weekly.html
• Email:[email protected]
• Student help hours:http://zenit.senecac.on.ca/~wei.song/
• Office room: Tel -2101
![Page 7: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/7.jpg)
7
Coordinate with other sections
• Common assignments• Common labs (but different due dates)• Common final exams• Similar term tests• Similar quizzes?• Matched lectures– Lecture Slides on my web page– Weekly Notes on INT222 site
![Page 8: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/8.jpg)
8
Expectation
• Mine:– Be present. Practice.– Learning strategy:• Getting the big picture (concepts, framework,
architecture)• paying attention to the details (coding, syntax, hands-
on)• Memorizing something!
• Yours?
![Page 9: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/9.jpg)
Introduce to Internet architecture
![Page 10: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/10.jpg)
10
About the Internet architecture• The Internet’s architecture is described in its name, a short
form of the compound word “inter-networking”. • This architecture is based in the very specification of the
standard TCP/IP protocol, designed to connect any two networks which may be very different in internal hardware, software, and technical design.
• Once two networks are interconnected, communication with TCP/IP is enabled end-to-end, so that any node on the Internet has the near magical ability to communicate with any other no matter where they are. This openness of design has enabled the Internet architecture to grow to a global scale.
![Page 11: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/11.jpg)
11
The Internet map : router-based interconnectivity
![Page 12: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/12.jpg)
12
The Internet Reference Model and the protocol stack
• We may mainly deal with application (layer) protocols.
![Page 13: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/13.jpg)
13
Internet application protocols• Remote login category
– Telnet– SSH, Secure Shell
• File transfer category– FTP, File Transfer Protocol– TFTP, Trivial File Transfer
Protocol• Support services category
– DNS, Domain Name System– SNMP, Simple Network
Management Protocol– CMOT, Common Management
Information Protocol
•Electronic mail category– SMTP, Simple Mail Transfer Protocol– IMAP, Internet Message Access
Protocol– POP, Post Office Protocol•Other protocols─ HTTP, HyperText Transfer Protocol─ HL7, Health Level Seven─ LDAP, Lightweight Directory Access
Protocol─ NFS, Network File System─ DHCP, Dynamic Host Configuration
Protocol─ IRC, Internet Relay Chat─ …
![Page 14: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/14.jpg)
14
A port number is reserved for each the services on a server
• FTP (file transfer protocol) - usually on port 21• SFTP (Secure file transfer protocol) - usually on
port 22• SSH (Secure Shell) - used for secure logins -
usually on port 22• telnet - usually on port 23• http - usually on port 80
![Page 15: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/15.jpg)
15
Services provided by the Internet• World Wide Web (the Web )
– It is a collection of web pages connected through hyperlinks and URLs.– It is governed by the Hyper Text Transfer Protocol (HTTP) that deals
with the linking of files, documents and other resources of the web.• Electronic Mail (email)• Mailing List• File Transfer Protocol (FTP)• Instant Messaging• News Groups• Chat Rooms• Chat
![Page 16: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/16.jpg)
HyperText Transfer Protocol
![Page 17: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/17.jpg)
17
What is HTTP • HTTP, the Hypertext Transfer Protocol, is the application-layer
protocol that is used to transfer data on the (World Wide ) Web. • HTTP comprises the rules governing the format and content of
the conversation between a web client and server. • HTTP functions as a request-response protocol in the client-
server computing model. – It follows a classical client-server model, with a client opening a
connection, making a request then waiting for a response until it receives it.
• HTTP is stateless.– The server doesn't keep any data (state) between two requests.
• Latest version is HTTP 1.1
![Page 18: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/18.jpg)
18
HTTP transaction
![Page 19: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/19.jpg)
19
HTTP Request and response messages
![Page 20: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/20.jpg)
20
Structure of the HTTP request• A HTTP (client) request consists of text directives,
divided in three blocks:1. The first/request line contains a request method, the
HTTP protocol version used, followed by the path of the document.
2. The subsequent block represents specific request headers• Gives the server some information about what kind of data is
appropriate (e.g., what language, what MIME types) or some data altering its behavior (e.g., not sending an answer if it is already cached).
• This block ends with an empty line.
3. The final block is the optional data block/request body.• Contains further data and is mainly used by the POST method.
![Page 21: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/21.jpg)
21
An example of HTTP requests
• Fetching the root page of developer.mozilla.org, i.e. http://developer.mozilla.org/, and telling the server that the user-agent would prefer the page in French, if possible:
GET / HTTP/1.1 Host: developer.mozilla.org Accept-Language: fr
![Page 22: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/22.jpg)
22
Another example
• Sending the result of a form:
POST /contact_form.php HTTP/1.1 Host: developer.mozilla.org Content-Length: 64 Content-Type: application/x-www-form-urlencoded
name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue
![Page 23: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/23.jpg)
23
HTTP request methods
![Page 24: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/24.jpg)
24
Structure of a server response• Similarly to a client request, a server response
is formed of text directives, divided in three different blocks:1. The first block, the status line, consists of an
acknowledgment of the HTTP version used, followed by a response status codes.
2. The subsequent block contains response headers, giving the client some information about the data sent and ends with an empty line.
3. The final block is the data block/response body, which contains the data (if any).
![Page 25: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/25.jpg)
25
An example of server responses
• Successful reception of a web page:HTTP/1.1 200 OK Date: Sat, 09 Oct 2010 14:28:02 GMT Server: Apache Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT ETag: "51142bc1-7449-479b075b2891b" Accept-Ranges: bytes Content-Length: 29769 Content-Type: text/html
<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
![Page 26: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/26.jpg)
26
Another example
• A server notification that the requested resource doesn't exist:
HTTP/1.1 404 Not Found Date: Sat, 09 Oct 2010 14:33:02 GMT Server: Apache Last-Modified: Tue, 01 May 2007 14:24:39 GMT ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1" Accept-Ranges: bytes Content-Length: 10732 Content-Type: text/html
<!DOCTYPE html... (contains a site-customized page helping the user to find the missing resource)
![Page 27: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/27.jpg)
27
HTTP response status codes
![Page 28: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/28.jpg)
28
HTTP header fields
![Page 29: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/29.jpg)
29
HTTP Secure
• Hypertext Transfer Protocol Secure (HTTPS) is a communications protocol for secure communication over a computer network, with especially wide deployment on the Internet.
• Technically, it is not a protocol in and of itself; rather, it is the result of simply layering the Hypertext Transfer Protocol (HTTP) on top of the SSL(Secure Sockets Layer)/TLS(Transport Layer Security) protocol, thus adding the security capabilities of SSL/TLS to standard HTTP communications.
![Page 30: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/30.jpg)
Web Technology
![Page 31: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/31.jpg)
31
Web Technology Basic • The World Wide Web is a system of interlinked hypertext documents
accessed via the Internet. The two basic components of the Web are the Web browser client and the Web server.
• Three fundamental elements comprise the technology architecture of the Web:– Uniform Resource Locators (URL)
• A standard syntax used for creating identifiers that point to Web-based resources.• eg. https://zenit.senecac.on.ca/~int222_141a45/index.html
– protocol = https://– domain name = zenit.senecac.on.ca– path or URI - uniform resource indicator = ~int222_141a45/index.html
– Hypertext Transfer Protocol (HTTP) • This is the primary communications protocol used to exchange content and data
throughout the World Wide Web. URLs are typically transmitted via HTTP.– Markup Languages (HTML, XML)
• Markup languages provide a lightweight means of expressing Web-centric data and metadata. The two primary markup languages are HTML (which is used to express the presentation of Web pages) and XML (which allows for the definition of vocabularies used to associate meaning to Web-based data via metadata).
![Page 32: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/32.jpg)
32
Web Applications
• A distributed application that uses Web-based technologies (and generally relies on Web browsers for the presentation of user-interfaces) is typically considered a Web application.
• These applications can be found in all kinds of cloud-based environments due to their high accessibility.
![Page 33: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/33.jpg)
33
The common architectural abstraction for Web applications
• It is based on the basic three-tier model. – The first tier is called
the presentation layer, which represents the user-interface. • The presentation layer has components
on both the client and server-side. – The middle tier is the application
layer that implements application logic.
– The third tier is the data layer that is comprised of persistent data stores.
![Page 34: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/34.jpg)
34
Front-end web application
• The rising popularity of so-called “modern” web apps means that web developers are focusing on writing more and more front-end, or client-side code. Although back-end, or server-side code still plays an important factor, the fact is that web developers are working more directly with HTML5, CSS3, and JavaScript.
![Page 35: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/35.jpg)
35
The architecture for front-end web application
• What is the front-end/client-side doing?– Render UI– Interactivity– Logical requests to server– UI state management
• What is the server-side doing? – Authority on request integrity– Accessing/updating DB– Serving data
![Page 36: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/36.jpg)
36
Web Development
• is hard. • You must know at least 3 (often 4) programming
languages:– JavaScript
•the state and behavior of the frontend– CSS
• how things look–HTML
•structure of the UI/Document– Server Programming (INT322)
• Stateful storage and interaction with other servers
![Page 37: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/37.jpg)
Introduction to JavaScript
![Page 38: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/38.jpg)
38
What is a Script• A script is a high-level programming language that is
interpreted by another program at runtime rather than compiled by the computer's processor (as other programming languages such as C and C++ are).
• Some types of languages are client-side scripting languages, affecting the data that the end user sees in a browser window. Other scripting languages are server-side scripting languages that manipulate the data, usually in a database, on the server.
• Scripting languages came about largely because of the development of the Internet as a communications tool. JavaScript, ASP, JSP, PHP, Perl, Tcl and Python are examples of scripting languages.
![Page 39: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/39.jpg)
39
What is JavaScript?
• JavaScript (JS) is a cross-platform Web scripting language. – JavaScript always runs inside a host environment (mostly
the browser). • JavaScript is a prototype-based scripting language
with dynamic typing and has first-class functions.– There is no class in JS (constructors do what classes do). – The object-based language with prototyping: powerful
prototypal object-oriented language– In JavaScript every function is actually a Function object.
![Page 40: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/40.jpg)
40
About JavaScript
• JavaScript is one of the world's most popular programming languages .– The role as the scripting language of the WWW.– simple and easy to learn
• JavaScript is the world's most misunderstood programming language.– The name, typecasting, used by amateurs, object-
oriented,…• JavaScript is, in the future, the most important
language you will learn(? Dart?)
![Page 41: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/41.jpg)
41
JavaScript History• JavaScript was developed in 1995 by Brendan Eich at Netscape,
now a division of America Online. • JavaScript started with simple one-liners embedded in HTML.• The JavaScript backlash (incompatibility, …) caused some web
projects to completely ban any client-side programming and trust only their predictable and reliable server.
• ECMAScript (European Computer Manufacturers Association) was born, making healthier environment.
• JavaScript is now used in much more sophisticated ways. – Developers leverage the object-oriented nature of the language to
build scalable code architectures made up of reusable pieces. – JavaScript provides behavior, the third pillar in today's paradigm
• web pages consist of three clearly distinguishable parts: content (HTML), presentation (CSS), and behavior (JavaScript).
![Page 42: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/42.jpg)
42
The Present• Today, you can use JavaScript to do all of this:
– Create rich and powerful web applications (the kind of applications that run inside the web browser, such as Gmail)
– Write server-side code such as ASP scripts or, for example, code that is run using Rhino (a JavaScript engine written in Java)
– Create rich media applications (Flash, Flex) using ActionScript, which is based on ECMAScript
– Write scripts that automate administrative tasks on your Windows desktop, using Windows Scripting Host
– Write extensions/plugins for a plethora of desktop application such as Firefox, Dreamweaver, and Fiddler
– Create web applications that store information in an off-line database on the user's desktop, using Google Gears
– Create Yahoo! Widgets, Mac Dashboard widgets, or Adobe Air applications that run on your desktop
![Page 43: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/43.jpg)
43
Front-end Apps Demo
The PlanetariumBeautiful Web Introduction to the solar system
BananBreadWeb FPS shoorter
CSS TricksWeb Animation (using data from 3d body tracking)
![Page 44: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/44.jpg)
Let’s start with JavaScript
![Page 45: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/45.jpg)
45
Firefox Scratchpad• Why use Scratchpad?
– JavaScript always runs inside a host environment (mostly the browser).
• To use Scratchpad, go to the “Web Developer” menu (hint for Mac users: look for the “Web Developer” menu under “Tools”). Select “Scratchpad” from that menu, and you’ll get a text editor window.
• Shortcut: Shift+F4• How to run a script:
1. Enter some code 2. Select a portion of the code 3. Choose one of the three commands from the Execute
![Page 46: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/46.jpg)
46
prompt()
• This built-in function (of the Window object) will display a dialog box (Modal window) that prompts the visitor for input.
• Gets user input. Rarely used.• Example code:
var ok = prompt("Are you OK?");alert(ok);
1+2; // Instpct/display executes the selected code,
//and the result is put right into your editor.
![Page 47: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/47.jpg)
47
alert()
• Pops up an alert box (Modal window) with a message and an OK button.
• Outputs info.• Example code:
function sayHello() { alert("Hello from the Scratchpad");}
sayHello();alert("This is alert 2");alert(42);
![Page 48: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/48.jpg)
48
console.log()
• Shows a message in web console.• Outputs info.• Example code:
var someObject = { str: "Some text", id: 5 }; console.log(someObject);
• View log:– Ctrl + Shift + J to open browser console.
![Page 49: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/49.jpg)
49
Create/edit/save the source code
• Although web client programming allows us to place JavaScript inline or internal to a document , we prefer that you store your JavaScript code in its own source code file.
• You can use any text editor, Scratchpad or programmer’s editor.
• We suggest that you store your code in the xxx/js folder, and name each source code file by using a .js extension.
![Page 50: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/50.jpg)
50
LET’S TAKE A LOOK AT SOME SYNTAX
![Page 51: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/51.jpg)
51
JavaScript is a C-family/style language• A rich set of operators are available, using a comfortable
C-like syntax.• Statements should end with a ; semicolon, just like in C.• Expressions are also similar to C, and you can use
operators on objects without conversions.• Curly braces { } are used as code block delimiters.
Scoping follows rules similar to C (but are different, as you will learn).
• Similar to C, if-else (including the ? : syntax) and switch-case are available in JS.
• for and while are available in JS.
![Page 52: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/52.jpg)
52
Comments and more
• JavaScript supports two kinds of comments: – A block comment starting with /* and ending with
*/ that may span several lines. • (This is the same form as a CSS comment.)
– A line comment that starts with // and goes to the end of the line.
• JavaScript is case-sensitive
![Page 53: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/53.jpg)
53
Declare and Refer Variables
• You must use the “var” keyword to precede a variable name.
• Unlike the C language, you do not need a type specifier. – The variable’s initial value will set its initial type.
• Declaration syntax:var variableName;var variableName = value;// Referring to and using syntax:variableName = someValue;document.write(variableName);
![Page 54: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/54.jpg)
54
Arithmetic OperatorsOperator
Operation Example
+ addition of numbersConcatenation of strings
y + x; “INT” + “222”
- subtraction x - y;
* multiplication x * y;
/ division x / y;
% modulo x % y; // remainder of x divided by y
++ post/pre -increment x = y++; // assign y to x, then increment y (y+=1) x = ++y; //increment y < (y+=1), then assign y to x
-- post/pre decrement x = y--; // assign y to x, then decrement y (y-=1) x = --y; // decrement y < (y-=1), then assign y to x
![Page 55: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/55.jpg)
55
Assigning ValuesOperator Example Equivalent For
= a = b; a = b; numbers or strings
+= a += b; a = ( a + b); numbers or strings
-= a -= b; a = ( a - b); numbers
*= a *= b; a = ( a * b); numbers
/= a /= b; a = ( a / b); numbers
%= a %= b; a = ( a % b); // divide a by b, // assign remainder to a numbers
![Page 56: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/56.jpg)
56
Logical OperatorsOperator Operation Example
&& Logical AND expr1 && expr2
|| Logical OR expr1 || expr2
! Logical NOT !expr1
![Page 57: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/57.jpg)
57
Other Operators
• Conditional Operator:Result = (condition)?"if true":"if false";e.g. var Grade=(mark<50)?"Fail":"Pass";
• The typeof operator (for variable or values):– possible return values:
"undefined“, "object“, "boolean“, "number“, "string“, "function“, "xml“, "object“
• The instanceof operator– …
![Page 58: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/58.jpg)
58
Comparison OperatorsOperator Description Example
==Equal
(The operands are converted to the same type before being compared.)
1 == 1 is true1 == "1" is true1 == true is true0 == false is true
===strictly equal
(There is no type conversion.)1 === 1 is true
1 === "1" is false1 === true is false0 === false is false
!= not equal(with type conversion)
1 != 1 is false1 != ‘1’ is false
!== not equal(without type conversion)
1 !== 1 is false1 !== ‘1’ is true
> greater than expr1 > expr2
>= greater than or equal to expr1 >= expr2
< less than expr1 < expr2
<= less than or equal to expr1 <= expr2
![Page 59: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/59.jpg)
59
Strings and Quotation Marks
• Literal strings can be denoted by either single or double quotes, which gives you some flexibility about how to handle awkward situations such as quotation marks inside a string:
Expression Values
"Let’s start with JavaScript” Let’s start with JavaScript
'Not "it"!' Not "it"!
![Page 60: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/60.jpg)
60
Concatenation of Strings
• The main operation on strings is the concatenation operator, +:
Expression Value
“INT" + “222" INT222“Stephen” + “ Harper” Stephen Harper
![Page 61: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/61.jpg)
61
The prompt() Function
• Examples:var a = prompt("Enter first number"); // enter 11var b = prompt("Enter second number"); // enter 12var result = a + b;alert("The result is " + result); // What is the result?
• Default valuesvar school = prompt("What is your school?", “Seneca");alert("Oh, you go to "+school+". How nice.");
• Warning: The prompt() function does not work properly in certain browsers. So it's best not to use it in projects.
![Page 62: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/62.jpg)
62
The parseInt() and parseFloat()
• Used to convert from a string of digits to numbers.
• The second argument to parseInt() is the radix or base that you want to use.
Expression ValueparseInt("243",10) 243parseInt("cs110",10) NaN (Not a Number)parseFloat("3.141") 3.141parseInt("3.141",10) 3
![Page 63: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/63.jpg)
63
Lab Practices
• Lab on the INT222 Site:– Updating your index.html– Due on:• Section D: Jan 11, 2014• Section C: Jan 16, 2014
• Practice Scratchpad
![Page 64: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/64.jpg)
64
Week 1 reading reference
• HTTP (MDN): https://developer.mozilla.org/en-US/docs/HTTP
• Firefox Developer Tool – Scracthpad (MDN): https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
• (Core) JavaScript Guide (MDN): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• JavaScript Syntax Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements
![Page 65: INT222 Internet I - Internet Fundamentals](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816909550346895de01d18/html5/thumbnails/65.jpg)
65
Thank You !
• The matched content for this slides can also be found on the INT222 Course Site Weekly Notes:1. Week 01 - January 6, 20142. Week 02 - January 13, 2014