LEARNING JAVASCRIPT - JavaScript Strings (JAVASCRIPT TUTORIAL)

1. Welcome
   1. Introduction
   2. First Program
2. Basics
   1. Placing the Code
   2. Lexical Structure
      1. Reserved Words
   3. Variables and Types

      Numbers ● Strings ● Dates ● Arrays

   4. Operators
   5. Control Structures
   6. Functions and Objects
   7. Event Handling
   8. Regular Expressions
3. Advanced Topics
   1. Object Oriented Programming
      1. Constructors and Prototypes
      2. Inheritance
      3. Access Control
   2. Functional Programming in JavaScript
      1. Function Objects
      2. Anonymous Functions
      3. Closures
      4. Higher Order Functions
   3. Modular JavaScript
      1. Modules
      2. Namespaces
   4. Optimization
   5. Metaprogramming
   6. Bookmarklets
4. Debugging
   1. JavaScript Debuggers
   2. Common Mistakes
   3. Debugging Methods
   4. Browser Bugs
5. Dynamic Web Client Programming (DHTML)
   1. Runtime Document Manipulation
      1. Introduction to the Document Object Model (DOM)
      2. Finding Elements
      3. Adding Elements
      4. Changing Elements
      5. Changing Element Styles
      6. Removing Elements
   2. Event Handlers
      1. Simple Event Handlers
      2. W3C Event Handlers
      3. Extended Event Handlers
   3. Running Scripts at Page Load
   4. Soul Building Javascript
   5. XML and Javascript
      1. DOM Manipulation
      2. XSL Sprinkles
   6. DHTML Examples
6. Advanced Web Client Programming
   1. Working with Images
   2. Working with Forms
   3. Working With Cookies
   4. Client-Server Programming (AJAX)
      1. XMLHttpRequest
      2. Handling HTML
      3. Handling JSON
      4. Handling XML
   5. Design Mode
7. JavaScript Outside HTML
   1. ActionScript in Flash
   2. Adobe PDF Forms
   3. JSOSA for the Macintosh
   4. JScript in Microsoft WSH
8. Standards and Best Practices
   1. Naming Conventions
   2. Code Structuring
   3. Accessibility
9. Appendices
   1. Index
   2. Links
   3. Useful Software Tools
   4. History of JavaScript
   5. Contributors

A string is a type of variable which stores a string (chain of characters).

Contents [hide] 1 Basic Use 2 Properties and methods of the String() object 2.1 replace(text, newtext) 2.2 toUpperCase() 2.3 toLowerCase() 2.4 length() 2.5 substring(start[, end]) 3 Further reading

[edit] Basic Use

To make a new string, you can make a variable and give it a value of new String().

var foo = new String();

But, most developers skip that part and use a string literal:

var foo = "my string";

After you have made your string, you can edit it as you like:

foo = "bar"; //foo = "bar"
foo = "barblah"; //foo = "barblah"
foo += "bar"; //foo = "barblahbar"

A string literal is normally delimited by the '  or "  character, and can normally contain almost any character. Common convention differs on whether to use single quotes or double quotes for strings. Some developers are for single quotes (Crockford, Amaram, Sakalos, Michaux) while others are for double quotes (NextApp, Murray, Dojo). Whichever method you choose, try to be consistent in how you apply it.
Due to the delimiters, it's not possible to directly place either the single or double quote within the string when it's used to start or end the string. In order to work around that limitation, you can either switch to the other type of delimiter for that case, or place a backslash before the quote to ensure that it appears within the string:

foo = 'The cat says, "Meow!"';
foo = "The cat says, \"Meow!\"";
foo = "It's \"cold\" today.";
foo = 'It\'s "cold" today.';

[edit] Properties and methods of the String() object

As with all objects, Strings have some methods and properties.

[edit] replace(text, newtext)

The replace() function returns a string with content replaced.

var foo = "microsoft rox";
var newString = foo.replace("rox", "sux")
alert(foo); //microsoft rox
alert(newString); //microsoft sux

As you can see, replace() doesn't actually do anything to the 'foo' object at all.

[edit] toUpperCase()

