Web Development (Session 09)

Shape Image One

INTRODUCTION TO
PROGRAMMING LANGUAGE
AND JAVASCRIPT

Introduction

Programming languages are essential tools for creating software and applications. JavaScript, in particular, is a versatile and powerful language used primarily for web development. This section will introduce the basics of programming languages and provide an overview of JavaScript, its syntax, and its usage.

What is a Programming Language?

Definition:

A programming language is a formal language comprising a set of instructions that produce various kinds of output. Programmers use these languages to implement algorithms and develop software applications.

Examples of Programming Languages:
  • Python
  • JavaScript
  • Java
  • C++
  • Ruby

Why Learn Programming?

  • Problem-Solving: Enhances logical thinking and problem-solving skills.
  • Career Opportunities: High demand for skilled programmers in various industries.
  • Automation: Automates repetitive tasks to improve efficiency.
  • Creativity: Allows you to create applications, games, websites, and more.

Introduction to JavaScript

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web. It enables interactive web pages and is an essential part of web applications.

History of JavaScript:

  • Developed by Brendan Eich in 1995 while working at Netscape Communications Corporation.
  • Initially named Mocha, then LiveScript, and finally JavaScript.

Why Use JavaScript?

 
  • Interactivity: Adds interactive elements to websites.
  • Versatility: Can be used for both front-end and back-end development (with Node.js).
  • Popularity: Widely used and supported by all modern web browsers.
  • Community: Large community with abundant resources and libraries.

JavaScript Basics

1. Adding JavaScript to HTML:

JavaScript can be added to an HTML document using the <script> tag.

Inlne JavaScript:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>JavaScript Example</title>

</head>

<body>

    <h1>Hello, World!</h1>

    <script>

        console.log(“Hello, World!”);

    </script>

</body>

</html>

External JavaScript:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>JavaScript Example</title>

    <script src=”script.js”></script>

</head>

<body>

    <h1>Hello, World!</h1>

</body>

</html>

script.js:

console.log(“Hello, World!”);

 

2. JavaScript Syntax:

Variables: Variables are used to store data values. In JavaScript, you can declare variables using var, let, or const.

let name = “John”;

const age = 30;

var city = “New York”;

Data Types: JavaScript supports various data types, including strings, numbers, booleans, arrays, and objects.

let str = “Hello, World!”;  // String

let num = 42;  // Number

let bool = true;  // Boolean

let arr = [1, 2, 3];  // Array

let obj = { name: “John”, age: 30 };  // Object

Operators: JavaScript supports arithmetic, comparison, logical, and assignment operators.

let sum = 10 + 5;  // Arithmetic

let isEqual = (10 == 5);  // Comparison

let isTrue = (true && false);  // Logical

let x = 10;  // Assignment

x += 5;  // Compound assignment

Functions: Functions are blocks of code designed to perform a particular task.

function greet(name) {

    return “Hello, ” + name + “!”;

}

let message = greet(“John”);

console.log(message);

Control Structures:

JavaScript includes control structures like conditionals and loops to control the flow of execution.

If-Else:

let age = 18;

if (age >= 18) {

    console.log(“You are an adult.”);

} else {

    console.log(“You are a minor.”);

}

For Loop:

for (let i = 0; i < 5; i++) {

    console.log(i);

}

DOM Manipulation

JavaScript can interact with the HTML content of a webpage through the Document Object Model (DOM).

Selecting Elements:

let heading = document.querySelector(“h1”);

Modifying Elements:

heading.textContent = “Welcome to JavaScript!”;

heading.style.color = “blue”;

Event Handling

JavaScript can respond to user interactions through events.

Click Event:

<button id=”myButton”>Click Me</button>

<script>

    let button = document.getElementById(“myButton”);

    button.addEventListener(“click”, function() {

        alert(“Button was clicked!”);

    });

</script>

Articles:
Videos:

Conclusion

JavaScript is a powerful and versatile language essential for web development. Understanding its basics, syntax, and usage will enable you to create interactive and dynamic web pages. Keep practicing and exploring new features and libraries to enhance your JavaScript skills.

Optimized by Optimole
WhatsApp whatsapp
Messenger messenger
Instagram instagram
Call Us phone
chat