Beginner JavaScript – Chapter 6 – Variables

Posted September 8th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

What are Variables?

The sole purpose of a variable is to store a value. The reason why it’s called a variable is the value can change at any time within the JavaScript application. Variables are used throughout programming with JavaScript, there’s just no escaping them.

Before you can use a variable, you must declare it. To declare a variable, you use the var (for variable) keyword, followed by the identifier (or variable name).
Example:

var variablename
var totalCost

You can declare multiple variables in one statement by separating them with commas.

var totalCost, preTaxCost, taxAmount

Once a variable is declared, you can assign it a value. To assign a value to a variable, you use the assignment operator (=). Example:

lastName = Deacon;
totalCost = 120;

A shortcut (and the typical way developers write code today) is to combine the declaration and assignment all in one statement. Example:

var lastName = "Deacon";
var netTotal = 120;
var tax = netTotal * 8.5%
var totalCost = netTotal + tax;

In the first example above, the text string “Deacon” is assigned to the variable lastName (text strings are always enclosed with quotation marks). In the second example, the value 120 is assigned to the netTotal variable. In the third example, the variable tax is assigned the value assigned to the variable netTotal, multiplied by 8.5 percent. In the last example, the values of the variables netTotal and tax are added together, assigning the resulting value to the variable totalCost.

Confused? Good (based on the fact you answered no, of course).

Following are the various assignment operators (yes, there are more than just =):

  • = Assigns the results/value on the right to the variable on the left.
  • += Adds the results/value on the right to the variable on the left.
  • -= Subtracts the results/value on the right from ythe variable on the left.
  • *= Multiplies the variable by the result of the expression.
  • /= Divides the variable by the result of the expression.
  • %= Stores the modulus of the variable and the result of the expression in the variable.

Note: If an expression contains both a string and number, the number is converted to a string before the expression is processed.

Here’s some examples of common scenarios where these expressions would be used.

var total = 23.95;  -  the variable total contains the value 23.95
grossTotal = total += 76.05; - the variable grossTotal contains the value 100.00
var firstName = "Dennis";
var lastName = "Deacon";
var name = firstName + " " + lastName;
var fullName = "Dennis";
fullName += " ";
fullName += "Deacon";

Beginner JavaScript – Chapter 5 – Expressions

Posted September 7th, 2011 in Javascript, Web Design by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

Expressions are operations on numbers or text strings.

Numeric Expressions

On numbers, you typically perform arithmetic operations, such as addition, subtraction, multiplication, division, etc. To code an arithmetic expression, you use arithmetic operators to operate on two or more values.

Examples of arithmetic operations:

4 + 3
9 * 5
12 / 2

Arithmetic Operators

  • Addition (+): 2 + 3
  • Subtraction (-): 5 – 7
  • Multiplication (*) : 8 * 4
  • Division (/): 12 / 6
  • Modulus (%): 12 % 5
    This operator calculates the remainder of two numbers. Example: 13 % 4 is 1

Two other operators used to increment/decrement are:

  • Increment: (++): counter++
  • Decrement (–): counter–

Numeric expressions follow an order of precedence, based on the order.

  1. Increment Operator (++)
  2. Decrement Operator (–)
  3. Multiplication (*), Division (/) & Modulus (%)
  4. Addition (+), Subtraction (-)

Another way to create precedence is to group expressions with parenthesis.

2 + 4 * 6 = 26 Multiplication is performed first, followed by addition.
(2 + 4) * 6 = 48 Addition grouped by parenthesis is performed first, 
followed by multiplication.

String Expressions

The purpose of string expressions is to join, or concatenate text.

Examples of string operations:

"Dennis " + "Deacon"
"Go to the store and bring me some " + "ice cream."

Beginner JavaScript – Chapter 4 – JavaScript Data Types

Posted August 11th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

There are three types of data in JavaScript:

  • Number
  • String
  • Boolean

Continue Reading »

Beginner JavaScript – Chapter 3 – JavaScript Identifiers

Posted August 10th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

JavaScript Identifiers are names; names that you give things in JavaScript. These JavaScript “things” include

  • variables
  • functions
  • objects
  • properties
  • methods
  • events

