DONATE  
MENU
JSON
HTML
PHP
CSS
JAVASCRIPT
MYSQL
AJAX

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Introduction » JavaScript Placement
Share Tweet WhatsApp

JavaScript Placement

For your JavaScript programs to be applied or their function felt on your web page, you can have such codes or programs brought to the notice of the webpage in two major ways namely: 1. EXTERNAL SCRIPTS 2. INTERNAL SCRIPTING EXTERNAL SCRIPTS Via this method, you create a separate JavaScript file having a .js extension e.g myscript.js and have your programs and codes written here. Thereafter, you bring the file to the notice of your webpage for usage using the HTML <script> tag. The script tag has a type and an src attributes. The value of the type attribute specifies the type of script, which in this case is text/javascript. Since JavaScript is the default scripting language of the web, you may decide not to specify this attribute but it is advisable to. On the other hand, the src attribute specifies the path to your JavaScript file, which may be any path (relative or absolute) leading to a JS file.
<script type='text/javascript' src='myscript.js'></script>

<script src='http://stackbeginner.com/js/myjavascript.js'></script>
If the script doesn't live in your website or computer, you need to specify the full or absolute path to where the script is located on the internet e.g http.domain.com/path_to_javascript/javascript_file.js. EXAMPLE
function myClick(){
alert("You just clicked a button.");
}

Copy PRACTICE IT

Above, we created a JavaScript file named myscript_20210105113459.js and defined a JavaScript function in it. It can contain as much programs as you want.
<html>
<head>
<title>myJS example</title>
<script type='text/javascript' src='myscript_20210105113459.js'></script>
</head>
<body>
<button onclick='myClick()'>Click Me</button>
</body>
</html>

Copy PRACTICE IT

Above, we created our main webpage where we brought the script file we earlier created and called a function contained inside that script and yes, it worked. You can have as many external JavaScript files as you want but be mindful of your webpage loading speed as too much scripts can slow your page speed down since the browser will need to load the content of each script. INTERNAL SCRIPTING This method is very simple. That is, you simply write all your JavaScript codes in the same file as your webpage. The codes must be contained inside the HTML <script> element,
<script>
//My JavaScript Programs
</script>
You can have as many script elements as you want and just anywhere on a webpage.

<html>
<head>
<script>
//My JavaScript Programs
</script>
</head>
<script>
//My JavaScript Programs
</script>
<body>
<script>
//My JavaScript Programs
</script>
</body>
<script>
//My JavaScript Programs
</script>
</html>
EXAMPLE
<button onclick='myClick()'>Click Me</button>

<script>
function myClick(){
alert("A button was just clicked.");
}
</script>

Copy PRACTICE IT

Above, we created a webpage containing a button. Inside the webpage, we defined a JavaScript function inside a <script> element and the function is expected to execute when the button is clicked. INLINE SCRIPTING Inline scripting is part of internal scripting. It is when codes or JavaScript programs are directly written as values to HTML elements' event attributes.
<!-- This button will execute the addMe() function when clicked -->
<button onclick='addMe()'>SUBMIT</button>

<!-- This button will execute the statements in the onclick attribute -->

<button onclick="var msg = 'Hello World'; alert(msg);">Click Me</button>
EXAMPLE
<button onclick="var msg = 'Hello World'; alert(msg);">Click Me</button>

Copy PRACTICE IT

You will learn more about JavaScript events in later chapters. SUMMARY
  1. Webpages can used JavaScript codes in two major ways.
  2. One way is via external scripts where pure JavaScript codes have been defined. Thereafter, we include such external scripts on our webpage using the HTML <script> tag.
  3. The second method is called internal scripting. Here, you can define your JavaScript codes as content to the HTML <script> elements in a webpage. You can also directly write JavaScript programs as values to HTML elements' event attributes.
  4. You will learn about HTML/JS events in subsequent pages.
Take a short quiz on JavaScript Placement.
Ask a question or tell us if JavaScript Placement is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode