Javascript Basics 01

Aug 22 21:00 2002 Lisa Spurlin Print This Article

... adds simple or ... ... to a Web site, ... the user's ... Like any ... ... you need to ... the building blocks before you can start pro

JavaScript adds simple or sophisticated interactivity to a Web site,Guest Posting enhancing the user's experience. Like any programming language, you need to understand the building blocks before you can start programming.

Start at the Beginning

Browsers know to interpret Web pages as HTML because of the tags. Since JavaScript is contained inside an HTML document, it needs to be set apart with the tags.



TITLE< itle><br><br><script language="JavaScript"><!-- Comment from older browsers<br><br>YOUR SCRIPT HERE<br><br>// end commenting out --><br></script><br></head><br><body><br><br>Don't forget that last </script> tag! Abrowser will try and interpret the whole HTML page as JavaScript, until it comes to that closing tag. Without it, the page will generate unsightly errors and not load properly.<br><br>Comment, Comment, Comment<br><br>Commenting code allows you, or someone else looking at it, to understand what's occuring in the code. Commenting can be done in both single and multi-line variations:<br><br>// single line comments<br><br>/* multi-line<br>comments */<br><br>But what about the HTML comment <!-- --> inside the script tags. That exists so older browsers that don't understand JavaScript won't try and interpret it. Otherwise, the code will render the page as HTML, resulting in the page displaying incorrectly.<br><br>Defining Variables<br><br>JavaScript, like all programming languages, uses variables to store information. These variables can store numbers, strings, variables that have been previously defined, and objects. For example:<br><br>Numeric: var x = 0; <br>String: var y = "hello"; <br>Variables: var z = x + y; <br>Object: var myImage = new Image(); <br><br>Strings MUST contain "" around the word or phrase. Otherwise the JavaScript will interpret it as a number. Numbers and previously defined variables, likewise, should not have "" unless you want that number to be treated as a string.<br><br>Ex: var x = hello ** wrong<br><br>Variables that store numbers and strings can be combined in a new variable. However, if anything is combined with a string, it is automatically be treated as a string. <br><br>Ex: var y = "1";<br>var z = "2";<br>var a = y + z;<br><br>The variable "a" in this instance is "12" not 3, since the two strings were combined together as text, not added like numbers. This would be true even if y = 1.<br><br>Making a Statement<br><br>Notice the semi-colons (;) at the end of each line of code? The semi-colon denotes the end of that particular statement. While JavaScript can sometimes be forgiving if you don't include the semi-colon at the end of each statement, it's good practice to remember to do so. Otherwise, you might not remember to put it there when you really need it.<br><br>Alert! Alert!<br><br>Alerts are one of the greatest functions in JavaScript. They not only pass information on to visitors, but help you when you're trying to hunt down a bug in your code. <br><br>Examples of alerts<br><br>alert("this is a string"); <br>creates an alert that will contain the text"this is a string" <br><br>alert(x) <br>creates an alert that will contain the value defined in variable x (make sure that variable x is defined before calling it)<br><br>alert("the number is " + x); <br>-creates an alert that will combine text and the value in x.<br><br>It Can Do Math Too?<br><br>JavaScript wouldn't be much of a programming language if it couldn't do simple math. While there are dozens of complex, built-in math functions, here are the basic symbols you'll need to know:<br><br>addition + <br>subtraction - <br>multiplication * <br>division / <br>greater than > <br>less than < <br>greater than or equal >= <br>less than or equal <= <br><br>What "If" Statements<br><br>"If" statements are often used to compare values. If the statement is true, a set of instructions enclosed in {} executes. Comparisons like this are done using the following symbols:<br><br>equals == <br>not equal != <br><br>In the example below, you can see how an "if" statement is used to determine text that displays in an alert window. Copy and paste the following script into an HTML page to see it at work.<br><br><script language="JavaScript"><br><!-commenting from old browsers<br>var x = 6;<br>var y = 3;<br><br>// if statement for first alert<br>if ( x == 6 )<br>{<br>alert("x is equal to 6");<br>}<br>else<br>{<br>alert("x is not equal to 6");<br>}<br><br>// defining variable for second alert<br>var z = x + y;<br>alert(z);<br>// end commenting-- ></script><br><br>Notice how the instructions for each statement (both the "if" and "else") are enclosed in {}(curly brackets). All curly brackets must have a beginning and ending, just like HTML tags. If a curly bracket is missing the JavaScript will return an error, so be sure to proof your code. <br><br>________________________________________<br>This document is provided for informational purposes only, and i-Netovation.com makes no warranties, either expressed or implied, in this document. Information in this document is subject to change without notice. The entire risk of the use or the results of the use of this document remains with the user. The example companies, organizations, products, people, and events depicted herein are fictitious. No association with any real company, organization, product, person, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, wit hout the express written permission of i-Netovation.com.<br><br>If you believe that any of these documents, related materials or any other i-Netovation.com content materials are being reproduced or transmitted without permission, please contact: violation@i-netovation.com.<br><br>The names of actual companies and products mentioned herein may be the trademarks of their respective owners. </p> <p>Source: <a href="https://www.articlesfactory.com">Free Guest Posting Articles</a> from ArticlesFactory.com</p> <div class="panel-tags-cats"> <span><i class="fa fa-tag"></i>  Article "tagged" as:</span> <div class="tagcloud"> <a href="/tag/building-blocks.html">building blocks</a> <a href="/tag/adds-simple.html">adds simple</a> <a href="/tag/html-page.html">html page</a> </div> <div class="article-splitter"></div> <span><i class="fa fa-folder-open"></i>  Categories:</span> <div class="category-cloud"> <a href="/articles/javascript.html">Javascript</a> </div> </div> </div> <!-- END .def-panel --> </div> <!-- BEGIN .def-panel --> <div class="def-panel"> <div class="panel-title"> <h2>About Article Author</h2> </div> <div class="about-author"> <span class="about-author-header"> <img width="100" alt="Lisa Spurlin" src="/images/no-avatar.png" /> </span> <div class="about-author-content"> <!--% <div class="right"> <a href="#" class="soc-facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="soc-twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="soc-pinterest"><i class="fa fa-pinterest"></i></a> <a href="#" class="soc-google-plus"><i class="fa fa-google-plus"></i></a> <a href="#" class="soc-linkedin"><i class="fa fa-linkedin"></i></a> </div> %--> <strong>Lisa Spurlin</strong> <p>(C) Copyright 2002. Lisa Spurlin<br></p> <a href="/author/Lisa+Spurlin.html" class="read-more-link">View More Articles<i class="fa fa-chevron-right"></i></a> </div> </div> <!-- END .def-panel --> </div> <!-- BEGIN .def-panel --> <div class="def-panel"> <div class="panel-title"> <h2>Also From This Author</h2> </div> <div class="related-articles"> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: xlarge --> <div class="item-header"> <a href="/articles/web-design/bookmarking-with-flash.html" class="hover-image"><img src="/images/default/small/default-0.jpg" alt="" /></a> </div> <div class="item-content"> <h4><a href="/articles/web-design/bookmarking-with-flash.html">Bookmarking with Flash</a></h4> </div> <!-- END fragments/homepage/articles/one :: xlarge --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: xlarge --> <div class="item-header"> <a href="/articles/education/imcbt.html" class="hover-image"><img src="/images/default/small/default-1.jpg" alt="" /></a> </div> <div class="item-content"> <h4><a href="/articles/education/imcbt.html">IMCBT</a></h4> </div> <!-- END fragments/homepage/articles/one :: xlarge --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: xlarge --> <div class="item-header"> <a href="/articles/internet/common-internet-myths.html" class="hover-image"><img src="/images/default/small/default-2.jpg" alt="" /></a> </div> <div class="item-content"> <h4><a href="/articles/internet/common-internet-myths.html">Common Internet Myths</a></h4> </div> <!-- END fragments/homepage/articles/one :: xlarge --> </div> </div> <!-- END .def-panel --> </div> <!-- BEGIN .def-panel --> <div class="def-panel"> </div> <!-- BEGIN .def-panel --> <div class="def-panel"> </div> <!-- END .main-content-spacy --> </div> <aside class="small-sidebar"> <!-- BEGIN fragments/article/small-sidebar :: small-sidebar --> <!-- BEGIN .widget --> <div class="widget"> <h3>Related Articles</h3> <div class="large-article-list"> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/se-optimization/all-you-need-to-know-about-seo.html">All you need to know about SEO</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/se-optimization/setting-up-your-web-pages-for-search-engine-marketing-success.html">Setting up your web pages for search engine marketing success</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/web-design/lost-and-404-not-found.html">Lost and 404 Not Found</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/se-optimization/optimizing-frames-for-search-engines.html">Optimizing Frames for Search Engines</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/home-business/achieving-financial-freedom-with-network-marketing-on-the-internet-part-2.html">Achieving financial freedom with Network Marketing on The Internet - Part 2</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/ecommerce/a-practical-guide-to-decrease-web-page-load-time.html">A Practical Guide To Decrease Web Page Load Time</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/se-optimization/optimizing-pages-with-javascript-and-style-sheets-for-search-engines.html">Optimizing Pages with JavaScript and Style Sheets for Search Engines</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/home-business/achieving-financial-freedom-with-network-marketing-on-the-internet-part-8.html">"Achieving financial freedom with Network Marketing on The Internet" - Part 8</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/web-design/creating-keyword-rich-pages.html">Creating Keyword Rich Pages</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/internet/how-to-create-optimize-an-seo-friendly-title-tag-digitactix.html">How to Create & Optimize an SEO-friendly Title Tag - Digitactix</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <a href="/articles/javascript.html" class="more-articles-button">show all articles</a> </div> <!-- END .widget --> </div> <!-- BEGIN .widget --> <div class="widget"> <div class="banner"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7277013290225659" crossorigin="anonymous"></script> <!-- 160x600 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7277013290225659" data-ad-slot="8249883319" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <!-- END .widget --> </div> <!-- BEGIN .widget --> <div class="widget"> <h3 style="border-bottom: 2px solid #0b71a1; color: #0b71a1;">Top In Category</h3> <div class="large-article-list"> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/javascript/grow-your-subscribers-exponentially-with-these-javascript-email-capture-boxes.html">Grow Your Subscribers Exponentially With These Javascript E-mail Capture Boxes!</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/javascript/javascript-browser-detection-and-page-redirection.html">Javascript; Browser Detection and Page Redirection</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/javascript/dirty-web-promotion-tricks-1-legitimate-and-malicious-javascripts.html">Dirty Web Promotion Tricks #1 - Legitimate and Malicious Javascripts</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/javascript/which-language-is-best-to-develop-a-secure-website-net-php-java-python-or-ruby-on-rails.html">Which language is best to develop a secure website .Net, PHP, Java, Python or Ruby on Rails?</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/javascript/reasons-to-choose-reactjs-for-your-next-project.html">Reasons to Choose ReactJS for your Next Project</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: large --> <div class="item-content"> <h4> <a href="/articles/javascript/ramadan-etiquettes-holy-month-of-ramadan-in-uae.html">Ramadan Etiquette's: Holy Month of Ramadan in UAE</a> </h4> </div> <!-- END fragments/homepage/articles/one :: large --> </div> <a href="/articles/javascript.html" class="more-articles-button">Read more</a> </div> <!-- END .widget --> </div> <!-- END fragments/article/small-sidebar :: small-sidebar --> </aside> <aside id="sidebar"> <!-- BEGIN .widget --> <div class="widget"> <!-- END .widget --> </div> <!-- BEGIN .widget --> <div class="widget"> <h3>Popular Free Articles</h3> <div class="small-article-list"> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/finance/does-your-life-include-a-ripe-planplanning-tips-for-retirement-investing-protection-and-estate-planning-part-2-investing.html">Does Your Life Include a RIPE Plan?—Planning Tips for Retirement, Investing, Protection, and Estate Planning – Part 2 (Investing)</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/health/hospitalization-admission-procedures.html">Hospitalization - Admission Procedures</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/sexuality/continuous-male-orgasms.html">Continuous Male Orgasms</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/se-tactics/link-building-tricks-with-commentluv-and-keywordluv.html">Link Building Tricks With CommentLuv and KeywordLuv</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/health/prostate-induced-ejaculation-and-male-sexual-health.html">Prostate Induced Ejaculation and Male Sexual Health</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/wisdom/psychic-directory-and-forum.html">Psychic Directory and Forum</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/metaphysical/psychic-healing-repatterning.html">Psychic Healing: Repatterning</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/internet/how-to-login-in-your-mywmtotalrewards-employee-account.html">How To Login in Your Mywmtotalrewards Employee Account?</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/communication/blogs-youll-love-the-marketing-potential.html">Blogs: You'll love the marketing potential</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> <div class="item no-image"> <!-- BEGIN fragments/homepage/articles/one :: noimg --> <div class="item-content"> <h4> <a href="/articles/travel/hong-kong-the-asian-sensation.html">Hong Kong - The Asian Sensation</a> </h4> </div> <!-- END fragments/homepage/articles/one :: noimg --> </div> </div> <!-- END .widget --> </div> <!-- BEGIN .widget --> <div class="widget"> </div> <!-- BEGIN .widget --> <div class="widget"> <h3>Categories Cloud</h3> <div class="tagcloud"> <a href="/articles/politics.html">Politics</a> <a href="/articles/metaphysical.html">Metaphysical</a> <a href="/articles/marriage.html">Marriage</a> <a href="/articles/psychology.html">Psychology</a> <a href="/articles/fitness.html">Fitness</a> <a href="/articles/gardening.html">Gardening</a> </div> <!-- END .widget --> </div> </aside> </div> </div> </section> <!-- BEGIN .footer --> <footer class="footer"> <!-- BEGIN .footer-widgets --> <div class="footer-widgets"> <!-- BEGIN .wrapper --> <div class="wrapper"> <div class="widget"> <h3>Contact Information</h3> <div class="contact-widget"> <div class="large-icon"> <i class="fa fa-phone"></i> <span>+1 628 987 2271</span> </div> <div class="large-icon"> <i class="fa fa-envelope"></i> <span><a href="mailto:info@articlesfactory.com">info@articlesfactory.com</a></span> </div> <p>Articles Factory allows writers and marketers to submit copyright free articles on a mixture of topics which can be distributed with no charge on websites, blogs, and print newsletters.</p> <p><strong>Author's statement of copyright, signature, any hyperlinks inside of article remain intact.</strong></p> </div> </div> <div class="widget"> <h3>Copyright Free Articles</h3> <div class="small-article-list"> <div class="item"> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: small --> <div class="item-header"> <a href="/articles/finance/considerations-for-selecting-the-perfect-small-business-accountant.html" class="hover-image"><img src="/images/default/small/default-0.jpg" alt="" /></a> </div> <div class="item-content"> <h4><a href="/articles/finance/considerations-for-selecting-the-perfect-small-business-accountant.html">Considerations for Selecting the Perfect Small Business Accountant</a></h4> </div> <!-- END fragments/homepage/articles/one :: small --> </div> </div> <div class="item"> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: small --> <div class="item-header"> <a href="/articles/education/5-social-media-marketing-career-tips-for-new-graduates.html" class="hover-image"><img src="/images/default/small/default-1.jpg" alt="" /></a> </div> <div class="item-content"> <h4><a href="/articles/education/5-social-media-marketing-career-tips-for-new-graduates.html">5 Social Media Marketing Career Tips For New Graduates</a></h4> </div> <!-- END fragments/homepage/articles/one :: small --> </div> </div> <div class="item"> <div class="item"> <!-- BEGIN fragments/homepage/articles/one :: small --> <div class="item-header"> <a href="/articles/health/how-to-choose-the-perfect-sonicare-toothbrush.html" class="hover-image"><img src="/images/default/small/default-2.jpg" alt="" /></a> </div> <div class="item-content"> <h4><a href="/articles/health/how-to-choose-the-perfect-sonicare-toothbrush.html">How to Choose the Perfect Sonicare Toothbrush?</a></h4> </div> <!-- END fragments/homepage/articles/one :: small --> </div> </div> </div> </div> <div class="widget"> <h3>Resources</h3> <div class="subscribe-widget"> <div class="item-content"> <div><a href="/my" class="read-more-link" rel="nofollow" style="margin-bottom:5px">My Account</a></div> <div><a href="/all-categories.html" class="read-more-link" style="margin-bottom:5px">Browse Categories</a></div> <div><a href="/archive.html" class="read-more-link" style="margin-bottom:5px">Archive</a></div> <div><a href="/contact.html" class="read-more-link" rel="nofollow" style="margin-bottom:5px">Contact Us</a></div> </div> </div> </div> <div class="clear-float"></div> <!-- END .wrapper --> </div> <!-- END .footer-widgets --> </div> <!-- BEGIN .wrapper --> <div class="wrapper"> <ul class="right"> <li><a href="/terms.html" rel="nofollow">Terms of Use</a></li> <li><a href="/privacy.html" rel="nofollow">Privacy Policy</a></li> </ul> <p>© 2023 Copyright <strong>Articles Factory</strong>. All Rights reserved.</p> <!-- END .wrapper --> </div> <!-- END .footer --> </footer> <!-- END .boxed --> </div> <!-- Scripts --> <script type="text/javascript" src="/jscript/jquery-latest.min.js"></script> <script type="text/javascript" src="/jscript/modernizr.custom.50878.js"></script> <script type="text/javascript" src="/jscript/iscroll.js"></script> <script type="text/javascript" src="/jscript/dat-menu.js"></script> <!--[if lte IE 9]> <script type="text/javascript" src="/jscript/ie-fix.js"></script> <![endif]--> <script type="text/javascript" src="/jscript/theme-scripts.js"></script> <script type="text/javascript" src="/jscript/lightbox.js"></script> <script type="text/javascript" src="/jscript/owl.carousel.min.js"></script> <script> jQuery(document).ready(function() { jQuery(".related-articles").owlCarousel({ items : 3, autoplay : false, nav : false, lazyload : false, dots : false, margin : 30, responsive:{ 0:{ items: 1 }, 400:{ items: 2 }, 700:{ items: 3 } } }); }); </script> <script type="text/javascript" src="/jscript/jquery.countdown.min.js"></script> <script type="text/javascript" src="/jscript/moment.js"></script> <script type="text/javascript" src="/jscript/moment-timezone-with-data.js"></script> </body> </html>