JavaScript 101

Introduction to JavaScript - variables, Strings, Numbers, booleans and objects.

Transcript

1. JavaScript 101 IS1103 Lab - Friday 11th January 2013
2. Welcome Back! In the first term, we covered HTML and CSS. In this term, we’ll cover: JavaScript The Document Object Model (DOM) jQuery Ajax PHP
3. This week: JavaScript basics Today you’ll learn: A little background info on JavaScript Using Firebug and the Console Variables and data types
4. Introducing JavaScript JavaScript is a high-level scripting language that is traditionally used to create dynamic Web applications. It has zero relation to Java. Java is to JavaScript as Car is to Carpet. Recently, JavaScript has seen increased usage outside the browser (look up Node.js)
5. Using Firebug To start working with JavaScript, we are going to use a feature called the console that comes with Firebug, a developer plug-in to the Firefox browser. The console allows us to execute some JavaScript code and see a result - it is the quickest way to experiment with JavaScript. You’ll learn how to include JavaScript in your Web pages in a Thursday session with Aidan and Kate.
6. console.log When using the Firebug console, we’ll make use of a special function that allows us to output values directly from the console - console.log. Example: console.log("Hello, world!"); console.log(12345);
7. Demo
8. Variables You will have already learned about variables in VB - they allow you to store a data value and associate a symbolic name with that data. Creating variables in JavaScript is really easy: var firstName;
9. Variables (continued) To declare multiple variables, you could use: var firstName; var lastName; Alternatively, you can use the following syntax: var firstName, lastName;
10. Variables (continued) To assign a value to a variable, you simply use: firstName = "Joe"; lastName = "Lennon"; You can also assign values when declaring the variable: var firstName = "Joe", lastName = "Lennon";
11. Demo
12. Data types In VB, you would have come across a large number of different data types - String, Integer, Decimal, Long, Boolean, Char, Date, etc. In JavaScript, there are much fewer data types: Strings (e.g. “Hello”) Numbers (e.g. 100, 3.14159, -139.30) Boolean (i.e. true or false) Object (everything in JavaScript is an Object)
13. Strings A string in JavaScript is zero or more characters enclosed in either 'single' or "double" quotation marks. Examples: var myName = "Joe Lennon"; var location = 'Cork';
14. Strings (continued) When using strings, there are a number of special characters that you can use. For example, if you wanted to use a single quotation mark within a string that is enclosed by single quotation marks, you need to escape it. Example: var name = 'John O\‘Sullivan';
15. Strings (continued) Other special characters you can use include: \n New line \t Tab \\ Backslash character Example: var msg = "Hello.\nMy name is Joe.";
16. How long is a piece of String? You can find out the length of a String using the length property: var myName = "Joe Lennon"; console.log(myName.length); Outputs: 10
17. String methods JavaScript includes several useful methods for analysing and manipulating strings. These include: charAt lastIndexOf split charCodeAt match startsWith concat quote substr contains replace substring endsWith search toLowerCase indexOf splice toUpperCase
18. Demo
19. Numbers Unlike most languages, JavaScript does not differentiate between integers and floating point decimals from a data type perspective. Using numbers in JavaScript: var myAge = 27; var pi = 3.14159; var bankBalance = -291.58;
20. Converting Strings to Numbers There are two methods you can use to convert Strings to Numbers. To convert a String to an Integer use: parseInt("4982"); To convert a String to a floating-point decimal: parseFloat("3.1415926539");
21. A word of warning on parseInt Be careful when using parseInt, if you try to convert a string with a leading zero, you’ll see some very strange behaviour! console.log(parseInt("07")); console.log(parseInt("08")); Produces: 7 0
22. A word of warning on parseInt (continued) This is due to a flaw in browser JavaScript engines where strings with leading zeros are converted into octal numbers rather than decimal numbers. Two ways to prevent this - use a radix: console.log(parseInt("08", 10)); Or, create a Number object instead: console.log(Number("08"));
23. NaN If you try to convert a non-numeric String value to a Number using either parseInt or parseFloat, the result will be a special value “NaN”. This stands for “Not a Number”. You can check if something returns NaN using the following function: isNaN("blah");
24. Math object Next week we’ll learn about operators and how we can use them to perform basic arithmetic. If you want to perform more complex mathematical equations, you can use the Math object. This contains functions max, min, round, sin, cos, tan and many more. Example: to get the sine of 90 degrees (90 deg = π/2) console.log(Math.sin(Math.PI/2));
25. Math object (continued) Methods in the Math object include: abs atan cos log pow sin acos atan2 exp max random tan asin ceil floor min round Properties include: E LN10 LOG10E SQRT1_2 LN2 LOG2E PI SQRT2
26. Demo
27. Boolean Boolean logic allows us to assert that something is true or false. You will use boolean logic a lot when you start building applications. We’ll see a bit more about boolean logic next week when we look at conditional statements. Example: var isMale = true; var isChild = false;
28. Objects Everything in JavaScript is an object*, including Strings, Numbers and Boolean variables as well as arrays and even functions! In the coming weeks you’ll learn about functions, arrays and object literals. * except null and undefined variables
29. Next week Next week, you’ll learn about: Operators and assignment Statements and expressions Conditional logic (if and switch statements) Iteration (for, while and do-while loops) And, If we have time: Working with objects Introducing arrays
30. Source Code & Slides No code on GitHub for the next few weeks as we’ll be working primarily with the Firebug console. The slides are up on Speakerdeck as always, though. See you next week!