2 Alerts and the If/Else Conditional Statement CONTINUED There's No Right Way to Do It There are,...

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

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

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


indexOf() Method Example (Returns a 15)

<!DOCTYPE html><html><body>

<p id="demo">Click button to locate where in string a specified value occurs.</p>

<button onclick="myFunction()">Try it</button>

<script>function myFunction(){

var str = "Rex Winkus for Supreme Leader!";var n = str.indexOf("Supreme");document.getElementById("demo").innerHTML = n;

}</script>

</body></html>

Rex Winkus for Supreme Leader!012345678901234567890123456789

6


indexOf() Method Example (Returns a -1)

<!DOCTYPE html><html><body>

<p id="demo">Click button to locate where in string a specified value occurs.</p>

<button onclick="myFunction()">Try it</button>

<script>function myFunction(){

var str = "Rex Winkus for Supreme Leader!";var n = str.indexOf("supreme"); // <-- lower casedocument.getElementById("demo").innerHTML = n;

}</script>

</body></html>

7


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/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

























8

Changing HTML on a Page with JavaScript

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 <p> elements:

$("button").click(function(){ $("p").html("Hello <b>world</b>!");});

Tip: To set or return only the text content of the selected elements, use the text() method.TIP

10


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 <p> 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


jQuery append() Method

The append() method inserts specified content at the end of the selected elements.

Example: Insert content at the end of all <p> elements

$("button").click(function(){ $("p").append("<b>Appended text</b>");});

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


jQuery prepend() Method

The prepend() method inserts specified content at the beginning of the selected elements.

Example: Insert content at the beginning of all <p> elements

$("button").click(function(){ $("p").prepend("<b>Prepended text</b>");});

Tip: To insert content at the end of the selected elements, use the append() method.TIP

13

Numbers, Strings, and Dates

14


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");200var b = eval("1 + 2 + 3 + 4 + 5"); 15var c = eval("x + y + 17"); 47

SpecialNote

The eval() function can be successfully used to complete Assignment 1 (The Basic Calculator)

15


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


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


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();


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


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()


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


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


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


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


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();


Mon Jan 27 2014!

23

Assorted Libraries

• Custom Dialog Boxes• Date JS• Pretty Date

http://www.scriptiny.com/2008/04/custom-javascript-dialog-boxes/

http://www.datejs.com/

http://ejohn.org/projects/javascript-pretty-date/

2 Alerts and the If/Else Conditional Statement CONTINUED There's No Right Way to Do It There are,...

Documents

Transcript of 2 Alerts and the If/Else Conditional Statement CONTINUED There's No Right Way to Do It There are,...