2. 2 Alerts and the If/Else Conditional Statement CONTINUED There's No Right Way to Do It There are, literally, a million ways to write any given script and still have it work correctly. For instance, braces are not required on conditionals if (and only if) there is only one statement in that code block. In addition, there’s an alternate method of writing a conditional that takes the form: (condition) ? truePart : falsePart; which is the rough equivalent of: if (condition) { truePart; } else { falsePart; } TIP In this class, for the most part and for clarity’s sake, I’ve included the braces in the examples and chosen to use the longer form for conditionals.

3. 3 Alerts and the If/Else Conditional Statement CONTINUED There's No Right Way to Do It CONTINUED That same shorthand method can also be used to set variables; for instance: myNewVariable = (condition) ? trueValue : falseValue; is equivalent to: if (condition) { myNewVariable = trueValue; } else { myNewVariable = falseValue; } There’s also no requirement that the braces have to be at the end or beginning of lines, or that the true and false code blocks need to be indented. It’s all a matter of style, and the correct style to use is the one you’ve found to work best for you. TIP

4. 4 Ultra Basic Form Validation with JavaScript indexOf() Method (JavaScript) The indexOf() method returns the position of the first occurrence of a specified value in a string. This method returns -1 if the value to search for never occurs. Note: The indexOf() method is case sensitive.

5. 5 Ultra Basic Form Validation with JavaScript indexOf() Method Example (Returns a 15) Click button to locate where in string a specified value occurs. Try it function myFunction() { var str= "Rex Winkus for Supreme Leader!"; var n = str.indexOf("Supreme"); document.getElementById("demo").innerHTML = n; } Rex Winkus for Supreme Leader! 012345678901234567890123456789

6. 6 Ultra Basic Form Validation with JavaScript indexOf() Method Example (Returns a -1) Click button to locate where in string a specified value occurs. Try it function myFunction() { var str= "Rex Winkus for Supreme Leader!"; var n = str.indexOf("supreme"); // <-- lower case document.getElementById("demo").innerHTML = n; }

7. 7 Ultra Basic Form Validation with JavaScript We'll continue to look at some ultra basic forms and form validation with JavaScript and jQuery: http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/data3.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/data3.js http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/data4.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/data4.js http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/validate1.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/validate1.js http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/validate2.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/validate2.js http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/echo1.cgi http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/validate3.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/validate3.js

8. 8 Changing HTML on a Page with JavaScript

9. 9 jQuery html() Method The html() method sets or returns the content (innerHTML) (text and HTML markup) of the selected elements. When this method is used to return content, it returns the content of the first matched element. When this method is used to set content, it overwrites the content of all matched elements. Example: Change the content of all elements: $("button").click(function(){ $("p").html("Hello world !"); }); Tip: To set or return only the text content of the selected elements, use the text() method. TIP

10. 10 Changing HTML on a Page with JavaScript jQuery text() Method The text() method sets or returns the text content of the selected elements. When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed). When this method is used to set content, it overwrites the content of all matched elements. Example: Set the text content for all elements: $("button").click(function(){ $("p").text("Hello world!"); }); Tip: To set or return the innerHTML (text and HTML markup) of the selected elements, use the html() method. TIP

11. 11 Changing HTML on a Page with JavaScript jQuery append() Method The append() method inserts specified content at the end of the selected elements. Example: Insert content at the end of all elements $("button").click(function(){ $("p").append(" Appended text "); }); Tip: To insert content at the beginning of the selected elements, use the prepend() method. http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/changing1.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/changing1.js TIP

12. 12 Changing HTML on a Page with JavaScript jQuery prepend() Method The prepend() method inserts specified content at the beginning of the selected elements. Example: Insert content at the beginning of all elements $("button").click(function(){ $("p").prepend(" Prepended text "); }); Tip: To insert content at the end of the selected elements, use the append() method. TIP

13. 13 Numbers, Strings, and Dates

14. 14 Numbers, Strings, and Dates JavaScript eval() Function The eval() function evaluates or executes an argument. If the argument is an expression even if it is a string, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements. Example: evaluate/execute expressions The result of result would be: var x = 10; var y = 20; var a = eval("x * y"); 200 var b = eval("1 + 2 + 3 + 4 + 5"); 15 var c = eval("x + y + 17"); 47 Special Note The eval() function can be successfully used to complete Assignment 1 (The Basic Calculator)

15. 15 Numbers, Strings, and Dates JavaScript toFixed() Method The toFixed() method converts a number into a string, keeping a specified number of decimals. Example: Convert a number into a string, keeping only two decimals: var num = 3.14159265359; var n=num.toFixed(2); The result of n would be: 3.14 Note: if the desired number of decimals are higher than the actual number, nulls/zeros are added to create the desired decimal length. TIP

16. 16 Numbers, Strings, and Dates JavaScript String substr() Method The substr() method extracts parts of a string, beginning at the character at the specified position, and returns the specified number of characters. Example: Extract parts of a string var str = "Hello world!"; var res = str.substr(4,4) The result of res would be: o wo Tip: To extract characters from the end of the string, use a negative start number (This does not work in IE8 and earlier) Note: The substr() method does not change the original string. TIP

17. 17 Numbers, Strings, and Dates JavaScript String toLowerCase() Method The toLowerCase() method converts a string to lowercase letters. Example: Convert the string to lowercase letters var str = "Hello World!"; var res = str.toLowerCase(); The result of res would be: hello world! Note: The toLowerCase() method does not change the original string. Tip: Use the toUpperCase() method to convert a string to uppercase letters. TIP

18. 18 Numbers, Strings, and Dates JavaScript String toUpperCase() Method The toUpperCase() method converts a string to uppercase letters. Example: Convert the string to uppercase letters var str = "Hello World!"; var res = str.toUpperCase() The result of res would be: HELLO WORLD! Note: The toUpperCase() method does not change the original string. Tip: Use the toLowerCase() method to convert a string to lowercase letters. TIP

19. 19 Numbers, Strings, and Dates JavaScript toDateString() Method The toDateString() method converts the date (not the time) of a Date object into a readable string. Example: Convert today's date into a readable string var d = new Date(); var n = d.toDateString(); The result of n would be: Mon Jan 27 2014! Example: The Date() Object without the conversion: var d = new Date(); document.write(d); The result would be: Mon Jan 17 2014 15:05:33 GMT-0800 (Pacific Standard Time) TIP

20. 20 Numbers, Strings, and Dates Some Methods of the Date Object: getMonth() The getMonth() method returns the month (from 0 to 11) for the specified date, according to local time. Example: Return the Current Month var d = new Date(); var n = d.getMonth(); The result of n would be 0 January is 0, February is 1, March is 2, and so on. TIP

21. 21 Numbers, Strings, and Dates Some Methods of the Date Object: getDate() The getDate() method returns the day of the month Example: Return the day of the month var d = new Date(); var n = d.getDate(); The result of n would be 27 The days of the month start with 1 instead of 0. TIP

22. 22 Numbers, Strings, and Dates JavaScript toDateString() Method The toDateString() method converts the date (not the time) of a Date object into a readable string. Example: Convert today's date into a readable string var d = new Date(); var n = d.toDateString(); The result of res would be: Mon Jan 27 2014!

23. 23 Assorted Libraries Custom Dialog Boxes Custom Dialog Boxes Date JS Date JS Pretty Date Pretty Date