{"id":4489,"date":"2015-08-15T06:12:14","date_gmt":"2015-08-15T06:12:14","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4489"},"modified":"2017-10-17T04:52:25","modified_gmt":"2017-10-17T04:52:25","slug":"javascript-variables","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/javascript-variables\/","title":{"rendered":"JavaScript Variables"},"content":{"rendered":"

 <\/p>\n

Variables are used to hold data in memory. JavaScript variables are declared with the var<\/code> keyword.<\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> age;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Multiple variables can be declared in a single step.<\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> age, height, weight, gender;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

After a variable is declared, it can be assigned a value.<\/p>\n

\n
\n\n\n\n
\n
\n
age = 34;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Variable declaration and assignment can be done in a single step.<\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> age = 34;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

A Loosely-typed Language<\/h2>\n

JavaScript is a loosely-typed language. This means that you do not specify the data type of a variable when declaring it. It also means that a single variable can hold different data types at different times and that JavaScript can change the variable type on the fly. For example, the age<\/code> variable above is an integer. However, the variable strAge<\/code> below would be a string (text) because of the quotes.<\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> strAge = <\/code>\"34\"<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

If you were to try to do a math function on strAge<\/code> (e.g, multiply it by 4), JavaScript would dynamically change it to an integer. Although this is very convenient, it can also cause unexpected results, so be careful.<\/p>\n

Variable Naming<\/h2>\n
    \n
  1. Variable names must begin with a letter, underscore (_<\/code>), or dollar sign ($<\/code>).<\/li>\n
  2. Variable names cannot contain spaces or special characters (other than the underscore and dollar sign).<\/li>\n
  3. Variable names can contain numbers (but not as the first character).<\/li>\n
  4. Variable names are case sensitive.<\/li>\n
  5. You cannot use keywords (e.g, window or function) as a variable name.<\/li>\n<\/ol>\n

    Storing User-Entered Data<\/h2>\n

    The following example uses the prompt()<\/code> method of the window<\/code> object to collect user input. The value entered by the user is then assigned to a variable, which is accessed when the user clicks on one of the span<\/code> elements.<\/p>\n

    Code Sample:<\/h2>\n
    VariablesArraysOperators\/Demos\/Variables.html<\/span><\/div>\n
    \n
    \n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n
    7<\/div>\n
    8<\/div>\n
    9<\/div>\n
    10<\/div>\n
    11<\/div>\n
    12<\/div>\n
    13<\/div>\n
    14<\/div>\n
    15<\/div>\n
    16<\/div>\n
    17<\/div>\n
    18<\/div>\n
    19<\/div>\n
    20<\/div>\n
    21<\/div>\n
    22<\/div>\n
    23<\/div>\n
    24<\/div>\n
    25<\/div>\n<\/td>\n
    		\n
    \n
    <!DOCTYPE HTML><\/code><\/div>\n
    <<\/code>html<\/code>><\/code><\/div>\n
    <<\/code>head<\/code>><\/code><\/div>\n
    <<\/code>meta<\/code> charset<\/code>=<\/code>\"UTF-8\"<\/code>><\/code><\/div>\n
    <<\/code>title<\/code>>JavaScript Variables<\/<\/code>title<\/code>><\/code><\/div>\n
    <<\/code>link<\/code> href<\/code>=<\/code>\"style.css\"<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code> type<\/code>=<\/code>\"text\/css\"<\/code>><\/code><\/div>\n
    <script type=\"text\/javascript\"><\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>\/\/Pop up a prompt<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>var<\/code> userColor = window.prompt(<\/code>\"Enter a color.\"<\/code>, <\/code>\"\"<\/code>);<\/code><\/div>\n
    <\/script><\/code><\/div>\n
    <\/<\/code>head<\/code>><\/code><\/div>\n
    <<\/code>body<\/code>><\/code><\/div>\n
    <<\/code>p<\/code>><\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><<\/code>span<\/code> onclick<\/code>=<\/code>\"document.bgColor = 'red';\"<\/code>>Red<\/<\/code>span<\/code>> |<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><<\/code>span<\/code> onclick<\/code>=<\/code>\"document.bgColor = 'white';\"<\/code>>White<\/<\/code>span<\/code>> |<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><<\/code>span<\/code> onclick<\/code>=<\/code>\"document.bgColor = 'green';\"<\/code>>Green<\/<\/code>span<\/code>> |<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><<\/code>span<\/code> onclick<\/code>=<\/code>\"document.bgColor = 'blue';\"<\/code>>Blue<\/<\/code>span<\/code>> |<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><<\/code>span<\/code> onclick<\/code>=<\/code>\"document.bgColor = userColor;\"<\/code>><\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><script type=\"text\/javascript\"><\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>document.write(userColor);<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><\/script><\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>span<\/code>><\/code><\/div>\n
    <\/<\/code>p<\/code>><\/code><\/div>\n
    <\/<\/code>body<\/code>><\/code><\/div>\n
    <\/<\/code>html<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
    \n

    As the page loads, a prompt pops up aski<\/p>\n

    ng the user to enter a color.<\/p>\n

    \"\"<\/p>\n

    This is done with the prompt()<\/code><\/p>\n

    method of the window<\/code> object. The prompt()<\/code> method is used to get input from the<\/p>\n

     <\/p>\n

    user. It takes two arguments:<\/p>\n

      \n
    1. The message in the dialog box (e.g., “Enter a color.”).<\/li>\n
    2. The default value that appears in the text box. In the example above this is an empty string (e.g, “”).<\/li>\n<\/ol>\n

      If the OK button is pressed, the prompt returns the value entered in the textbox. If the Cancel button or the close button (the red X) is pressed, the prompt returns null<\/code>. In JavaScript, null<\/code> is datatype with only one value: null. It represents a value that we don’t know or that is missing. The line below assigns whatever is returned to the variable userColor<\/code>.<\/p>\n

      \n
      \n\n\n\n
      \n
      \n
      var<\/code> userColor = window.prompt(<\/code>\"Enter a color.\"<\/code>, <\/code>\"\"<\/code>);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

      A script<\/code> block with a call to document.write()<\/code> is then used to output the color entered by the user. This output is contained within a span<\/code> element, which has an onclick<\/code> event handler that will be used to turn the background color of the page to the user-entered color.<\/p>\n

      \n
      \n\n\n\n
      \n
      1<\/div>\n
      2<\/div>\n
      3<\/div>\n
      4<\/div>\n
      5<\/div>\n<\/td>\n
      		\n
      \n
      <<\/code>span<\/code> onclick<\/code>=<\/code>\"document.bgColor = userColor;\"<\/code>><\/code><\/div>\n
      \u00a0\u00a0\u00a0\u00a0<\/code><script type=\"text\/javascript\"><\/code><\/div>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>document.write(userColor);<\/code><\/div>\n
      \u00a0\u00a0\u00a0\u00a0<\/code><\/script><\/code><\/div>\n
      <\/<\/code>span<\/code>><\/code><\/div>\n
      <\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

        Variables are used to hold data in memory. JavaScript variables are declared with the var keyword. var age; Multiple variables can be declared in a single step. var age, height, weight, gender; After a variable is declared, it can be assigned a value. age = 34; Variable declaration and assignment can be done in […]<\/p>\n","protected":false},"author":1,"featured_media":4493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[10],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4489"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4489"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4489\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4493"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}