{"id":133,"date":"2024-02-17T08:40:33","date_gmt":"2024-02-17T08:40:33","guid":{"rendered":"https:\/\/www.xopsschool.com\/tutorials\/?p=133"},"modified":"2024-02-29T18:08:49","modified_gmt":"2024-02-29T18:08:49","slug":"introduction-to-javascript","status":"publish","type":"post","link":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/","title":{"rendered":"Introduction to Javascript?"},"content":{"rendered":"\n

JavaScript is a popular programming language used for web development. JavaScript is a versatile scripting language that enables developers to add interactivity, manipulate the DOM (Document Object Model), and create dynamic content on websites. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.<\/p>\n\n\n\n

Why learn JavaScript?<\/h2>\n\n\n\n

The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer.Even if you haven\u2019t got your heart set on a tech career, being proficient in this language will enable you to build websites from scratch\u2014a pretty useful skill to have in today\u2019s job market!If you do want to become a web developer, here are some of the main reasons why you should learn JavaScript.<\/p>\n\n\n\n

JavaScript Can Change HTML Content?<\/strong><\/h2>\n\n\n\n

JavaScript HTML methods is getElementById()<\/p>\n\n\n\n

<html>\n<head>\n<title> My first Java Script Program <\/title>\n<\/head>\n<body>\n<h1> My Java program<\/h1>\n<button type=\"button\"\nonclick=\"document.getElementById('rahul').innerHTML = Date()\">\nclick me to dispaly Date and Time.<\/button>\n<p id=\"rahul\"><\/p>\n\n<h2> Second Paragraph<\/h2>\n<button type=\"button\"\nonclick='document.getElementById(\"sourav\").innerHTML = \"hello                     friend\"'>click me<\/button>\n<p id=\"sourav\"><\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
JavaScript Change HTML Attribute Values?<\/h2>\n\n\n\n
HTML attribute values using JavaScript means you can make things on a webpage, like images or text, change dynamically when you interact with them. Here’s a simple explanation:<\/p>\n\n\n\n
Basic Example :-<\/strong> 
    <head>
    <title> MY Attribute Image <\/title>
    <body>
    <h1> On of Light <\/h1>
   <button onclick=”document.getElementById(‘Light’).src=’download (1).jpg'”>Turn on Light <\/button>
<img  id=”Light” src=”images.jpg” style=”width:100px”>
<button onclick=”document.getElementById(‘Light’).src=’Red.jpg'”>Turn of Light <\/button>
<\/body>
<\/head><\/p>\n\n\n\n
JavaScript Change HTML Styles CSS?<\/h2>\n\n\n\n
JavaScript can change how things look on a webpage by modifying their styles, which are often defined using CSS (Cascading Style Sheets). Here’s a simple explanation.

Basic Example :<\/strong>–   <\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <title>Css Use<\/title>\n    <style>\n    h1{color:red;}\n    p{ color:darkblue;}\n  <\/style>\n<body>\n    <h1>Css Work<\/h1>\n    <p id=\"on\">Lorem ipsum, dolor sit amet consectetur adipisicing elit.<\/p>\n    <button type=\"button\" \n    onclick=\"document.getElementById('on').style.fontSize='30px'\">Click me <\/button>\n<\/body>\n<\/head>\n<\/html><\/code><\/pre>\n\n\n\n
JavaScript Can Show HTML Elements ?<\/h2>\n\n\n\n
JavaScript can be used to hide or show HTML elements on a webpage dynamically. This is useful for creating interactive and responsive user interfaces.
Basic Example :<\/strong>–   
<!DOCTYPE html>
<html>
<head>
    <title> Show Content <\/title>
    <style>
        h1{color:blue;}
         p{color:chartreuse;}
    <\/style>
<\/head>
<body>
<h1>Content Show<\/h1>
<button type=”button” onclick=”document.getElementById(‘print’).style.display=’block'”>Click Me<\/button>
<p id=”print” style=”display: none”>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, placeat, eaque ipsum dolores, accusantium quaerat laboriosam illo a atque enim deleniti nulla et minus impedit. Itaque sunt
quam fugit tempore.<\/p>
<\/body>
<\/html><\/p>\n\n\n\n
javascript Tag ?<\/h2>\n\n\n\n
JavaScript tag usually refers to the HTML script tag. This tag is used to add JavaScript code to an HTML document. You can either include an external JavaScript file or directly embed JavaScript code within the HTML using this tag.<\/p>\n\n\n\n
Basic Example :<\/strong>–   <\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <title> Script Tag Learning <\/title>\n<\/head>\n<body>\n    <h1> Script Learning <\/h1>\n    <script>\n        document.getElementById('ms').innerHTML = \"script learning time\";\n    <\/script>\n    <p id=\"ms\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio    blanditiis quas quidem voluptatem harum\naliquid odio officia pariatur maiores fugiat, sapiente, nisi, natus tempora officiis ad iure nostrum. Nesciunt,\nbeatae.<\/p>\n<\/body>\n<\/html>\n\nJavaScript Functions Syntax<\/strong> ?\n\nJavaScript functions are basically used to encapsulate logic, making that code more reusable and easier to understand. The syntax for creating a function in JavaScript is quite simple. Functions can take input in the form of parameters and can return a value or output.<\/code><\/pre>\n\n\n\n
   Explain:-<\/strong>       <\/p>\n\n\n\n
       <!DOCTYPE html>\r\n       <html>\r\n       <head>\r\n       <title> Function Learning <\/title>\r\n        <style>\r\n            h1{color:blueviolet;}\r\n            p{color:red;}\r\n        <\/style>\r\n        <script>\r\n            function myfunction(){\r\n            document.getElementById(\"name\").innerHTML = \" Icc WorldCup 2024.\";\r\n            }\r\n        <\/script>\r\n    <\/head>\r\n    <body>\r\n      <h1> Learning <\/h1>\r\n      <p id=\"name\">like<\/p>\r\n     <button type=\"button\" onclick=\"myfunction()\">Try Now<\/button>\r\n    <\/body>\r\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
JavaScript is a popular programming language used for web development. JavaScript is a versatile scripting language that enables developers to add interactivity, manipulate the DOM (Document Object Model), and create dynamic content on websites. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything … Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,8],"tags":[],"class_list":["post-133","post","type-post","status-publish","format-standard","hentry","category-introduction-javascript","category-javascript"],"yoast_head":"\nIntroduction to Javascript? - XOps Tutorials!!!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Javascript? - XOps Tutorials!!!\" \/>\n<meta property=\"og:description\" content=\"JavaScript is a popular programming language used for web development. JavaScript is a versatile scripting language that enables developers to add interactivity, manipulate the DOM (Document Object Model), and create dynamic content on websites. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"XOps Tutorials!!!\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-17T08:40:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-29T18:08:49+00:00\" \/>\n<meta name=\"author\" content=\"ritik hansda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ritik hansda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\"},\"author\":{\"name\":\"ritik hansda\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/c0119ddd2d27ea9cd476e809c8294ba7\"},\"headline\":\"Introduction to Javascript?\",\"datePublished\":\"2024-02-17T08:40:33+00:00\",\"dateModified\":\"2024-02-29T18:08:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\"},\"wordCount\":447,\"commentCount\":0,\"articleSection\":[\"introduction JavaScript\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\",\"url\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\",\"name\":\"Introduction to Javascript? - XOps Tutorials!!!\",\"isPartOf\":{\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/#website\"},\"datePublished\":\"2024-02-17T08:40:33+00:00\",\"dateModified\":\"2024-02-29T18:08:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/c0119ddd2d27ea9cd476e809c8294ba7\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.xopsschool.com\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to Javascript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/#website\",\"url\":\"https:\/\/www.xopsschool.com\/tutorials\/\",\"name\":\"XOps Tutorials!!!\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.xopsschool.com\/tutorials\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/c0119ddd2d27ea9cd476e809c8294ba7\",\"name\":\"ritik hansda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6fe0bc437410899c524975272622377e50e726108b1ad03f7b4488f734304fce?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6fe0bc437410899c524975272622377e50e726108b1ad03f7b4488f734304fce?s=96&d=mm&r=g\",\"caption\":\"ritik hansda\"},\"url\":\"https:\/\/www.xopsschool.com\/tutorials\/author\/ritikhansda\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Javascript? - XOps Tutorials!!!","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":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Javascript? - XOps Tutorials!!!","og_description":"JavaScript is a popular programming language used for web development. JavaScript is a versatile scripting language that enables developers to add interactivity, manipulate the DOM (Document Object Model), and create dynamic content on websites. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything ... Read more","og_url":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/","og_site_name":"XOps Tutorials!!!","article_published_time":"2024-02-17T08:40:33+00:00","article_modified_time":"2024-02-29T18:08:49+00:00","author":"ritik hansda","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ritik hansda","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#article","isPartOf":{"@id":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/"},"author":{"name":"ritik hansda","@id":"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/c0119ddd2d27ea9cd476e809c8294ba7"},"headline":"Introduction to Javascript?","datePublished":"2024-02-17T08:40:33+00:00","dateModified":"2024-02-29T18:08:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/"},"wordCount":447,"commentCount":0,"articleSection":["introduction JavaScript","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/","url":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/","name":"Introduction to Javascript? - XOps Tutorials!!!","isPartOf":{"@id":"https:\/\/www.xopsschool.com\/tutorials\/#website"},"datePublished":"2024-02-17T08:40:33+00:00","dateModified":"2024-02-29T18:08:49+00:00","author":{"@id":"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/c0119ddd2d27ea9cd476e809c8294ba7"},"breadcrumb":{"@id":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.xopsschool.com\/tutorials\/introduction-to-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.xopsschool.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"Introduction to Javascript?"}]},{"@type":"WebSite","@id":"https:\/\/www.xopsschool.com\/tutorials\/#website","url":"https:\/\/www.xopsschool.com\/tutorials\/","name":"XOps Tutorials!!!","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.xopsschool.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/c0119ddd2d27ea9cd476e809c8294ba7","name":"ritik hansda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.xopsschool.com\/tutorials\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fe0bc437410899c524975272622377e50e726108b1ad03f7b4488f734304fce?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fe0bc437410899c524975272622377e50e726108b1ad03f7b4488f734304fce?s=96&d=mm&r=g","caption":"ritik hansda"},"url":"https:\/\/www.xopsschool.com\/tutorials\/author\/ritikhansda\/"}]}},"_links":{"self":[{"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/posts\/133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":3,"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/posts\/133\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xopsschool.com\/tutorials\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}