JavaScript for WordPress (Crash Note)

What is JavaScript?


  1. JavaScript is the Programming Language of Browser.
  2. It gives life to web pages.
  3. Client-Side Scripting Language.
  4. Used along with HTML
Why JavaScript?
  1. JavaScript is Everywhere
  2. Developer choice*
  3. JavaScript easy to learn
  4. JavaScript can change HTML content

*Developer choice

JavaScript on Server Side Development
  1. JavaScript is can be executed on the server (node.js)
  2. Android/ios developed (react native)

JavaScript embed location

  1. head
  2. body
  3. body footer

It’s will better if we load js in before the end of the body.

We can write JS in three different way
  1.  With creating a JS file/ external file load (cache advantage – best way)
  2.  Embed in HTML file with script tag – in header or footer area
  3.  In HTML tag attributes – basically even related

4 Types output Method in WordPress

  1. window.alert(); / alert();
  2. document.write();
  3. innerHTML
  4. console.log();

Live JavaScript 4 Output Method Code


window.alert('Your content');
alert('Your content');
// this two thing working same

document.write('Your content');
// we can rewrite total document with this function - rewrite can be check by *
// use for testing only

document.getElementById('html-tag-id').innerHTML = "Your content";
// we can push content, or modify html content

console.log('Your content');
// we can show output in browser console
// use for debugging


Rewrite with document.write

document.addEventListener("DOMContentLoaded", function(){
    //it's will be load after full document loaded once
    document.write('Your content');

Output access method

  1. window.print()
  2. print()
<!-- Both are for printing -->
<button id="abc" onclick="window.print()">Print</button> 
<button id="abc" onclick="print()">Print</button>
  • JavaScript Ignore Multiple Space
  • JavaScript case sensitive

Some Quick Point

  • Statement – Statement is the single line of instruction in a program.
  • JavaScript can not count more than one space.

JavaScript Comment

  • A single line can be commented by / (slash)
  • Multiple lines can be commented by this format /* multiple lines */

User Input Function


Variable in JavaScript

What is variable ?
Variable is used storing data in a programming language.

We can define a variable in three different ways in JS. This is:

  1. var
  2. let
  3. const

With this 3 ways, we can declare a variable.

var example

var a = 10 ;
var b;
var b = 10;

let example

let was came in ES6

let can’t be redeclared

        let a = 5;
        let a = 10;
//uncaught SyntaxError: Identifier 'a' has already been declared

let have block scope facility

        let x = 5;
        console.log(x);//it's will show output
    console.log(x);// it's will show a error
    //cause it's in different block

let can not be hoisted

const example

const can not be redeclared and reassigned, it’s also not possible to declare const variable without defining it.

    const a = 5;
    //const a - wrong
    //const a; a = 5; - wrong

JavaScript Operator

There are few type operator in JavaScript

  • Assignment operators
  • Comparison operators
  • Arithmetic operators
  • Bitwise operators
  • Logical operators
  • String operators
  • Conditional (ternary) operator
  • Comma operator
  • Unary operators
  • Relational operators

jQuery Syntax for WordPress