Like much of JavaScript, there are rules to be followed.

  • Identifiers can only contain letters, numbers, underscore (_) and the dollar sign ($).
  • Identifiers cannot start with a number.
  • Identifiers are case-sensitive.
  • Identifiers can be any length.
  • Identifiers can not be the same as JavaScript reserved words. (See list of reserved words)
  • Don’t use global properties and methods as identifiers (more later).
  • Don’t use words similar to reserved words.

When naming an identifier with two words in it, it’s a best practice to use camel case. With this convention, the first letter of each word, excluding the first word, is uppercase. Example:

firstName
myCommonVariableName

Here are some examples of valid identifier naming conventions:

  • firstname
  • totalPrice
  • cust_1
  • click_calculate
  • $
  • $total

Beginner JavaScript – Chapter 2 – JavaScript Statements

Posted August 9th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

JavaScript statements are the core building block for anything JavaScript. A JavaScript statement is merely an instruction, telling your JavaScript what to do. Here are some examples of basic JavaScript statements:

var name = "Dennis Deacon";
prompt('What is your name?');
var myDate = new Date();

JavaScript statements follow rules or syntax. Don’t follow the rules, and your JavaScript won’t work.

  • JavaScript is case-sensitive. This means javascript, JavaScript and Javascript are all different. This rules alone will likely cause 80% of your errors in the beginning of using JavaScript.
  • JavaScript statements end with a semicolon (;). While some of code may work without it, missing a semi-colon in the right situations will cause errors. Always best to use at the end of all statements.
  • JavaScript ignores whitespace in statements. Make your JavaScript readable, scannable while developing.

JavaScript allows for commenting in your code. Commenting is a best practice that you should always provide, not only for yourself, but for others that might have to maintain your code in the future.

A single line comment starts with two forward slashes before the commented code. Example:

// This code is commented

If you wish to comment multiple lines of code, you can use the multi-line comment; a forward slash followed by an asterisk, then the reverse (asterisk followed by a forward-slash) at the end of the commented code. Example:

/* This code is commented.
        Make Sure to change the variable below. */

Lastly, when and how to break JavaScript statements.

  • After an arithmetic or related operator (+, -, *, /, etc.)
  • After an opening brace ({), bracket ([), or parenthesis (()
  • After a closing brace (})
  • Do not break JavaScript statements after a closing bracket (]) or parenthesis ())
  • Do not break JavaScript statements after an identifier, a value or the return keyword (more on these later)

Up next: JavaScript identifiers.

Beginner JavaScript – Chapter 1 – Including JavaScript on Web Pages

Posted August 8th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

Before you write your Javascript, you have to know how best to incorporate it into your pages. Officially, there are three methods.

  • In-line
  • Embedded
  • External

Inline “was” one of the more popular methods of including JavaScript on a page. However, in keeping the web standards approach in mind (seperation of content, design & functionality), we’ll focus on the last two. Continue Reading »

Learning JavaScript

Posted August 4th, 2011 in Javascript by deconspray

Things come easy, things come difficult.

For the past 17+ years, I’ve created websites. HTML, XHTML, HTML5, CSS, CSS3, you name it, I’ve done it. I’ve even used Flash, JavaScript and jQuery to enhance my sites. Again, I’ve used JavaScript & jQuery, but I haven’t known it up to this point.

I’ve spent over a decade trying to grasp it; each time, it would elude me and/or I’d become distracted by something more digestible. With the JavaScript renaissance (the advent of JavaScript libraries, AJAX, and all the other developer toys), JavaScript and related libraries have become a requirement in the front-end developer’s tool belt. And overnight, I was behind the ball instead of alongside or in front. So this year, I’ve made it a priority to not only learn, but know JavaScript. I don’t want nor need to be an expert (as I’m heading down a UX track). But I have to know it, create it, manipulate it.

Continue Reading »

Update Your Copyright Date Automatically

Posted January 3rd, 2010 in ASP, Coldfusion, Javascript, Latest, PHP, Server Side Includes, Uncategorized, Web Design by deconspray

It’s a new year, and it’s time to get back to work.

So why do your websites still read © last year or worse?

Most web site owners forget to update their copyright date. And it’s easy to understand why. For most sites, the footer, where the copyright date usually sits, is below the fold and in small type anyways. But for site visitors, it can communicate the freshness of a website’s content. So it doesn’t hurt to make sure this information is updated. Continue Reading »