lesforgesdessalles.info Education TEACH YOURSELF JAVASCRIPT IN 24 HOURS PDF

Teach yourself javascript in 24 hours pdf

Tuesday, May 14, 2019 admin Comments(0)

Phil Ballard. Michael Moncur. 24 in. Hours. SamsTeachYourself. JavaScript™. Fifth Edition. Page 3. Sams Teach Yourself JavaScript™ in 24 Hours, Fifth Edition . Copyright © PDF files, JavaScript support in, percent sign (%), In just 24 lessons of one hour or less, Sams Teach Yourself JavaScript in 24 Hours helps you learn the fundamentals of programming PDF下载地址( MB). In just 24 lessons of one hour or less, Sams Teach Yourself javascript in 24 Hours helps you learn the fundamentals of web programming using.

Language: English, Spanish, Indonesian
Country: Marshall Islands
Genre: Children & Youth
Pages: 483
Published (Last): 06.09.2016
ISBN: 427-6-70677-204-8
ePub File Size: 29.31 MB
PDF File Size: 8.56 MB
Distribution: Free* [*Regsitration Required]
Downloads: 47565
Uploaded by: TERRANCE

Sams Teach Yourself. JavaScript® in 24 Hours. Sixth Edition. Phil Ballard. East 96th Street, Indianapolis, Indiana, USA. th Street, Indianapolis, Indiana, USA in Hours. Michael Moncur. JavaScript. Teach. Yourself. Teach. Yourself. JavaScript in 24 Hours, Sams Teach Yourself, lesforgesdessalles.info - Ebook download as PDF File .pdf), Text File .txt) or read book online.

Now your object owns a property—in this case a text string containing some information about the object and called info. Note that the month is displayed as 0. Click here to view code image if typeof document. The value of 27 returned from the function call cube 3 immediately becomes the argument passed to the alert method. These objects. We next apply the splice array method to the words array. To help you.

This line of code. These can be single or double quotes. Try it Yourself: This method. By the time you come to write more advanced JavaScript programs. A dialog that behaves this way is known as a modal dialog.

If your browser does this. If you have more than one browser installed on your computer. You should see a display similar to Figure 1.

Caution The default security settings in some browsers cause them to show a security warning when they are asked to open local content. Caution Some text editor programs might try to add a. Save it to a convenient place on your computer.

Be sure your saved file has the extension. Reading a Property of the document Object.. Notice that document. The result is shown in Figure 1. Without the quote marks. Edit hello. You had an overview of the sorts of things JavaScript can do to enhance your web pages and improve the experience for your users.

In the lessons that follow. You may recall from earlier in the hour that objects in the DOM tree have properties and methods. JavaScript sends to the alert method the value contained in the document. Most definitely. Neither d. A compiled language b. An interpreted language c. The document object. The document method c. Quiz 1. Other than in extreme circumstances.

Is JavaScript a compiled or an interpreted language? The top level of the DOM hierarchy is occupied by: Both 2. How many different browsers should I test in?

The document property b. If you have a particularly large piece of JavaScript code. As many as you practically can. Writing standards-compliant code that avoids browser-specific features will go a long way toward making your code run smoothly in different browsers. In fact. Be careful—property names are case sensitive. The window object is at the top of the DOM tree. The window object Answers 1. Note the capital M. The program code is written in plain text. JavaScript is an interpreted language.

Try the example code from this hour in as many different browsers as you have access to. See whether you can then modify the code to use document. What differences do you note in how the example pages are displayed? Try rewriting that script to instead output the document. Javascript statements are written here.

Various ways to include JavaScript in your web pages The basic syntax of JavaScript statements How to declare and use variables Using mathematical operators How to comment your code Capturing mouse events You learned in Hour 1.

Including JavaScript in Your Web Page In the previous hour I said that JavaScript programs are passed to the browser along with page content—but how do we achieve that?

If your JavaScript file is not in the same folder as the calling script In this hour you learn more about how JavaScript can be added to your web page. Hour 2. Just include the raw JavaScript code. Note It is customary to give files of JavaScript code the file extension. This is particularly important in the context of JavaScript libraries. Performance is slightly improved because your browser caches the included file.