This function returns the current string in upper case.

var foo = "Hello!";
alert(foo.toUpperCase()); // HELLO!

[edit] toLowerCase()

This function returns the current string in lower case.

var foo = "Hello!";
alert(foo.toLowerCase()); // hello!

[edit] length()

Returns the length as an integer.

var foo = "Hello!";
alert(foo.length); // 6

[edit] substring(start[, end])

Substring extracts characters from the start position

"hello".substring(1); // "ello"

When the end is provided, they are extracted up to but not including the end position.

"hello".substring(1, 3); // "el"

LEARNING JAVASCRIPT - VARIABLE and TYPES - NUMBERS (JAVASCRIPT TUTORIAL)

1. Welcome
   1. Introduction
   2. First Program
2. Basics
   1. Placing the Code
   2. Lexical Structure
      1. Reserved Words
   3. Variables and Types

      Numbers ● Strings ● Dates ● Arrays

   4. Operators
   5. Control Structures
   6. Functions and Objects
   7. Event Handling
   8. Regular Expressions
3. Advanced Topics
   1. Object Oriented Programming
      1. Constructors and Prototypes
      2. Inheritance
      3. Access Control
   2. Functional Programming in JavaScript
      1. Function Objects
      2. Anonymous Functions
      3. Closures
      4. Higher Order Functions
   3. Modular JavaScript
      1. Modules
      2. Namespaces
   4. Optimization
   5. Metaprogramming
   6. Bookmarklets
4. Debugging
   1. JavaScript Debuggers
   2. Common Mistakes
   3. Debugging Methods
   4. Browser Bugs
5. Dynamic Web Client Programming (DHTML)
   1. Runtime Document Manipulation
      1. Introduction to the Document Object Model (DOM)
      2. Finding Elements
      3. Adding Elements
      4. Changing Elements
      5. Changing Element Styles
      6. Removing Elements
   2. Event Handlers
      1. Simple Event Handlers
      2. W3C Event Handlers
      3. Extended Event Handlers
   3. Running Scripts at Page Load
   4. Soul Building Javascript
   5. XML and Javascript
      1. DOM Manipulation
      2. XSL Sprinkles
   6. DHTML Examples
6. Advanced Web Client Programming
   1. Working with Images
   2. Working with Forms
   3. Working With Cookies
   4. Client-Server Programming (AJAX)
      1. XMLHttpRequest
      2. Handling HTML
      3. Handling JSON
      4. Handling XML
   5. Design Mode
7. JavaScript Outside HTML
   1. ActionScript in Flash
   2. Adobe PDF Forms
   3. JSOSA for the Macintosh
   4. JScript in Microsoft WSH
8. Standards and Best Practices
   1. Naming Conventions
   2. Code Structuring
   3. Accessibility
9. Appendices
   1. Index
   2. Links
   3. Useful Software Tools
   4. History of JavaScript
   5. Contributors

JavaScript implement numbers as floating point values, that is, they're attaining decimal values as well as whole number values. The numbers aren't objects, so they don't contain any methods that can be accessed by the normal dot notation. Instead a certain Math object provides usual number functions.

Contents [hide] 1 Basic Use 2 The Math Object 2.1 Methods 2.1.1 random() 2.1.2 max(int1, int2) 2.1.3 min(int1, int2) 2.1.4 floor(float) 2.1.5 ceil(float) 2.1.6 round(float) 2.2 Properties 3 Further reading

[edit] Basic Use

To make a new number, a simple initialization suffices:

var foo = 0; // or whatever number you want

After you have made your number, you can then modify it as necessary. Numbers can be modified or assigned using the operators defined within JavaScript.

foo = 1; //foo = 1
foo += 2; //foo = 3 (the two gets added on)
foo -= 2; //foo = 1 (the two gets removed)

Number literals define the number value. In particular:

• They appear as a set of digits of varying length.
• Negative literal numbers have a minus sign before the set of digits.
• Floating point literal numbers contain one decimal point, and may optionally use the E notation with the character e.
• An integer literal may be prepended with "0", to indicate that a number is in base-8. (8 and 9 are not octal digits, and if found, cause the integer to be read in the normal base-10).
• An integer literal may also be found with "0x", to indicate a hexadecimal number.

