|
|
| Line 4: |
Line 4: |
| | Introduction: | | Introduction: |
| | | | |
| − | About Programming:
| + | Where to put script: |
| | | | |
| − | Dynamic Webpages:
| + | Using the console: |
| | | | |
| | + | variable types: |
| | + | (why to use var) |
| | + | *string |
| | + | ( \ escape characters ) |
| | + | *number |
| | + | *bool |
| | + | *more later |
| | | | |
| − | [http://evolutionofweb.appspot.com/ Evoltion of Browsers:]
| + | Conditional Statements |
| | | | |
| − | HTML/CSS Review:
| + | <div id="content"> |
| | + | <form> |
| | + | <input id="password" type="password"/> |
| | + | <input id="checkIt" type="submit" /> |
| | + | </form> |
| | + | <h1 id="result"> |
| | + | |
| | + | </h1> |
| | + | |
| | + | </div> |
| | | | |
| − | *Tags
| + | var password = "hidden"; |
| − | *Style rules
| + | var result; |
| − | *Attributes/properties, values
| + | |
| − | *DocType
| + | document.getElementById('checkIt').onclick = function(){ |
| − | *Block Level vs inline
| + | if(document.getElementById('password').value === password){ |
| − | *Classes / IDs
| + | result = "access granted"; |
| − | | + | } else { |
| − | In-class 1:
| + | result = "DENIED!"; |
| − | | + | } |
| − | Let’s add some JavaScript:
| + | document.getElementById('result').appendChild(document.createTextNode(result)); |
| − | | + | //document.getElementById('result').firstChild.nodeValue = result; |
| − | <script type="text/javascript"></script> | + | return false; |
| − | We're going to use that as the last element in the body of our document for now.
| + | } |
| − | | |
| − | Creating and appending elements:
| |
| − | | |
| − | var title = document.createElement('h1'); | |
| − | var titleText = document.createTextNode('Hello JavaScript!'); | |
| − | title.appendChild(titleText);
| |
| − | document.getElementById('head').appendChild(title); | |
| | | | |
| | =Homework= | | =Homework= |
| − | ==In-Class 1== | + | ==In-Class 2== |
| − | [[Introduction_to_JavaScript_Fall_2011#In-Class_1|In-Class 1 details]] | + | [[Introduction_to_JavaScript_Fall_2011#In-Class_2|In-Class 2 details]] |
| − | ==Assignment 1== | + | ==In-Class 3== |
| | + | [[Introduction_to_JavaScript_Fall_2011#In-Class_3|In-Class 3 details]] |
| | + | ==Assignment 2== |
| | [[Introduction_to_JavaScript_Fall_2011#Assignment_1|Assignment 1 details]] | | [[Introduction_to_JavaScript_Fall_2011#Assignment_1|Assignment 1 details]] |
| − |
| |
| − | =Additional Details=
| |
| − | == Introduction to Javascript and the DOM ==
| |
| − | Javascript is a simple programming language. The core of the language is very easy to learn in a short amount of time. But that's just Javascript as a programming language. Javascript is primarily used to add interactivity to web pages, using the DOM. The DOM is a representation of the elements that make up a webapge, and everything those elements can do. The DOM's API lets us manipulate DOM and Browser elements with Javascript. So to really understand Javascript, you also need to understand the DOM, which will be covered extensively in this class.
| |
| − |
| |
| − | === Links ===
| |
| − | * [https://developer.mozilla.org/en/the_dom_and_javascript/ Javascript and the DOM]
| |
| − |
| |
| − | == JavaScript History ==
| |
| − |
| |
| − | The JavaScript (originally called LiveScript) language started as an internal project at Netscape to add dynamic features to their Navigator web browser. Netscape changed the name of the language to JavaScript before releasing it to the public in 1995, partially to tap into the hype that surrounded the Java language at the time. Though the name '''Java'''Script implies that it has some relation to the Java language, JavaScript is actually a very different language.
| |
| − |
| |
| − | After its introduction, JavaScript quickly became popular enough that Microsoft decided to create their own browser scripting language. In 1995, Microsoft added the JScript language to their own Internet Explorer browser. While JScript was extremely similar to JavaScript, there were enough differences to create developer headaches for years to come. Many of those difference still exist today.
| |
| − |
| |
| − | Unfortunately, JavaScript was not immediately used to improve user interaction on the web. Instead, JavaScript became synonymous with annoying and distracting websites. People using JavaScript for good were far outnumbered by people using JavaScript for evil.
| |
| − |
| |
| − | However, behind the scenes, people were still using JavaScript as its creators intended. In 2004, Google introduced GMail, a web based email service that relied heavily on JavaScript to create an application that behaved much like desktop email clients. Similarly, in 2005 Google introduced Google Maps, a JavaScript based mapping application that showcased some of the best features of JavaScript. Both applications sparked renewed interest in what JavaScript could offer.
| |
| − |
| |
| − | Today, Netscape Navigator is dead and Internet Explorer is slowly losing market share to open source browsers like Mozilla Firefox, Webkit (Safari) and Chrome. These new browsers are focusing on making JavaScript a faster, more fully featured language. The future is very bright for JavaScript and I hope this class demonstrates some of the best uses of the language.
| |
| − |
| |
| − | === Links ===
| |
| − | * [http://en.wikipedia.org/wiki/Javascript#History_and_naming JavaScript History]
| |
| − | * [http://www.computerworld.com.au/article/255293/-z_programming_languages_javascript Interview with JavaScript Creator]
| |
| − | * [http://en.wikipedia.org/wiki/Browser_wars The Browser Wars]
| |
| − | * [http://ejohn.org/blog/versions-of-javascript/ JavaScript Version Information]
| |
| − | * [http://www.alistapart.com/articles/get-ready-for-html-5/ Get Ready for HTML5]
| |
| − |
| |
| − | ==Interperted Programming Languages vs. Compiled==
| |
| − | Interpreted languages are executed by an interpreter program. Javascipt is an interpreted language and it's interpretor is the browser. Without the browser javascript code can't do anything. Compiled languages need to be run though a compiler, which converts them into machine code that an operating system can run with out any additional software.
| |
| − |
| |
| − | ===Links ===
| |
| − | *[http://en.wikipedia.org/wiki/Interpreted_language Interpreted Languages]
| |
| − |
| |
| − | ==Client Side Scripting vs. Server Side Scripting==
| |
| − | Javascript is a client side scripting language. This means the code is sent to your web browser in plain text, and interperted by the browser. You can view the source of a webpage and see all of the javascript that makes it up (although if the code has been [http://www.alistapart.com/articles/better-javascript-minification/ minified], it's not very human readable anymore) Server side scripting gets compiled on the computer that is hosting the web page. If there is a slowdown created from excessive server side script, or poorly performance optimized script, any user of the site may notice a slowdown. Since client side languages are being executed on the user's computer by the user's browser, similar slowdowns will only affect people viewing that page. The other main difference between server and client, is that server side code can use content stored in a database, whereas client side cannot.
| |
| − | ===Links ===
| |
| − | *[http://www.developer.com/tech/article.php/923111 Client Side vs. Sever Side]
| |
| − |
| |
| | | | |
| | <p></p> | | <p></p> |
| | [[Category:Introduction to JavaScript Fall 2011]] | | [[Category:Introduction to JavaScript Fall 2011]] |
<form>
<input id="password" type="password"/>
<input id="checkIt" type="submit" />
</form>