When the JavaScript code is updated. You learn about functions in Hour 3. Listing 2. The code for the HTML page is kept cleaner. JavaScript Statements JavaScript programs are lists of individual instructions that we refer to as statements. To interpret statements correctly.. Unless you have a reason to support very old browsers.

After the code has been read and executed. A comment written using this syntax can span multiple lines: To ease the readability of your code. Click here to view code image this is statement 1. We refer to such lines as comments.

To add a multiline comment in this way. A comment that occupies just a single line of code can be written by placing a double forward slash before the content of the line: Comments can act as reminders to you. Many coders of JavaScript. We can set the value stored in netPrice with a simple statement: In CamelCase. Our variables can be called pretty much anything we want. We call this assigning a value to the variable.

Generally the difference is so small as to be barely noticeable. In this example. Such data can take many different forms—an integer or decimal number. JavaScript allows us to carry out operations using the standard arithmetic operators of addition. Having variable names such as productName and netPrice makes code much easier to read and maintain than if the same variables were called var and myothervar Alternatively we can combine these two statements conveniently and readably into one: We could then.

The generated dialog would evaluate the variable and display it this time. Arithmetic Operations First. To assign a character string as the value of a variable. We can use JavaScript to subtract -. To calculate the remainder from a division.

We can use variable names in our operations too: Tip If you need to increment or decrement a variable by a value other than one. For example. We can use this notation for other arithmetic operators. JavaScript uses precedence rules to determine in what order the calculation should be done. The following two lines of code are equivalent: To calculate the average correctly.

So are these two: If you have doubts about the precedence rules. I would recommend that you always use parentheses liberally. You can find detailed information on JavaScript precedence at http: There is no cost to doing so. JavaScript converts the numeric value to a string and concatenates the two: Figure 2. Convert Celsius to Fahrenheit To convert a temperature in degrees Celsius to one measured in degrees Fahrenheit. You should get the result shown in Figure 2. To achieve this. It serves us well for the examples in Part I of this book..

Capturing Mouse Events One of the fundamental purposes of JavaScript is to help make your web pages more interactive for the user.

Ballard Phil. Sams Teach Yourself JavaScript in 24 Hours

We are going to investigate three of these: One way we can implement it is to add one more attribute to the HTML element: All of these occurrences we refer to as events. JavaScript deals with events by using so-called event handlers. Click here to view code image alert 'You clicked the button!

In this case.

In hours 24 yourself pdf javascript teach

The value given to the onclick attribute is the JavaScript code we want to run when the HTML element in this case a button is clicked. When the user clicks on the button. This convention has arisen because. Replacing onmouseover with onmouseout in the code will.

The onMouseOut event. When using this within an event handler added via an attribute of an HTML element. Creating an Image Rollover We can use the onMouseOver and onMouseOut events to change how an image appears while the mouse pointer is above it.

The code is shown in Listing 2. You can change the image names tick. You should see that the image changes as the mouse pointer enters. In this example we used two images. Save the HTML file and open it in your browser. Summary You covered quite a lot of ground this hour. You studied how to declare variables in JavaScript, assign values to those variables, and manipulate them using arithmetic operators.

Does it matter? Empty spaces, such as the space character, tabs, and blank lines, are completely ignored by JavaScript. You can use such blank space, which programmers usually. What is an onClick event handler? A script that executes in response to the user clicking the mouse c. An HTML element that the user can click 2. None b. Exactly one c.

Any number 3. Which of these is NOT a true statement about variables? Their names are case sensitive. They can contain numeric or non-numeric information. Their names may contain spaces.

Answers 1. An onClick event handler is a script that executes when the user clicks the mouse. Variable names in JavaScript must not contain spaces. Exercises Starting with Listing 2. Instead, add an onClick handler to set the. You can access the image title using this. Can you think of an easy way to test whether your script has correctly set the new image title? Hour 3. How to define functions How to call execute functions How functions receive data Returning values from functions About the scope of variables Commonly, programs carry out the same or similar tasks repeatedly during the course of their execution.

For you to avoid rewriting the same piece of code over and over again, JavaScript has the means to parcel up parts of your code into reusable modules, called functions. Using functions also makes your code easier to debug and maintain.

There may be 50 places in your code where such calculations are carried out. However, if all such calculations are wrapped up in a few functions used throughout the application, then you just need to make changes to those functions.

