JavaSCript: Learn by examples

Self learning tutorials : basic Javascript with HTML , CSS examples

Why Learn JavaScript?

JavaScript is one of the three core web technologies, along with HTML and CSS.

First, HTML provides the structure of web page. Then we have the CSS controls the appearance and layout. Then we have the JavaScript that adds functionality and interactiviey.

What Type of Content will be on Page?

JavaScript adds interactivity to a web page by responding to user actions such as clicks, key presses, and mouse movements. It allows web pages to react instantly without needing to reload, creating a smoother and more engaging user experience.

When a user performs an action, JavaScript can execute a function that changes the page's content, style, or behavior. For example, clicking a button can display a hidden message, validate a form, or update information dynamically.

JavaScript also works with HTML and CSS to create interactive features like image sliders, dropdown menus, pop-up windows, and animations. These actions make websites more responsive, user-friendly, and capable of providing real-time feedback to users.

Exercise: Assigment

What have you learned, practice , do the folowing task. Create two variable or constants , a and b, that should store the value 5 and 3 respectively. Following this also add a third variable or constant , sum that stores the sum of a and b.

Learn: JavaScript Chapters More on Topic

More example of Javascript

Many types of details that involved with JavaScript Programming. Plus many more that are not listed.

List of JavaScript Programming Types

  1. 1.Variables and Constants – Store and manage data.
  2. 2. Data Types – Work with numbers, strings, booleans, arrays, objects, and more.
  3. 3. Operators – Perform calculations and comparisons.
  4. 4. Functions – Group reusable blocks of code to perform specific tasks.
  5. 5. Continental Statements – Make decisions using if, else, and switch.

What are JavaScript Variables and Constants?

Variables that change Vs Constants

In Javascript, variables store values that can change, while constants store values that should not change.

When to use constants

Use constants whenever the data will never change. This makes your intentions clear and helps make your code easier to understand.

let userName = ‘James’;

Introduction To Functions

A fun way to describe Functions

Imagine you have a robot helper. Instead of telling the robot the same instructions over and over, you give it a name like makePizza() or tellJoke().

Every time you call that name, the robot follows the instructions you already wrote. That's exactly what a function is in JavaScript—it stores a set of instructions that you can reuse whenever you need them.

Functions save time, keep your code organized, and make programming much easier and more fun!

Example using Function

1. Define Function
function greetUser (name) {
alert(‘Hi ‘ + name) ;
}

You can but do not need to use parameters and you should , but don’t need to return values , via return

2. Call Function
greetUser (‘ Jose’);

As often as you need , passing in different parameter values.

Most function execution will likely run independent from possible other executions

Think of a function as a smart machine in a factory. Instead of doing one tiny task, it can accept information, process it, make decisions, and return a result.

For example, a calculateTotal() function could take the price of an item, the quantity, and a tax rate, then calculate the final cost.

This makes your code more powerful because the same function can handle many different situations without rewriting the instructions.

Complex functions help programmers solve bigger problems while keeping their code clean, organized, and easy to reuse.

About Projex_simple.com

Purpose of web page , who we are?

This is a personal web programming project created to practice and improve my web development skills. The project gives me the opportunity to learn by building real web pages, experimenting with HTML, CSS, and JavaScript, and applying new concepts as I continue to grow as a developer.