{"id":259,"date":"2011-12-06T22:00:47","date_gmt":"2011-12-06T22:00:47","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:38:34","modified_gmt":"2017-11-18T05:38:34","slug":"lesson-2-javascript-basics","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-2-javascript-basics\/","title":{"rendered":"JavaScript Lesson 2: Creating a JavaScript"},"content":{"rendered":"<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-1-introduction-javascript\/\">&lt;Lesson 1&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-3-javascript-dialog-box\/\">&lt;Lesson 3&gt;<\/a><\/strong><\/h4>\n<h3><strong>2.1 Creating a\u00a0JavaScript<\/strong><\/h3>\n<p>The JavaScript is a plain text file similar to HTML or CSS files. To create a JavaScript, you can use any standard text editors such as the Notepad, WordPad or FrontPage. However, we encourage you to use <a href=\"https:\/\/notepad-plus-plus.org\/\">Notepad++<\/a> which you can download it for free.<\/p>\n<p>Now, launch Notepad++ and enter the following\u00a0 code:<\/p>\n<pre style=\"font-size: 110%; width: 80%;\">document.write(' Welcome to JavaScript Tutorial')<\/pre>\n<p>Save this file with an extension <strong>.js <\/strong>in a folder of your choice. We advise you to create a particular folder to store all your JavaScript files for this tutorial. You can access the file from a\u00a0webpage by using the HTML &lt;script&gt;&lt;\/script&gt; tag. Let&#8217;s say you save the aforementioned file with the name welcom.js, you can access this file by linking it from a webpage as shown in Example 2.1.<\/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<h4 class=\"codebg\"><strong>Example 2.1<\/strong><\/h4>\n<div class=\"codebg\">&lt;!DOCTYPE html&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;My first JavaScript&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script src=&#8221;welcome.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/div>\n<p>The output is a one line sentence that shows<\/p>\n<p>Welcome to JavaScript Tutorial<\/p>\n<h3><strong>2.2\u00a0Embedding JavaScript in a Webpage<\/strong><\/h3>\n<p>You can also embed the JavaScript within an HTML document using the HTML &lt;Script&gt;&lt;\/Script&gt; tags, as follows:<\/p>\n<p>&lt;Script&gt;<\/p>\n<p>Statements<\/p>\n<p>&lt;\/Script&gt;<\/p>\n<p>The &lt;Script&gt;&lt;\/Script&gt; tags tell the web browser that the content in between is actually part of a script. In addition, you can also\u00a0specify the &#8220;type&#8221; attribute of the script tag. Let&#8217;s examine\u00a0 example below:<\/p>\n<h4 class=\"codebg\"><strong>Example 2.2<\/strong><\/h4>\n<div class=\"codebg\">&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;My FirstJavaScript&lt;\/title&gt;<br \/>\n&lt;\/head&gt;&lt;body&gt;<br \/>\n&lt;script&gt;<br \/>\ndocument.write( &#8220;&lt;b&gt; Welcome to JavaScript Tutorial\u00a0&lt;\/b&gt;&#8221; );<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/div>\n<h3>2.3 The Basic Structure of a JavaScript<\/h3>\n<p>A JavaScript\u00a0 structure comprises a series of statements that enables a webpage to perform certain tasks, for examp,e,\u00a0 to display a sentence on your browser. We can take a look at Example 2.3 .<\/p>\n<h4 class=\"codebg\"><strong>Example 2.3<\/strong><\/h4>\n<div class=\"codebg\">CurDate=new Date();<br \/>\ntimeNow=CurDate.getHours();<br \/>\nvar greeting;<br \/>\nif (timeNow&gt;18) {<br \/>\ngreeting=&#8217;Good Evening&#8217;;<br \/>\n} else if(timeNow&gt;12){<br \/>\ngreeting=&#8217;Good Afternoon&#8217;;<br \/>\n} else if(timeNow&gt;0) {<br \/>\ngreeting=&#8217;Good Morning&#8217;;<br \/>\n} else {<br \/>\ngreeting=&#8217;Good Day&#8217;;<br \/>\n}<br \/>\ngreeting=greeting.fontcolor(&#8220;red&#8221;);<br \/>\ngreeting=greeting.bold();<br \/>\ngreeting=greeting.fontsize(&#8220;10&#8221;);<br \/>\ngreeting=greeting.italics();<br \/>\ndocument.write(greeting);<\/div>\n<div><\/div>\n<p>The curly bracket { } indicates the start and end of a JavaScript code block. Each statement is separated by a semicolon. The JavaScript code usually includes objects and their associated methods. Let&#8217;s explore the document object and its write and writeln methods.<\/p>\n<h3><strong>2.4 The write and writeln Methods<\/strong><\/h3>\n<p><strong>document<\/strong> is an object in JavaScript and <strong>write <\/strong>is a <strong>method<\/strong> that displays text in an HTML document. The statement must end with a semicolon ;. Therefore, <strong>document.write<\/strong> displays the text enclosed in the brackets on the HTML document. Another method to display text HTML document is the <strong>writeln <\/strong>method. Write and writeln are basically the same, except that writeln appends a new line at the end of the text. Writeln has to be used together with the &lt;PRE&gt; or &lt;TEXTAREA&gt; tags. Let me illustrate the difference with the following example:<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 2.4<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Write and Writeln&lt;\/title&gt;<br \/>\n&lt;script &gt;<br \/>\ndocument.write( &#8220;&lt;pre&gt;&lt;b&gt;Displaying text with the write method&lt;\/b&gt;&#8221; );<br \/>\ndocument.write( &#8220;&lt;b&gt; The following sentence appear on the same line &lt;\/b&gt;&lt;\/pre&gt;&#8221; );<br \/>\ndocument.write(&#8220;&lt;hr&gt;&#8221;);<br \/>\ndocument.writeln( &#8220;&lt;pre&gt;&lt;b&gt;Displaying text with the writeln method&lt;\/b&gt;&#8221; );<br \/>\ndocument.writeln( &#8220;&lt;b&gt;The following sentence appear on a new line &lt;\/b&gt;&lt;\/pre&gt;&#8221; );<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;&lt;body&gt;&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<\/div>\n<p>Click\u00a0 <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example2.2.htm\">Example 2.4<\/a>\u00a0to view the output<\/p>\n<p><em>Note: document.write(&#8220;&lt;hr&gt;&#8221;); add a horizontal line across the web page<\/em><br \/>\n<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<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-1-introduction-javascript\/\">&lt;Lesson 1&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-3-javascript-dialog-box\/\">&lt;Lesson 3&gt;<\/a><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 1&gt;\u00a0[Contents] &lt;Lesson 3&gt; 2.1 Creating a\u00a0JavaScript The JavaScript is a plain text file similar to HTML or CSS files. To create a JavaScript, you can use any standard text editors such as the Notepad, WordPad or FrontPage. However, we encourage you to use Notepad++ which you can download it for free. Now, launch Notepad++ &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-2-javascript-basics\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 2: Creating a 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-259","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 2: Creating a JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This lesson teaches the basics 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_lesson2.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 2: Creating a JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This lesson teaches the basics of JavaScript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.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:38:34+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-2-javascript-basics\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html\",\"name\":\"JavaScript Lesson 2: Creating a JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-06T22:00:47+00:00\",\"dateModified\":\"2017-11-18T05:38:34+00:00\",\"description\":\"This lesson teaches the basics of JavaScript\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 2: Creating a 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 2: Creating a JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This lesson teaches the basics 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_lesson2.html","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 2: Creating a JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This lesson teaches the basics of JavaScript","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:38:34+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-2-javascript-basics\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html","name":"JavaScript Lesson 2: Creating a JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-06T22:00:47+00:00","dateModified":"2017-11-18T05:38:34+00:00","description":"This lesson teaches the basics of JavaScript","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson2.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 2: Creating a 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\/259","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=259"}],"version-history":[{"count":74,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/259\/revisions"}],"predecessor-version":[{"id":2472,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/259\/revisions\/2472"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}