Your changes will automatically be applied all through the application. Functions are one of the basic building blocks of JavaScript and will appear in virtually every script you write. In this hour you see how to create and use functions. General Syntax Creating a function is similar to creating a new JavaScript command that you can use in your script. Inside the braces go the. JavaScript statements that make up the function. In the case of the preceding example, we simply have one line of code to pop up an alert dialog, but you can add as many lines of code as are necessary to make the function Caution The keyword function must always be used in lowercase, or an error will be generated.

Calling Functions Code wrapped up in a function definition will not be executed when the page loads. Instead, it waits quietly until the function is called.

To call a function, you simply use the function name with the parentheses wherever you want to execute the statements contained in the function: For example, you may want to add a call to your new function sayHello to the onClick event of a button: Tip Function names, like variable names, are case-sensitive.

A function called MyFunc is different from another called myFunc. JavaScript objects, such as document. Listing 3. The result of clicking the button is shown in Figure 3.

Passing Arguments to Functions It would be rather limiting if your functions could only behave in an identical fashion each and every time they were called, as would be the case in the preceding example. Fortunately, you can extend the capabilities of functions a great deal by passing data to them.

You do this when the function is called, by passing to it one or more arguments: Now we can call our function, replacing the variable x with a number. Calling the function like the following results in a dialog box being displayed that contains the result of the calculation, in this case Of course, you could equally pass a variable name as an argument.

The following code would also generate a dialog containing the number Multiple Arguments Functions are not limited to a single argument. When you want to send multiple arguments to a function, all you need to do is separate them with commas: You can use as many arguments as you want. Caution Make sure that your function calls contain enough argument values to match the arguments specified in the function definition. If any of the arguments in the definition are left without a value, JavaScript may issue an error, or the function may perform incorrectly.

If your function call is issued with too many arguments, the extra ones will be ignored by JavaScript. The variable names in the argument list act like placeholders for the actual values that will be passed when the function is called.

The names that you give to arguments are only used inside the function definition to specify how it works. We talk about this in more detail later in the hour when we discuss variable scope. The function buttonReport takes three arguments, those being the id, name, and value of the button element that has been clicked. With each of these three pieces of information, a short message is constructed.

These three messages are then concatenated into a single string, which is passed to the alert method to pop open a dialog containing the information. Such a prefixed character is known as an escape sequence. We need to add an onClick event handler to this button from which to call our function. The complete listing is shown in Listing 3. Use your editor to create the file buttons. You should find that it generates output messages like the one shown in Figure 3. Returning Values from Functions OK, now you know how to pass information to functions so that they can act on that information for you.

But how can you get information back from your function? Luckily, there is a mechanism to collect data from a function call—the return value. Instead of using an alert dialog within the function, as in the previous example, this time we prefixed our required result with the return keyword.

To access this value from outside the function, we simply assign to a variable the value returned by the function: Note The values returned by functions are not restricted to numerical quantities as in this example.

In fact, functions can return values having any of the data types supported by JavaScript. We discuss data types in Hour 5. Tip Where a function returns a value, we can use the function call to pass the return value directly to another statement in our code. The value of 27 returned from the function call cube 3 immediately becomes the argument passed to the alert method. Scope of Variables We have already seen how to declare variables with the var keyword.

There is a golden rule to remember when using functions: If we run this code, we first see an alert dialog with the value of the variable invoiceValue which should be 55, but in fact will probably be something like We will not, however, then see an alert dialog containing the value of the variable total.

Instead, JavaScript simply produces an error. Whether you see this error reported depends on your browser settings—you learn more about error handling later in the book—but JavaScript will be unable to display an alert dialog with the value of your variable total. This is because we placed the declaration of the variable total inside the addTax function. We used the return keyword to pass back just the value stored in the variable total, and that value we then stored in another variable, invoice.

We refer to variables declared inside a function definition as being local variables; that is, local to that function. Variables declared outside any function are known as global variables.

To add a little more confusion, local and global variables can have the same name, but still be different variables! The range of situations where a variable is defined is known as the scope of the variable—we can refer to a variable as having local scope or global scope.

Within the showVars function we manipulate two variables, a and b. The variable a we define inside the function; this is a local variable that only exists inside the function, quite separate from the global variable also called a that we declare at the very beginning of the script.