[edit] The Math Object

Unlike strings, arrays, and dates, the numbers aren't objects. The Math object provides numeric functions and constants as methods and properties. The methods and properties of the Math object are referenced using the dot operator in the usual way, for example:

var varOne = Math.ceil(8.5);
var varPi = Math.PI;
var sqrt3 = Math.sqrt(3);

[edit] Methods

[edit] random()

Generates a pseudo-random number.

var myInt = Math.random();

[edit] max(int1, int2)

Returns the highest number from the two numbers passed as arguments.

var myInt = Math.max(8, 9);
document.write(myInt); //9

[edit] min(int1, int2)

Returns the lowest number from the two numbers passed as arguments.

var myInt = Math.min(8, 9);
document.write(myInt); //8

[edit] floor(float)

Returns the greatest integer less than the number passed as an argument.

var myInt = Math.floor(90.8);
document.write(myInt); //90;

[edit] ceil(float)

Returns the least integer greater than the number passed as an argument.

var myInt = Math.ceil(90.8);
document.write(myInt); //91;

[edit] round(float)

Returns the closest integer to the number passed as an argument.

var myInt = Math.round(90.8);
document.write(myInt); //91;

[edit] Properties

Properties of the Math Object are most commonly used constants.

• PI: Returns the value of pi.
• E: Returns the constant e.
• SQRT2: Returns the square root of 2.
• LN10: Returns the natural logarithm of 10.
• LN2: Returns the natural logarithm of 2.

LEARNING JAVASCRIPT - VARIABLES AND TYPES (JAVASCRIPT TUTORIAL)

Source: http://en.wikibooks.org/wiki/JavaScript/Variables_and_Types

1. Welcome
   1. Introduction
   2. First Program
2. Basics
   1. Placing the Code
   2. Lexical Structure
      1. Reserved Words
   3. Variables and Types

      Numbers ● Strings ● Dates ● Arrays

   4. Operators
   5. Control Structures
   6. Functions and Objects
   7. Event Handling
   8. Regular Expressions
3. Advanced Topics
   1. Object Oriented Programming
      1. Constructors and Prototypes
      2. Inheritance
      3. Access Control
   2. Functional Programming in JavaScript
      1. Function Objects
      2. Anonymous Functions
      3. Closures
      4. Higher Order Functions
   3. Modular JavaScript
      1. Modules
      2. Namespaces
   4. Optimization
   5. Metaprogramming
   6. Bookmarklets
4. Debugging
   1. JavaScript Debuggers
   2. Common Mistakes
   3. Debugging Methods
   4. Browser Bugs
5. Dynamic Web Client Programming (DHTML)
   1. Runtime Document Manipulation
      1. Introduction to the Document Object Model (DOM)
      2. Finding Elements
      3. Adding Elements
      4. Changing Elements
      5. Changing Element Styles
      6. Removing Elements
   2. Event Handlers
      1. Simple Event Handlers
      2. W3C Event Handlers
      3. Extended Event Handlers
   3. Running Scripts at Page Load
   4. Soul Building Javascript
   5. XML and Javascript
      1. DOM Manipulation
      2. XSL Sprinkles
   6. DHTML Examples
6. Advanced Web Client Programming
   1. Working with Images
   2. Working with Forms
   3. Working With Cookies
   4. Client-Server Programming (AJAX)
      1. XMLHttpRequest
      2. Handling HTML
      3. Handling JSON
      4. Handling XML
   5. Design Mode
7. JavaScript Outside HTML
   1. ActionScript in Flash
   2. Adobe PDF Forms
   3. JSOSA for the Macintosh
   4. JScript in Microsoft WSH
8. Standards and Best Practices
   1. Naming Conventions
   2. Code Structuring
   3. Accessibility
9. Appendices
   1. Index
   2. Links
   3. Useful Software Tools
   4. History of JavaScript
   5. Contributors

