Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Placement

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Placement in HTML File

      When working with JavaScript in a web project, it is important to understand where and how to place your JavaScript code within an HTML file.

      Inline Script

      One common way to include JavaScript in an HTML file is through inline scripts. This involves placing the script directly within the <script>tags inside the HTML document. For example:
      <script>
         // JavaScript code
      </script>
      In the following section, we will see how we can place JavaScript in an HTML file in different ways.
      
      JavaScript in <body>...</body> section
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>JavaScript Example</title>
      </head>
      <body>
      
      <h1>Hello World!</h1>
      
      <script>
          // JavaScript code goes here
          console.log("This is a message from JavaScript");
      </script>
      
      </body>
      </html>
      In this example, the JavaScript code is placed inside the <script> tags within the HTML file. When the page loads, the JavaScript code will be executed and display a message in the console.
      Make sure to place your script tags either in the head or body section of your HTML document depending on when you want them to be executed.

      External Script

      Another approach is to link an external JavaScript file to your HTML document using the <script> tag's src attribute. This keeps your code organized and allows you to reuse scripts across multiple pages. Here's how you can do it:
      For example, you can keep the following content in the filename.js file, and then you can use the sayHello function in your HTML file after including the filename.js file.
      filename.js
      function sayHello() {
         alert("Hello World")
      }
      External JavaScript file doesn’t contain the <script> tag.
      
      Here is an example to show how you can include an external JavaScript file in your HTML code using the script tag and its src attribute.
      You may include the external script reference within the <head> or <body> tag.
      <html>
      <head>
         <script type = "text/javascript" src = "filename.js" ></script>
      </head>
      <body>	
         ...
      </body>
      </html>
      Also, you can create different modules to maintain code better and import each module in another JavaScript file or import all modules in a single HTML file.
      You can follow the below code to add multiple scripts into a single HTML file.
      <head>
        <script src = "filename1.js" ></script>
        <script src = "filename2.js" ></script>
        <script src = "filename3.js" ></script>
      </head>

      Best Practices

      • It is generally recommended to place <script> tags at the end of your HTML body section before closing </body>. This ensures that all HTML content loads before executing any associated scripts.
      • Avoid placing critical scripts as inline elements within the <head> section, as this may delay page rendering.
      • Use comments (//) or multi-line comments (/* */) within your script files for better code organization and readability.
      By following these guidelines on JavaScript placement in an HTML file, you can effectively integrate dynamic functionality into your web pages while maintaining a clean and structured coding environment.