The variable b is not declared inside the function, but outside; it is a global variable. When the page is loaded, showVars returns a message string containing information about the updated values of the two variables a and b, as they exist inside the function—a with local scope, and b with global scope. A message about the current value of the other, global variable a is then appended to the message, and the message displayed to the user.

Copy the code into the file scope. Compare your results with Figure 3. Summary In this hour you learned about what functions are, and how to create them in JavaScript. You learned how to call functions from within your code, and pass information to those functions in the form of arguments.

You also found out how to return information from a function to its calling statement. Finally, you learned about the local or global scope of a variable, and how the scope of variables affects how functions work with them.

Can one function contain a call to another function? Most definitely; in fact, such calls can be nested as deeply as you need them to be.

Sams Teach Yourself JavaScript in 24 Hours, 6th Edition - eBook

What characters can I use in function names? Function names must start with a letter or an underscore and can contain letters, digits, and underscores in any combination.

They cannot contain spaces, punctuation, or other special characters. Functions are called using a. The function keyword b. The call command c. The function name, with parentheses 2. What happens when a function executes a return statement? An error message is generated. A value is returned and function execution continues. A value is returned and function execution stops. A variable declared inside a function definition is called a. A local variable b. A global variable c. An argument.

A function is called using the function name. After executing a return statement, a function returns a value and then ceases function execution. Exercises Write a function to take a temperature value in Celsius as an argument, and return the equivalent temperature in Fahrenheit, basing it on the code from Hour 2. Test your function in an HTML page.

Hour 4. We also looked at one of its child objects, document. In this hour, we introduce some more of the utility objects and methods that you can use in your scripts. Interacting with the User Among the methods belonging to the window object, there are some designed specifically to help your page communicate with the user by assisting with the input and output of information.

The term modal means that script execution pauses, and all user interaction with the page is suspended, until the user clears the dialog. The alert method takes a message string as its argument: The confirm dialog, though, provides the user with a. Clicking on either button clears the dialog and allows the calling script to continue, but the confirm method returns a different value depending on which button was clicked—Boolean true in the case of OK, or false in the case of Cancel.

Note that here, though, we pass the returned value of true or false to a variable so we can later test its value and have our script take appropriate action depending on the result. In this case, though, the dialog invites the user to enter information. A prompt dialog is called in just the same manner as confirm: The prompt method also allows for an optional second argument, giving a default response in case the user clicks OK without typing anything: If the user clicks OK or presses Enter without typing anything into the prompt dialog.

The return value from a prompt dialog depends on what option the user takes: If the user types in input and clicks OK or presses Enter. If the user dismisses the dialog that is. When treated as a number it takes the value 0. Click here to view code image. Note The null value is used by JavaScript on certain occasions to denote an empty value.

For now. The prompt dialog generated by the previous code snippet is shown in Figure 4. Imagine your HTML contains the following element: Content of DIV element. The variable myDivContents will now contain the string value: Click here to view code image document. We now have access to the chosen page element and all of its properties and methods.

In 24 yourself pdf teach javascript hours

Caution Of course. Its methods enable you to use the list. Click here to view code image history. We can think of the page URL as a series of parts: This can be an integer. You can use this property to find how many pages the user has visited: There is also the method go. The properties are listed in Table 4.

The only property owned by the history object is its length. The history object has three methods. To avoid this and get the page directly from the server. Click here to view code image location.

TABLE 4. If you would rather the sending page were removed from the history list and replaced with the new URL. This replaces the old URL with the new one both in the browser and in the history list. Use your editor to create the file navigator. Save the file and open it in your browser. Figure 4. Why is it reporting the appName property as Netscape. The result is that the object provides.

Not all properties are supported in all browsers hence the failure to report the cpuClass property in the preceding example. Each Date object we create can represent a different date and time.

Querying the navigator object is nearly always the wrong way to do it. Note Later in the book we talk about feature detection. There is no Date object already created for you as part of the DOM.

Create a Date Object with the Current Date and Time This is the simplest way to create a new Date object containing information about the.

Although cross-browser standards compliance is closer than it was a few years ago. Dates and Times The Date object is used to work with dates and times. There are several ways to do this: The variable mydate is an object containing information about the date and time at the moment the object was created. JavaScript has a long list of methods for retrieving.