JavaScript is a loosely typed language. What this means is that you can use the same variable for different types of information, but you may also have to check what type a variable is yourself if the differences matter. For example, if you wanted to add two numbers, but one variable turned out to be a string, the result wouldn't necessarily be what you expected.

Contents [hide] 1 Variable declaration 1.1 Naming variables 2 Primitive Types 2.1 Boolean Type 2.2 Numeric Types 2.3 String Types 3 Complex Types 3.1 Array Type 3.2 Object Types

[edit] Variable declaration

Variables are commonly explicitly declared by the var statement, as shown below:

var c;

The above variable is created, but has the default value of undefined. To be of value, the variable needs to be initialized:

var c = 0;

After being declared, a variable may be assigned a new value which will replace the old one:

c = 1;

But make sure to declare a variable with var before (or while) assigning to it; otherwise you will create a "scope bug."

[edit] Naming variables

When naming variables there are some rules that must be obeyed:

• Upper case and lower case letters of the alphabet, underscores, and dollar signs can be used
• Numbers are allowed after the first character
• No other characters are allowed
• Variable names are case sensitive: different case implies a different name
• A variable may not be a reserved word

[edit] Primitive Types

Primitive types are types provided by the system, in this case by javascript. Primitive type for javascript are booleans, numbers and text. In addition to the primitive types, users may define their own classes.

The primitive types are treated by Javascript as value types and when you pass them around they go as values. Some types, such as string, allow method calls.

[edit] Boolean Type

Boolean variables can only have 2 possible values, true or false.

var mayday = false;
var birthday = true;

[edit] Numeric Types

You can use Integer and Float types on your variables, but they are treated as a numeric type.

var sal = 20;
var pal = 12.1;

In ECMA Javascript your number literals can go from 0 to -+1.79769e+308. And because 5e-324 is the smallest infinitesimal you can get, anything smaller is rounded to 0.

[edit] String Types

The String and char types are all strings, so you can build any string literal that you wished for.

var myName = "Some Name";
var myChar = 'f';

[edit] Complex Types

A complex type is an object, be it either standard or custom made. Its home is the heap and goes everywhere by reference.

[edit] Array Type

Main page: JavaScript/Arrays

In Javascript, all Arrays are untyped, so you can put everything you want in an Array and worry about that later. Arrays are objects, they have methods and properties you can invoke at will. (The ".length" property indicates how many things are currently in the array. If you add more things to the array, the value of the ".length" gets larger). You can build yourself an array by using the statement new followed by Array, as shown below.

var myArray = new Array(0, 2, 4);
var myOtherArray = new Array();

Arrays can also be created with the array notation, which uses square brackets:

var myArray = [0, 2, 4];
var myOtherArray = [];

Arrays are accessed using the square brackets:

myArray[2] = "Hello";
var text = myArray[2];

There is no limit to the number of items that can be stored in an array.

[edit] Object Types

An object within Javascript is created using the new operator:

var myObject = new Object();

Objects can also be created with the object notation, which uses curly braces:

var myObject = {};

JavaScript Objects can be built using inheritance and overriding, and you can use polymorphism. There are no scope modifiers, with all properties and methods having public access. More information on creating objects can be found in Object Oriented Programming.

You can access browser built-in objects and objects provided through browser JavaScript extensions.

LEARNING JAVASCRIPT - PLACING THE CODE 2 (LABEL: JAVASCRIPT TUTORIAL)

1.       WELCOME

1.       INTRODUCTION  1 - 2 - 3

2.       FIRST PROGRAM

2.       BASICS

1.     PLACING THE CODE -  1

2.       LEXICAL STRUCTURE

1.       RESERVED WORDS

3.       VARIABLES AND TYPES

NUMBERS ● STRINGS ● DATES ● ARRAYS

4.       OPERATORS

5.       CONTROL STRUCTURES

6.       FUNCTIONS AND OBJECTS

7.       EVENT HANDLING

8.       REGULAR EXPRESSIONS

3.       ADVANCED TOPICS

1.       OBJECT ORIENTED PROGRAMMING

1.       CONSTRUCTORS AND PROTOTYPES

2.       INHERITANCE

