Download
1 / 64
640 likes | 850 Views
Introduction to JavaScript Week One. Day One. Official stuff Syllabus Grades Website Class Procedures Setting up your work environment Development Tools Debugging Tool Jump into Code!. 1. Tools for Class. Dreamweaver Already installed on campus PCs
E N D
Day One • Official stuff • Syllabus • Grades • Website • Class Procedures • Setting up your work environment • Development Tools • Debugging Tool • Jump into Code!
1. Tools for Class • Dreamweaver • Already installed on campus PCs • It is the IDE of choice for other classes in the Web program • While your projects are not required to be hosted on a remote server, it is a good idea because then you will have a backup copy that you can easily access from other machines. • Please TAKE NOTES on how we set this up in class, so that we will not have to go over this multiple times.
I am new to Dreamweaver, too. • I have used many other IDEs, but this is my first time using Dreamweaver. If you have used this tool in the past, please extend your help to others as we work through the setup. • You will need your username and password and absolute path to your public_html directory from either Zephir or Edison. You are welcome to use your own server, but at your own risk, as I will not be able to help you debug your connection.
Other tools for class • Please install Firebug as an extension to Firefox. (There is a link on the class webpage.) • Please do NOT use IE for developing your homework, as there may be some incompatibilities. • And read chapters 1 and 15, as you will find tutorials for debugging your code.
JavaScript runs in your BROWSER. It is a CLIENT-SIDE scripting language. PHP is a scripting language that runs on a SERVER. The output of its execution is then sent to your browser for display. Both are SCRIPTING languages. This means that they are INTERPRETED and do not need to be compiled. Server-side vs Client-side
Java interpreters are built into Browsers • Because of this, you may find difference in behavior between browsers. Please use FIREFOX in class. • If you develop for clients, then become familiar with Quirksmode, which is linked to the class website.
Why use JavaScript? To make your web application fast and responsive, without requiring the delays of a round trip to the server to process user interactions.
HTML • Hyper Text Markup Language • A set of tags used to define how elements (text, links, pictures…) will be displayed in a web page <html> <body> Text that appears in my webpage! </body> </html>
HTML + JavaScript <html> <body> <script type=“text/javascript”> document.write(‘Hello World’); </script> </body> </html>
HOW to add JS <script type=“text/javascript”> // content </script> This line says we are now going to be using a scripting language to modify our html page, and we choose JavaScript. As JavaScript has become the default script language in browsers, the type tag is not typically needed anymore. HTML5 does not require the type. HTML4.01 and XHTML1.0 does not require the type, but it will not validate properly.
WHERE to add JS • In the HEAD section of the document • At the bottom of the document • Inline, anywhere • Linked as an external file • We will see an example with Jquery • It goes in the head before any other JS code • Do NOT submit your homework this way, because I will not have source code to correct • In a “document onload” function in the head • By week two, this is how we will add all our code However, as we shall see, JS is interpreted as the page loads, so the location determines when the JS will run and what it knows. We will see this more in a demo.
Comments • Comments are used to explain what your code does • The ‘//’ tells javaScript to ignore the line of text //The line below will write hello world document.write(‘<p>Hello World</p><br/>’);
Comments (cont…) You can use the ‘//’ to make comments on the end of lines document.write(“hi”); //a comment
Comments (cont…) We can also make multi-line comments with the symbols /* and */ /* All3 lines will be ignored ignoring this and this */ document.write(‘<p>Hello World</p><br/>’);
Comments (cont…) You can use comments to ignore code for debugging… /* Commenting this out because its causing an error document.write(‘<p>Hello World</p><br/>’); */
Statements • A statement is an executable line of code. It is terminated by a semi-comma (;) which tells the interpreter to execute the line before continuing on to the next one. <script> alert(“Hello world”); </script>
Statements across multiple lines You won’t use this too often. It is mostly to make code easier to read in an IDE without scrolling to the right.
Communication Popups • Alert • Informs the user, then is dismissed • Prompt • Requests text input from the user • Can be given a default value • Can be cancelled • Confirm • Requests yes/no from the user Alert is GREAT for debugging.
Writing directly to the document • document.write(“TEXT”); • This is a JavaScript command for writing text to a webpage. • We will use it for the first few weeks, and you can use it for homework 1 and 2. But after that, we will use another method and be marked down for using it.
Using the “onload” function <script> window.onload = function() { someCode; } </script> We will come back to this next week….
3. Debugging Tricks • Alert • Console.log • Breakpoints • Commenting out code
Kinds of errors • Syntax – the interpreter will get confused and simply quit (similar to a compiler error) • Runtime – not all paths have been tested and the user may choose a path leading to a variable not being defined, for example • Logic – everything runs fine from a JS point of view, but you get the wrong answer
Top Mistakes that Require Debugging • Unmatched parenthesis, brackets, or quotes • Using curly/smart quotes instead of singles or doubles • <XXXXX> is not defined (function or variable) • Missing “;” • Using a reserved word • Case sensitivity • Incorrect path to resource (file or URL) • Using “=“ instead of “==“
How to not spend so much time debugging • This is VERY important – write your code in SMALL increments – consider adding ONE line of code at a time. Test. Then add another. • If you write big multi-line chunks of code and get stuck, then the first thing I will have you do is comment out all your code, and then we will add each line of code back one line at a time. So, get in the habit of writing it this way to begin with!
Data (Literals) • Numbers • Integers, Decimals, Sci Notation • Strings • Quotes are required • Booleans • Keywords true and false (no quotes) • NULL • Absence of data
Variables • Hold data to be used at a later time • If you have not declared a variable it will be automatically declared when you use it. But this will change the scope so use var (we will learn more when we get to functions). • You can reassign values, but if you redeclare using var, you may get an error. • You can declare and initialize, or just declare and initialize later ex. varx = 6; vary; y = 7;
Rules for naming variables • Avoid keywords • Names must begin with $, _ or a letter • Names can only contain $, _, numbers and letters • Names are case sensitive
Loosely Typed Languages • Languages that don’t care about the variable types. You can start off using a variable as one type and switch to another. JavaScript is an example of this. • So, for example, you don’t need to specify whether you are working with a string or a number, or whether a number is an integer or a float, etc.
Operator Examples var total= 10; total *= 10; // total is now 100 total -= 32; // total is now 68 total += 2; // total is now 70 total /= 2; // total is now 35 total %= 3; // total is now 2
Order of Operations Follows PEDMAS rules Parentheses, Exponentials, Division/Multiplication, Additional/Subtraction “Please excuse my dear aunt sally” var answer = 4 + 6 * 5 //is 34 var answer = (4 + 6) * 5 //is 50
Working with Strings • Use var keyword and then place either single or double quotes around the literal data. • If you need a quote inside a string, you have two choices: • 1) Use the OTHER kind of quote inside • 2) Use the escape character varx = “Hello Deer”; vary = ‘The Dog said “Hello” to the Deer.’ Varz = “The Dog said \”Hello\” to the Deer.”
Strings Concatenation Operator • We can add two strings together using the ‘+’ sign • To add spaces between the strings: var greeting = “hi”; var phrase = “how are you”; var sentence = greeting + phase; var sentence = greeting + ‘ ‘ + phase;
Mixing Strings and Numbers The default behavior is to convert the number to a string: A string can be converted to a number by appending a “+” (NO SPACE) or by using the built-in Number function var a = 5; var b = “7”; varc = a + b; //”5 + 7” vard = a + +b; //12 vare = Number(b) + a; // 12
If statement If(condition) { conditional code } Note: You should indent the code inside the curly brackets. We call the content inside the curly bracket a “block”.
If example var age = 17; If(age < 21) { alert(“you should not be drinking”); }
If…else statement • else is the coding term for otherwise. If(condition) { code we run if condition is true } else { code we run if condition is false }
If…else example var age = 27; If(age < 2) { alert(“you’re just a baby”); } else { alert(“time to grow up!”); }
If…else if…else Statement If(condition1) { code we run if condition is true } else if(condition 2) { code we run if condition1 is false and condition2 is true } else { code we run if both condition1 & condition2 are false }
If…else if…else Statement var age 27; If(age < 2) { alert(“you’re just a baby”); } else if(age < 11) { alert(“you’re not even a teen yet”); } else if(age < 20) { alert(“teens equal trouble”); } else { alert(“just man up already”); }
Nested if statements If(condition) { if (some other condition) { // do something else } } else { code we run if condition is false } You can combine and nest them