Using a date string: The preceding example produces output like the following: Click here to view code image Created: Fri Jan 06 Wed Feb 08 In the preceding code snippet. The preceding example calculates a date 33 days in the future.

We can also carry out date and time arithmetic. A full list of the methods of the Date object is available in Appendix B. A full list of the available methods is available in Appendix B. Click here to view code image Object created on day number 5 After amending date to 15th. Unlike the Date object. Note the use of toDateString and toTimeString. Finding Minimum and Maximum We can use min and max to pick the largest and smallest number from a list: If the fractional part is less than.

The output as written to the page looks like this: Rounding The methods ceil. As Math. In other words. The youngest person is 19 years old The oldest person is 31 years old Random Numbers To generate a random number. They are listed in Table 4. Caution You always use Math methods directly. Mathematical Constants Various often-used mathematical constants are available as properties of Math.

The code would provoke a JavaScript error. Normally we like to specify the possible range of our random numbers. Instead you simply need Math. The keyword with takes an object as an argument. The statements within that code block can call methods without specifying an object. Reading the Date and Time We put into practice some of what we covered in this hour by creating a script to get the current date and time when the page is loaded.

We also implement a. By using with you can save yourself some tedious typing. Take a look at Listing 4. As we do so. As you will recall. We can access the individual parts of the time and date using getDate.

Remember that JavaScript counts months starting at 0 January and ending in 11 December. At that point the script runs again. Note that the month is displayed as 0. You can retrieve the difference between your local time and UTC time by using the getTimezoneOffset method. You worked with browser information from the navigator object.. You learned how to select page elements by their ID using the document. Does Date have methods to deal with time zones?

In addition to the get. See Appendix B for a full list of methods. You should use getFullYear and setFullYear instead.

Sams Teach Yourself JavaScript in 24 Hours, 6th Edition

The methods getYear and setYear do exist. Which method of the Math object always rounds a number up to the next integer? What happens when a user clicks OK in a confirm dialog? A value of true is returned when OK is clicked. A value of true is returned to the calling program. Because of the potential problems with dates spanning the millennium.

The dialog is cleared and control is returned to the calling program. The location. The displayed message is returned to the calling program. If my loaded page is http: Exercises Modify Listing 4.

Use the history object to create a few pages with their own Forward and Back buttons. The volume returned should be rounded up to the nearest cubic meter.

In this hour you learn about the JavaScript data types of number. To express numbers falling between the integers.

In JavaScript. Numbers Mathematicians have all sorts of names for different types of numbers. The numeric and string data types supported by JavaScript Conversion between data types How to manipulate strings We use the term data type to talk about the nature of the data that a variable contains.

Later you can use it as a string again. From the socalled natural numbers 1. JavaScript supports both integer and floating-point numbers. We also mention escape sequences in strings. Hour 5. A string variable contains a string. If you put a string into your variable and later want to interpret that value as a number. All of the following are valid integers: Hexadecimal numbers begin with 0x.

All the following are valid floating-point numbers: Note In exponential notation. To put it another way. They can be represented in the traditional way. An integer is a whole number—positive. Not a Number NaN NaN is the value returned when your script tries to treat something non-numerical as a number.

Exponential notation provides a compact way to express numbers from the very large to the very small. You can test for non-numerical values with the isNaN function: If the first character in the specified string is a number.

The parseFloat function parses a string and returns a floating-point number. Using parseFloat and parseInt JavaScript offers us two functions with which we can force the conversion of a string into a number format. In most JavaScript implementations. Click here to view code image parseInt You can test for infinite values with the isFinite function.

Click here to view code image parseFloat " The isFinite function takes the value to test as an argument and tries to convert that argument into a number. False and true are known as Boolean values.

There is also the keyword literal -Infinity to signify the negative infinity. This function allows us to optionally include. If the result is NaN.

You might also like: THIRTEEN HOURS PDF

Click here to view code image isFinite Click here to view code image isNaN 3. You can define an empty string by using two quote marks with nothing between them: Examples include the tab character. To use such a character in a string. Strings A string is a sequence of characters from within a given character set for example. The result of inserting these escape sequences is shown in Figure 5. You define a string by enclosing it in single or double quotes: Escape Sequences Some characters that you want to put in a string may not have associated keys on the keyboard.