3.       ACCESS CONTROL

2.       FUNCTIONAL PROGRAMMING IN JAVASCRIPT

1.       FUNCTION OBJECTS

2.       ANONYMOUS FUNCTIONS

3.       CLOSURES

4.       HIGHER ORDER FUNCTIONS

3.       MODULAR JAVASCRIPT

1.       MODULES

2.       NAMESPACES

4.       OPTIMIZATION

5.       METAPROGRAMMING

6.       BOOKMARKLETS

4.       DEBUGGING

1.       JAVASCRIPT DEBUGGERS

2.       COMMON MISTAKES

3.       DEBUGGING METHODS

4.       BROWSER BUGS

5.       DYNAMIC WEB CLIENT PROGRAMMING (DHTML)

1.       RUNTIME DOCUMENT MANIPULATION

1.       INTRODUCTION TO THE DOCUMENT OBJECT MODEL (DOM)

2.       FINDING ELEMENTS

3.       ADDING ELEMENTS

4.       CHANGING ELEMENTS

5.       CHANGING ELEMENT STYLES

6.       REMOVING ELEMENTS

2.       EVENT HANDLERS

1.       SIMPLE EVENT HANDLERS

2.       W3C EVENT HANDLERS

3.       EXTENDED EVENT HANDLERS

3.       RUNNING SCRIPTS AT PAGE LOAD

4.       SOUL BUILDING JAVASCRIPT

5.       XML AND JAVASCRIPT

1.       DOM MANIPULATION

2.       XSL SPRINKLES

6.       DHTML EXAMPLES

6.       ADVANCED WEB CLIENT PROGRAMMING

1.       WORKING WITH IMAGES

2.       WORKING WITH FORMS

3.       WORKING WITH COOKIES

4.       CLIENT-SERVER PROGRAMMING (AJAX)

1.       XMLHTTPREQUEST

2.       HANDLING HTML

3.       HANDLING JSON

4.       HANDLING XML

5.       DESIGN MODE

7.       JAVASCRIPT OUTSIDE HTML

1.       ACTIONSCRIPT IN FLASH

2.       ADOBE PDF FORMS

3.       JSOSA FOR THE MACINTOSH

4.       JSCRIPT IN MICROSOFT WSH

8.       STANDARDS AND BEST PRACTICES

1.       NAMING CONVENTIONS

2.       CODE STRUCTURING

3.       ACCESSIBILITY

9.       APPENDICES

1.       INDEX

2.       LINKS

3.       USEFUL SOFTWARE TOOLS

4.       HISTORY OF JAVASCRIPT

5.       CONTRIBUTORS

LINKS TO GO THROUGH IN THE NEXT POST in part 2

• 3 Linking to external scripts
• 4 Location of script elements
• 5 Reference

Linking to external scripts

JavaScript is commonly stored in a file so that it may be used by many web pages on your site. This makes it much easier for updates to occur and saves space on your server. This method is recommended for separating behavior (JavaScript) from content ((X)HTML) and it prevents the issue of incompatibility with inline comments in XHTML and HTML.

Add src="script.js" to the opening script tag. Replace script.js with the path to the .js file containing the JavaScript.

Because the server provides the content type when the file is requested, specifying the type is optional when linking to external scripts. It's still advised to specify the type as text/javascript, in case the server isn't set up correctly, and to prevent HTML validation complaints.

<script type="text/javascript" src="script.js"> </script>

Location of script elements

The script element may appear almost anywhere within the HTML file.

A standard location is within the head element. Placement within the body however is allowed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <title>Web page title</title>

    <script type="text/javascript" src="script.js"></script>

</head>

<body>

<!-- HTML code here -->

</body>

</html>

There are however some best practices for speeding up your web site ^[4] from the Yahoo! Developer Network that specify a different placement for scripts, to put scripts at the bottom, just before the </body> tag. This speeds up downloading, and also allows for direct manipulation of the DOM while the page is loading.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <title>Web page title</title>

</head>

<body>

<!-- HTML code here -->

<script type="text/javascript" src="script.js"></script>

</body>

</html>