{"id":253,"date":"2011-12-06T21:42:59","date_gmt":"2011-12-06T21:42:59","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:21:30","modified_gmt":"2017-11-18T05:21:30","slug":"lesson-1-introduction-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-1-introduction-javascript\/","title":{"rendered":"JavaScript Lesson 1: Introduction to JavaScript"},"content":{"rendered":"<h4 style=\"text-align: center;\"><strong><a style=\"font-weight: bold;\" href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a><strong> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-2-javascript-basics\/\">&lt;Lesson 2&gt;<\/a><\/strong><\/strong><\/h4>\n<h3><strong>1.1 What is JavaScript?<\/strong><\/h3>\n<p>JavaScript is a scripting language that works with HTML to enhance web pages and make them more interactive by accessing and modifying the content in a webpage. What is a scripting language? A script is made up of a sequence of statements that give instructions for the computer to perform certain tasks, for examples, like providing a response to the users, to play a song, to start a slideshow, to display certain advertisements and so on.<\/p>\n<p>JavaScript can turn a web page into a lively interactive platform for the world wide web users! JavaScript is a scripting language for HTML. Besides that,\u00a0 you can add sound, date, time, change the color of the web page according to a certain day, prevalidate data entered into a form by the user before it is sent to the server, search through a database, set options based on users preferences and much<br \/>\nmore.Basically, JavaScript\u00a0can access the content of a webpage by selecting any element. attribute or text from an HTML page. It can also modify the content of a webpage by adding elements, attributes, and text to the page.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3><strong>1.2 Why Use JavaScript?<\/strong><\/h3>\n<p>Why use JavaScript? You may have this question in mind. Well, let me get to the point. HTML or HyperText Markup Language was the only language that was used to present text and graphics as well as links to the world wide web users in the 90&#8217;s of the last century. Although it was a vast improvement from the earlier text-only browsers like Gopher, it was relatively passive and static, it cannot interact much with the user. That is why we need JavaScript to make browsing the web a more interesting and useful experience for the Internet users.<\/p>\n<h3><strong>1.3 The Building Block of JavaScript<\/strong><\/h3>\n<p>As JavaScript is an object-oriented programming language; therefore building block of the JavaScript program code is made up of objects as well as methods, properties, and events associated with the objects.<\/p>\n<h4><strong>1.3.1 Objects<\/strong><\/h4>\n<p>The purpose of a JavaScript program is to manipulate the elements of a web page, such as documents, forms, radio buttons, checkboxes, buttons, windows and more. All the aforementioned elements are known as objects.<br \/>\nWe need to identify each object in a web page by given a name to it. For example, the default name of a text box is Textbox1; if we insert another text box, the default name will be TextBox2. We can also change the names of the objects so that it is easier for us to identify them, like Txt_StudentName instead of just TextBox1.<\/p>\n<h4><strong>1.3.2 Properties<\/strong><\/h4>\n<p>Every object of a web page has many properties. The properties of an object reflect its characteristics or its behaviors. For example, the properties of a text box are name, height, width, background color, with a border or no border, font type and size and more.<\/p>\n<h4><strong> 1.3.3 Methods<\/strong><\/h4>\n<p>A method is a task carried out by an object. For example, to display a phrase on a web page, we can use the write method, using the syntax document.write(\u2018Phrase\u201d). For example, document.write(\u201cWelcome to JavaScript\u201d) will display the \u201cWelcome to JavaScript \u201c message.<\/p>\n<h4><strong>1.3.4 Events<\/strong><\/h4>\n<p>An event is an execution of the JavaScript code triggered by an action from the user via the keyboard or mouse. For example, clicking the submit button on a web page will trigger an event that validates the input data and transmits the data to the server. Examples of events are Click, Load, KeyDown, KeyPress, DblClick (Double Click), Select and more.<br \/>\nTo respond to the aforementioned events, JavaScript uses event handlers. Some of the common event handlers are: \u00a0OnClick,OnChange,\u00a0OnLoad,\u00a0onSubmit,\u00a0OnSelect,\u00a0OnMouseOver,KeyPress<\/p>\n<p>We will learn how to write codes for the event handlers in later lessons.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-format=\"autorelaxed\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"2916349441\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a><strong> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-2-javascript-basics\/\">&lt;Lesson 2&gt;<\/a><\/strong><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[Contents] &lt;Lesson 2&gt; 1.1 What is JavaScript? JavaScript is a scripting language that works with HTML to enhance web pages and make them more interactive by accessing and modifying the content in a webpage. What is a scripting language? A script is made up of a sequence of statements that give instructions for the computer &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-1-introduction-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 1: Introduction to JavaScript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-253","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 1: Introduction to JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"Learn the basic concepts of of JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 1: Introduction to JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"Learn the basic concepts of of JavaScript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-18T05:21:30+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-1-introduction-javascript\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html\",\"name\":\"JavaScript Lesson 1: Introduction to JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-06T21:42:59+00:00\",\"dateModified\":\"2017-11-18T05:21:30+00:00\",\"description\":\"Learn the basic concepts of of JavaScript\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 1: Introduction to JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 1: Introduction to JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Learn the basic concepts of of JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 1: Introduction to JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"Learn the basic concepts of of JavaScript","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:21:30+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-1-introduction-javascript\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html","name":"JavaScript Lesson 1: Introduction to JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-06T21:42:59+00:00","dateModified":"2017-11-18T05:21:30+00:00","description":"Learn the basic concepts of of JavaScript","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson1.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 1: Introduction to JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":49,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/253\/revisions"}],"predecessor-version":[{"id":2498,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/253\/revisions\/2498"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}