jQuery & JavaScript Tutorial

Welcome to the tutorial. In this tutorial, I'll try to teach you most of the stuff I know about

The Script Tag

The script tag is an iconic tag in HTML5, just like the style tag you can edit live JavaScript right in HTML! Here is an example:


          <script>

            document.write("Hello, World!");

          </script>

Importing jQuery

Inorder to import jQuery you must write this: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>. Heres an example.


        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

JavaScript Var, Const, & Let Command

In JavaScript, has 3 types of variable commands:

const

let

var

Like for example; say I wanted to make PI a constructor all I'd have to do is write this: const PI = Math.PI. And when I do that then this would make PI a constructor and the value would be PI [diameter of a circle 3.14].

jQuery CSS Values

In jQuery, you can change CSS values with jQuery. Like this:


          $(function() {

            $(".box").css({

              "background-color": "black",

              "color": "white",

              "padding": "15px",

              "font-family": "roboto, sans-serif"

            });

          });

Getting Elements With JavaScript

Have you ever heard of HTML DOM? I'm not there yet in the tutorial but I'm getting there. Like this: document.getElementById();.


          var demo = document.getElementById("demo");

          demo.innerHTML = "<p><Hello, World!/p>";

jQuery Animate Function

If you've ever wanted to animate stuff using JavaScript but you just can't find out how? Well tryout jQuery: https://code.jquery.com/jquery-3.6.0.min.js. Heres a basic replica of the animate function:


          $("div").animate({

          width: "100px"

          });

JavaScript Change Values With Buttons

Click the button in the iframe to change the value of the background color of the iframe.

jQuery Fade Method

jQuery has a select few options to fiddle with like for one instance the fade method.


          $("div").fadeOut(1000);

jQuery Selector

Yea, I know I should have introduced this first. But whatever. But you can change HTML values in just the type of a keyboard.


          $(".btnONE").click(function() {

            $(".Start").html("Go!");

          });

JavaScript Object

In JavaScript, you can create objects like this: var person = { name: "John", age: 52, height: 5'7, weight: "150 pounds" }.


          var fruits = [

            'Apple',

            'Orange',

            'Pear',

            'Passion Fruit',

            'Starfruit',

            'Peach',

            'Grapefruit'

          ]

JavaScript HTML DOM

HTML DOM is a JavaScript processer where you can edit HTML5 through JavaScript.


          function changeMe(me) {

            me.style.background = "black";

            me.innerText = "JavaScript";

            me.style.color = "red"

          }

jQuery Fade Toggle Method

The jQuery fadetoggle method allows you to make stuff fade in and out on click.

Date & Time (jQuery & JavaScript)

As you see the title says: Date & Time (jQuery & JavaScript). Okay, now now lets focus on the date and time. Here's the first code snippet:

jQuery


          $(function() {

          var time = $(".time");

            const date = new Date();

            let hours = date.getHours();

            let minutes = date.getMinutes();

            let seconds = date.getSeconds();

            var timeVal = hours + ":" + minutes + ":" + seconds;

            time.html(timeVal);

          });

I'm too lazy to make another code snippet, so here it is in the code box.

JavaScript

function myTimeStart(event) {
event = document.getElementById("time");
const date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
var t = h + ":" + m + ":" + s;
event.innerHTML = t;
}
setInterval(myTimeStart);

Open Browser Code Editor

Welcome to the end of the JavaScript & JQuery Tutorial, at the end of the tutorial we greet you with a HTML, CSS, & JS code editor! Enjoy!! We also include: C++, PHP, & JSON. They don't work on the iframe though. You just get to edit the text!