CSE 130
Programming Language Principles & Paradigms
Lecture #
JavaScript I
CSE 130
Programming Language Principles & Paradigms
Lecture #
Materials
The information here is dominantly derived from JavaScript: The Complete Reference 2nd edition which is a class recommended text There are plenty of other good resources online about JavaScript, but there is also quite poor discussions about it youve been warned Tools
Browsers (Firefox, IE, Opera, Safari, etc.) Debugging and DOM focused toolbars (Web Developer Toolbar, Firebug, etc.) Text editor that is JS aware Aptana, Dreamweaver, Eclipse, etc.
CSE 130
Programming Language Principles & Paradigms
Lecture #
Intro JavaScript is premier client-side scripting language used in Web development
Note especially
Client side Focus on web development Scripting
Part of the client-side triangle consisting of (X)HTML, CSS and of course JavaScript
Manipulation of mark-up and style via the document object model or DOM
CSE 130
Programming Language Principles & Paradigms
Lecture #
Helloworld
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Hello World</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1>First JavaScript</h1> <hr /> <script type="text/javascript"> document.write("Hello World from JavaScript!"); </script> </body> </html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
HTML JavaScript Intermixture
The interplay between (X)HTML and JavaScript can be tricky at first
<script type="text/javascript"> // Careful on tag and script intermixture <strong> document.write("Hello World from JavaScript!"); </strong> </script>
Instead you would do
<script type="text/javascript"> document.write("<strong>Hello World from </script> JavaScript!</strong>");
or even
<strong> <script type="text/javascript"> document.write("Hello World from JavaScript! "); </script> </strong>
CSE 130
Programming Language Principles & Paradigms
Lecture #
JavaScripts Silent Failings
Most browsers will give minimal feedback that a JavaScript failure is occurring
Look in the lower left corner of the status bar in IE to double click on the warning icon You may see in Mozilla browsers a status bar message like JavaScript errors occurred or similar
Make sure you can turn on your browsers error reporting
IE (Tools > Internet Options > Advanced) Mozilla (use javascript: URL or (Tools > JavaScript Console)
A little homework: Browse the Web with JavaScript error reporting on
CSE 130
Programming Language Principles & Paradigms
Lecture #
Adding JavaScript to HTML Documents There are four standard ways to include script in an (X)HTML document:
1.Within the <script> element 2.As a linked file via the src attribute of the <script> element 3.Within an (X)HTML event handler attribute such as onclick 4.Via the pseudo-URL javascript: syntax referenced by a link
Note: There may be other approaches but they are non-standard
CSE 130
Programming Language Principles & Paradigms
Lecture #
<script> Tag The <script> tag (<script> </script>) in all major browsers interprets contents as JavaScript unless one of the following occurs:
Inclusion of language attribute <script language=VBS> </script> Inclusion of type attribute <script type=text/javascript> </script> The type attribute is W3C recommended, language more common and in many ways more useful Note: A <meta> tag can also be used to set the script language document wide or even by a Web server.
<meta http-equiv=Content-Script-Type content=text/javascript />
CSE 130
Programming Language Principles & Paradigms
Lecture #
Top-to-Bottom Execution
You can use as many <script> tags as you like in both the <head> and <body> and they are executed sequentially.
<h1>Ready start</h1> <script language="Javascript" type="text/javascript"> alert("First Script Ran"); </script> <h2>Running</h2> <script language="Javascript" type="text/javascript"> alert("Second Script Ran"); </script> <h2>Keep running</h2> <script language="Javascript" type="text/javascript"> alert("Third Script Ran"); </script> </h1>Stop!</h1>
Fun threading issue since you are running a JavaScript interpreter within a browser it is possible to see different amounts of text before/after alerts. This is more pronounced with long running scripts or network activity.
CSE 130
Programming Language Principles & Paradigms
Lecture #
Script in <head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript in the Head</title> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> <script type="text/javascript"> function alertTest() { alert("Danger! Danger! JavaScript Ahead"); } </script> </head> <body> <h2>Script in the Head</h2> <hr /> <script type="text/javascript"> alertTest(); </script> </body> </html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Script Masking and <noscript>
Script Hiding using HTML and JavaScript comments
<script type="text/javascript"> <!-put your JavaScript here //--> </script> Avoids printing script onscreen in non-script aware browsers, really of limited value given newer browsers and your end goal of code seperation
<noscript> Element
Useful to provide alternative rendering in browsers that have script off or dont support script <noscript> <strong>Either your browser does not support JavaScript or it is currently disabled.</strong> </noscript> Next example shows a great way to keep non-JavaScript aware users out of your site
CSE 130
Programming Language Principles & Paradigms
Lecture #
<noscript> Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Masked</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head> <body> <script type="text/javascript"> <!-document.write("Congratulations! If you see this you have JavaScript."); //--> </script> <noscript> <h1 class="errorMsg">JavaScript required</h1> <p>Read how to <a href="/errors/noscript.html">rectify this problem</a></p> </noscript> </body> </html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Meta-Refresh Trick Add a <meta> refresh within a <noscript> in the head to redirect non-JS users right-away to an error page
<noscript> <meta http-equiv="Refresh" content="0;URL=/errors/noscript.html"> </noscript>
Downsides
Wont validate W3C oversight? Redirects turned off at certain security settings with JS Not bot friendly
CSE 130
Programming Language Principles & Paradigms
Lecture #
Script Hiding Details
If you are a hardcore markup person using HTML comments for hiding is wrong. (Or if you are embedding in XML) Use CDATA sections instead
<script type="text/javascript"> <![CDATA [ document.write("Congratulations! You have JavaScript."); ]]> </script> OR
<script type="text/javascript"> /* <![CDATA[ */ document.write("Congratulations! You have JavaScript."); /* ]]> */ </script>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Event Handlers
(X)HTML defines a set of event handler attributes related to JavaScript events such as onclick, onmouseover, etc. which you can bind JavaScript statements to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Events</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body onload="alert('page loaded');"> <form action="#" method="get"> <div id="formfields"> <input type="button" value="press me" onclick="alert('You pressed my button!');" /> </div> </form> <p><a href="http://www.yahoo.com" onmouseover="alert('hi');">Yahoo!</a></p> </body> </html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Linked Scripts
Like linked style sheets you can store JavaScript code in a separate file and reference it
Use a .js file Contains only JavaScript Store these files like images in a common directory in your site (e.g. /scripts) Linked scripts can be cached and clean up (X)HTML documents Linked scripts do have problems under some browsers
CSE 130
Programming Language Principles & Paradigms
Lecture #
Linked Script Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Linked Script</title> <meta http-equiv="content-type" content="text/html; charset=ISO8859-1" /> <script type="text/javascript" src="danger.js"></script> </head> <body> <form action="#" method="get" id="form1"> <div id="formfields"> <input type="button" name="button1" id="button1" value="press me" onclick="alertTest();" /> </div> </form> </body> </html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Linked Script Example Contd.
In file danger.js you would have simply
function alertTest( ) { alert("Danger! Danger!"); }
CSE 130
Programming Language Principles & Paradigms
Lecture #
Fully Decoupled Linked Script Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Linked Script</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <script type="text/javascript" src="danger.js"></script> </head> <body> <form action="#" method="get" id="form1"> <div id="formfields"> <input type="button" name="button1" id="button1" value="press me /> </div> </form> <script type="text/javascript" src=events.js"></script> </body> </html>
In events.js we have document.getElementById('button1').onclick=alertTest;
CSE 130
Programming Language Principles & Paradigms
Lecture #
JavaScript Pseudo-URLs
You can use the JavaScript pseudo-URL to trigger a script statements For example <a href=javascript: alert(hi);>Click me</a> You can also type such a URL directly in the browsers location box, for example javascript:alert(5+9) Be aware that JavaScript pseudo-URLs do not degrade well in non-JavaScript aware situations
CSE 130
Programming Language Principles & Paradigms
Lecture #
Other JavaScript Inclusion Methods
There are a few other ways to include JavaScript in a Web page the most notable being the JavaScript entity supported by Netscape 4.x generation browsers This method uses a standard HTML character entity in a macro style manner
&{script};
You shouldnt use this form of inclusion since it is no longer supported by even Netscape and is not cross browser in support
CSE 130
Programming Language Principles & Paradigms
Lecture #
History of JavaScript
JavaScript first introduced in 1995
Invented by Netscape Originally called LiveScript Renamed JavaScript when first beta in Netscape 2 Not really related to Java
Microsoft supports clone of JavaScript called JScript
First introduced in Internet Explorer 3
Standards oriented JavaScript called ECMAScript The ideas of DHTML and Ajax add even more confusion JavaScript used both client and server-side and within browsers and outside browsers Some of the bad aspects of JavaScript are really the bad aspects of the environment in which it is used
CSE 130
Programming Language Principles & Paradigms
Lecture #
JavaScript Versions
Browser Version
Netscape 2.x Netscape 3.x Netscape 4.0 4.05 Netscape 4.06 4.7x Netscape 6.x, Mozilla 0.9 Firefox 1.5 Firefox 2.0 Internet Explorer 3.x Internet Explorer 4.x Internet Explorer 5.x Internet Explorer 5.5 Internet Explorer 6.x Internet Explorer 7.x 1.0 1.1 1.2 1.3 1.5 1.6 1.7 JScript 1.0 JScript 3.0 JScript 5.0 JScript 5.5 JScript 5.6 Jscript 5.6 + Native XHR (or 5.7 under Vista)
JavaScript Version
CSE 130
Programming Language Principles & Paradigms
Lecture #
JavaScript Applications
Common uses of JavaScript include:
Form validation Page embellishments and special effects Navigation systems Basic Math calculations Dynamic content manipulation
The last use gets into the real power of JavaScript being a full fledged document manipulation language
CSE 130
Programming Language Principles & Paradigms
Lecture #
JavaScript, (X)HTML, and CSS Link
JavaScript very much relies on markup and CSS in browsers, in fact it manipulates objects that are created by the correct use of tags and style properties For example, the document object contains objects and collections corresponding to many of the tags in the (X)HTML document.
document.forms[ ], document.images[ ], document.links[ ], etc. We can always jump directly to the object using something like document.getElementById( ) under a DOM compliant browser
CSE 130
Programming Language Principles & Paradigms
Lecture #
Simple Example 1 of Interplay
<html> <head> <title>Simple DOM 1</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <script type="text/javascript"> function showField() { alert(document.form1.field1.value); } </script> </head> <body> <form action="#" method="get" id="form1" name="form1"> <input type="text" name="field1" id="field1" /> <input type="button" name="button1" id="button1" value="press me" onclick="showField();" /> </form> </body> </html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Simple Example 2 of Interplay
<html> <head> <title>Simple DOM 2</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <p id="p1" style="color: red">Hello there</p> <form> <input type="button" value="left" onclick="document.getElementById('p1').align='left';" /> <input type="button" value="center" onclick="document.getElementById('p1').align='center';" /> <input type="button" value="right" onclick="document.getElementById('p1').align='right';" /> <br /><br /> <input type="button" value="red" onclick="document.getElementById('p1').style.color='red';" /> <input type="button" value="blue" onclick="document.getElementById('p1').style.color='blue';" /> <br /><br /> <input type="button" value="Big" onclick="document.getElementById('p1').style.fontSize='xx-large';" /> <input type="button" value="Small" onclick="document.getElementById('p1').style.fontSize='xx-small';" /> </form></body></html>
CSE 130
Programming Language Principles & Paradigms
Lecture #
Summary of Initial Discussion
JavaScript is a full blown Web programming language It is not related to Java in more than name It intersects with XHTML through <script>, linked scripts (.js files), and attributes for event handling (onclick) It has evolved over time It has many browser compatibility issues to worry about
CSE 130
Programming Language Principles & Paradigms
Lecture #
Language Overview Part 1
CSE 130
Programming Language Principles & Paradigms
Lecture #
Basic Features
Script Execution order
Top to bottom <head> before <body> Cant forward reference outside a <script> tag
JavaScript is case sensitive
HTML is not, XHTML is Camelback style document.lastModified IEs JScript is a little less case sensitive than standard ECMAScript and Netscapes JavaScript Remember onClick, ONCLICK, onclick doesnt count since that is HTML
10
CSE 130
Programming Language Principles & Paradigms
Lecture #
Basic Features Contd.
Whitespace
Whitespace is generally ignored in JavaScript statements and between JavaScript statements but not always consider
x = x + 1 same as x =x +1 s = typeof x; is same as s=typeof x but it not the same as s=typeofx; or s= type of x;
Return character can cause havoc Given white space support by JavaScript some developers favor crunching
CSE 130
Programming Language Principles & Paradigms
Lecture #
Basic Features Contd.
Statements
A script is made up of individual statements JavaScript statements are terminated by returns or semi-colons (;) So x = x+1; same as x = x+1 alert(x); alert(x) Prefer to use semi-colons because if you reduce returns you run into problems x=x+1 alert(x) throws an error while x=x+1;alert(x); does not.
CSE 130
Programming Language Principles & Paradigms
Lecture #
Blocks
To group together statements we can create a block using curly braces { }. In some sense this creates one large statement Blocks are used with functions as well as larger decision structures like if statements
function add(x,y) { var result = x+y; return result; } if (x > 10) { x= 0; y = 10; }
11
CSE 130
Programming Language Principles & Paradigms
Lecture #
Variables
Variables store data in a program The name of a variable should be unique well formed identifier starting with a letter and followed by letters or digits Variable names should not contain special characters or white space Variable names should be well considered
X versus sum Some rules of programming might not follow on the Web?
CSE 130
Programming Language Principles & Paradigms
Lecture #
Variables Contd.
Define a variable using the var statement
var x;
If undefined a variable will be defined on its first use Variables can be assigned at declaration time
var x = 5;
Commas can be used to define many variables at once
var x, y = 5, z;
CSE 130
Programming Language Principles & Paradigms
Lecture #
Basic Data Types
Every variable has a data type that indicates what kind of data the variable holds Basic data types in JavaScript
Strings (thomas, x, Who are you?)
Strings may include special escaped characters This isn\t hard Strings may contain some formatting characters Here are some newlines \n\n\n and tabs \t\t\t yes!
Numbers (5, -345, 56.7, -456.45677)
Numbers in JavaScript tend not to be complex (e.g. higher math)
Booleans (true, false)
Also consider the values null and undefined as types
12
CSE 130
Programming Language Principles & Paradigms
Lecture #
Weak Typing
JavaScript is a weakly type language meaning that the contents of a variable can change from one type to another.
Some languages are more strongly type in that you must declare the type of a variable and stick with it.
Example of dynamic & weak typing a variable initially holding a string can later hold a number x = "hello"; x = 5; x = false; While weak typing seems beneficial to a programmer it can lead to problems
CSE 130
Programming Language Principles & Paradigms
Lecture #
Type Conversion
Consider the following example of weak typing in action
document.write(4*3); document.write("<br>"); document.write("5" + 5); document.write("<br>"); document.write("5" - 3); document.write("<br>"); document.write(5 * "5");
You may run into significant problems with type conversion between numbers and strings use functions like parseFloat() to deal with these problems
Prompt demo
CSE 130
Programming Language Principles & Paradigms
Lecture #
Dealing with Type
You can also use the typeof operator to figure out type
var x = "5"; alert (typeof x);
Be aware that using operators like equality or even + may not produce expected results
x=5; y = "5"; alert(x == y) Produces a rather interesting result. We see the inclusion of a type equality operator (===) to deal with this
13
CSE 130
Programming Language Principles & Paradigms
Lecture #
Composite Types
JavaScript supports more advanced types made up of a collection of basic types. Arrays
An ordered set of values grouped together with a single identifier
Defining arrays
var var var var myArray = [1,5,1968,3]; myArray2 = ["Thomas", true, 3, -47]; myArray3 = new Array(); myArray4 = new Array(10)
CSE 130
Programming Language Principles & Paradigms
Lecture #
Arrays
Access arrays by index value
var myArray = new Array(4) myArray[3] = "Hello";
Arrays in JavaScript are 0 based given var myArray2 = ["Thomas", true, 3, -47];
myArray2[0] is Thomas, myArray[1] is true and so on Given new Array(4) you have an array with an index running from 03 To access an array length you can use arrayName.length
alert(myArray2.length);
CSE 130
Programming Language Principles & Paradigms
Lecture #
Objects
An object is a collection of data types as well as functions in one package
var stooge1 = { names : [Larry,Curly,Moe] , number : 3} var stooge2 = { names : [Larry,Curly,Moe] , showNumber : function() {alert(this.names.length);} } alert(stooge1.names); stooge2.showNumber();
We see the typical access notation similar to Java using .
objectname.propertyname objectname.method()
Underneath everything in JavaScript are objects.
We have actually been using these ideas everywhere, for example document.write(hello) says using the document object invoke the write() method and give it the string hello this results in output to the string
14
CSE 130
Programming Language Principles & Paradigms
Lecture #
Working with Objects
There are many types of objects in JavaScript
Built-in objects (primarily type related) Browser objects (navigator, window, etc.) Document objects (forms, images, etc.) User defined objects with (document) { write("This is easier"); write("This is even easier"); }
Given the need to use objects so often shortcuts are employed such as the with statement
We also see the use of the short cut identifier this when objects reference themselves
CSE 130
Programming Language Principles & Paradigms
Lecture #
Expressions and Operators
Make expressions using operators in JavaScript Basic Arithmetic
+ (addition), - (subtraction/unary negation), / (division), * (multiplication), % (modulus)
Increment decrement
++ (add one) -- (subtract one)
Comparison
>, <, >=, <= , != (inequality), == (equality), === (type equality)
Logical
&& (and) || (or) ! (not)
CSE 130
Programming Language Principles & Paradigms
Lecture #
More Operators
Bitwise operators (&, |, ^)
Not commonly used in JavaScript except maybe cookies? Shift operators (>> right shift, << left shift)
String Operator
+ serves both as addition and string concatenation document.write("JavaScript" + " is " + " great! "); You should get familiar with this use of +
Be aware of operator precedence
Use parenthesis liberally to force evaluations var x = 4 + 5 * 8 versus x = (4+5) * 8
15
CSE 130
Programming Language Principles & Paradigms
Lecture #
Flow Control
Basic program execution control handled in JavaScript using the if statement
if (expression) true-case or if (expression) true-case; else false-case;
if (x > 10) alert("x bigger than 10"); else alert("x smaller than 10");
CSE 130
Programming Language Principles & Paradigms
Lecture #
More on If Statements
You can use { } with if statements to execute program blocks rather than single statements
if (x > 10) { alert("X is bigger than 10"); alert("Yes it really is bigger"); }
Be careful with ;s and if statements
if (x > 10); alert("I am always run!?
");
CSE 130
Programming Language Principles & Paradigms
Lecture #
Switch Statements
If statements can get messy so you might consider using a switch statement instead switch (condition) { case (value) : statement(s) break; default: statement(s); } The switch statement is not supported by very old JavaScript aware browsers (pre-JavaScript 1.2), but today this is not such an important issue
16
CSE 130
Programming Language Principles & Paradigms
Lecture #
Switch Example
var x=3; switch (x) { case 1: alert('x is 1'); break; case 2: alert('x is 2'); break; case 3: alert('x is 3'); break; case 4: alert('x is 4'); break; default: alert('x is not 1, 2, 3 or 4'); }
CSE 130
Programming Language Principles & Paradigms
Lecture #
Loops
JavaScript supports three types of loops: while, do/while, and for Syntax of while: while(condition) statement(s) Example:
var x=0; while (x < 10) { document.write(x); document.write("<br />"); x = x + 1; } document.write("Done");
CSE 130
Programming Language Principles & Paradigms
Lecture #
Do Loop
The difference between loops is often when the loop condition check is made, for example
var x=0; do { document.write(x); x = x + 1; } while (x < 10);
In the case of do loops the loop always executes at least once since the check happens at the end of the loop
17
CSE 130
Programming Language Principles & Paradigms
Lecture #
For Loop
The most compact loop format is the for loop which initializes, checks, and increments/decrements all in a single statement
for (x=0; x < 10; x++) { document.write(x); }
With all loops we need to exercise some care to avoid infinite loops. See example
CSE 130
Programming Language Principles & Paradigms
Lecture #
For/In Loop
One special form of the for loop is useful with looking at the properties of an object. This is the for/in loop. for (var aProp in window) { document.write(aProp) document.write("<br />"); } We will find this construct useful later on when looking at what we can do with a particular object we are using
CSE 130
Programming Language Principles & Paradigms
Lecture #
Loop Control
We can control the execution of loops with two statements: break and continue break jumps out of a loop (one level of braces) continue returns to the loop increment
var x=0; while (x < 10) { x = x + 1; if (x == 3) continue; document.write("x = "+x); if (x == 5) break;
} document.write("Loop done");
18
CSE 130
Programming Language Principles & Paradigms
Lecture #
Functions
Functions are useful to segment code and create a set of statements that will be used over and over again The basic syntax is function name(parameter list) { function statement(s) return; } For example
function add(x, y) { var sum = x + y; return sum; }
CSE 130
Programming Language Principles & Paradigms
Lecture #
Functions Contd.
We can then invoke a function using the function name with ( )s var result = add(2, 3); We can also pass variable values as well as literals var a = 3, b=5; var result; result = add(a,b); Variables are passed to function by value so you must use return to send things back. You can return a value or not from a function and you can have as many return statements as you like
CSE 130
Programming Language Principles & Paradigms
Lecture #
Input/Output in JavaScript
Special dialog forms
Alert
alert("Hey there JavaScript coder! ");
Confirm
if (confirm(Do you like cheese?) alert("Cheese lover"); else alert("Cheese hater");
Prompts
var theirname = prompt("Whats your name? ", "");
19
CSE 130
Programming Language Principles & Paradigms
Lecture #
Input/Output in JavaScript Contd.
Writing to the HTML document document.write() document.writeln()
Writing should be done before or as the document loads. In traditional JavaScript the document is static after that, though with the DOM everything is rewritable Since we are writing to an (X)HTML document you may write out tags and you will have to consider the white space handling rules of (X)HTML
CSE 130
Programming Language Principles & Paradigms
Lecture #
Comments and Formatting
When writing JavaScript you may want to include a comment
/* This is a multiple line style comment */ // This is a single line comment
You also may want to format your script for nice reading or you may want to crunch it for fast download?
CSE 130
Programming Language Principles & Paradigms
Lecture #
Summary
JavaScript supports a basic syntax very similar to C It is a weakly typed language It has a limited set of data types It is very object flavored but it does not force objectoriented programming on programmers It forgoes many features of programming languages that wouldnt make sense in the Web environment (file I/O, complex Math, etc.)
20