Such a combination is known as an escape sequence. This is known as string concatenation. TABLE 5. The first is the starting index—substr extracts the characters from a string. The method returns the index the position of the searched-for substring. The second parameter number of characters is optional. JavaScript automatically converts true to 1 and false to 0. In the example. It works the other way. JavaScript interprets any nonzero value as true. JavaScript interprets all of the following values as false: In a practical application.

The Negation Operator! JavaScript interprets the! A new dialog will open. Figure 5. Summary In this hour. Normally you assign the value null to something when you want it to have a valid but nonexistent value.

It is a predefined global variable used to store the value of a variable whose name has been used in a statement. For certain implementations. What statement would return a new string created by appending one string called string2 to another string called string1? The JavaScript Specification does not specify a maximum string length.

JavaScript also has two keywords called object literals—null and undefined. This means that it is not zero or null. To do this in JavaScript. Which statement sets the value of variable paid to Boolean true?

What is the maximum length of a string in JavaScript? Does JavaScript have a data type to represent a single character? For a numeric value. Unlike null. Boolean values should not be enclosed in quotes.

Write a JavaScript function to capitalize the first letter of each word in a given string. Exercises Write a JavaScript function to remove a given number of characters from the end of a string. Hour 6. Each value has a numeric index that may contain data of any data type—Booleans. JavaScript has the array data type to help you do this. Arrays An array is a type of object used for storing multiple values in a single variable. Creating a New Array The syntax used for creating an array will already be familiar to you.

What we mean by the array data type How to declare and populate arrays How to manage array contents Sometimes it makes sense to store multiple variable values under a single variable name. Initializing an Array You can optionally preload data into your array at the time it is created: The following code returns the length of the preceding array: Array Methods Caution Some of the array methods have the same name—and almost the same function— as string methods of the same name.

Be aware of what data type you are working with. TABLE 6. The length property is automatically updated when you add items to or remove items from the array. Suppose we add a new item to the preceding array: Table 6. Click here to view code image myArray. The method returns the index of the searched-for element. Wednesday indexOf We can use indexOf to find the first place where a particular element occurs in an array.

The first element sets the location in the array where we want to perform the splice. Caution Using splice changes the original array! If you need to preserve the array for use elsewhere in your code. In your text editor. Click here to view code image myWeek. The syntax is a little more complex than that of the previous examples: Click here to view code image array.

The method returns any removed elements. We next apply the splice array method to the words array.

Pdf 24 in hours javascript teach yourself

Since the splice method. The method returns an array of elements. We store that array in the variable words. In this hour. Since we supply a single space as the argument to join. The wrangleArray function is called by a small script in the body of the document: What value will be returned by indexOf if it is passed a value that does not appear in the array to which it is applied?

Exercise Review the array and string methods that share a method name. If the element with highest index in array Foo is Foo[8]. JavaScript does not directly support associative arrays arrays with named indexes. Familiarize yourself with how the syntax and operation changes depending on whether these methods are applied to a string or an array. You have an array called monthNames containing the names of all the months of the year.

You can create an array of arrays. How would you use join to create a string name containing all of these month names with a single space between names?

You see examples of this later in the book. Does JavaScript allow associative arrays? It will return Can I create a multidimensional array in JavaScript? To create anything but the simplest scripts. First we declare a variable message. Using conditional statements Comparing values with comparison operators Applying logical operators Writing loops and control structures Setting Timers in JavaScript In Hour 5. The if Statement In the previous hour we discussed Boolean variables.

In this hour we examine ways to recognize particular conditions and have our program act in a prescribed way as a result. JavaScript supports various such conditional statements. JavaScript has several ways to test such values. The third statement tests the value of the variable bool to see whether it is true. Conditional Statements Conditional statements.

We then declare a new variable. It has the following general form: Click here to view code image if this condition is true then do this. Hour 7. Some of the comparison operators are listed in Table 7. IT Research Library. Miscellaneous Books. Computer Languages. Computer Science. Electronic Engineering. Linux and Unix. Microsoft and. Mobile Computing. Networking and Communications. Software Engineering. Special Topics. Web Programming. Other Categories.