Scribd
Upload
3 views

Java Intro [Autosaved] [Autosaved]1

Uploaded by

simonkibru82
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Java Intro [Autosaved] [Autosaved]1

Uploaded by

simonkibru82
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Introduction to

JavaScript
Introduction to JavaScript

 What is JavaScript?
 JavaScript (JS) is a programming
language used to make web pages
interactive.
 It runs directly in web browsers.
 Developed in 1995 by Brendan Eich.
 What is a Variable?
 A variable is like a container that holds data. In JavaScript, you can
store text, numbers, objects, or other data types inside variables.
 JavaScript gives you three ways to create a variable:
 var name = "John";
 let age = 25;
 const PI = 3.14159;
An alert() is a built-in function in JavaScript that shows a popup message on the screen.

function

 You can reuse it anytime you want by calling its name.


 function
 greet()
 { console.log("Hello!"); }

 greet();
 alert("Welcome to my website!");
event handler

 An event handler is a function that runs when something happens


— like when the user clicks a button, moves the mouse, types in a text
box, or presses a key.
👉 "Event" = What happens (like a click)
👉 "Handler" = The code that runs in response
<button onclick="sayHello()">Click Me!</button>
<script> function sayHello()
{ alert("Hello there!"); }
</script>
Exericise

 Every one have to create a three buttons and make the buttons
interactive with lesson learned
Assigment

 I want everyone to create a p tag element and write some text to it and
finally create other button and when that button is clicked the p text
needs to change ?
 The DOM (Document Object Model) in JavaScript is a
programming interface that represents the structure of an HTML
or XML document as a tree of objects. It allows JavaScript to
dynamically access, manipulate, and update the content,
structure, and styles of a webpage.
1. innerHTML
•Returns or sets the HTML content inside an element.
•Parses and interprets HTML tags inside the string.
•Can be used to insert elements dynamically.

•textContent
•Returns or sets only the text content inside an
element.
•Ignores and does not parse HTML tags.
 <script>
 // Using innerHTML
 document.getElementById("para1").innerHTML = "This is
<b>bold</b> text.";

 // Using textContent
 document.getElementById("para2").textContent = "This is
<b>bold</b> text.";
 </script>
document.getElementById() in JavaScript
The document.getElementById() method is used to select an HTML element by its id and manipulate it using
JavaScript. It is one of the most common ways to interact with elements in the DOM (Document Object Model).
Syntax:
javascript
document.getElementById("elementID");
•"elementID" is the id of the HTML element you want to access.
•Returns a reference to the element or null if not found.
 JavaScript Can Change HTML Styles (CSS)
 Changing the style of an HTML element, is a variant of changing an
HTML attribute:
 Example
 document.getElementById("demo").style.fontSize = "35px";
 <script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
 <html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>


<button type="button" onclick="myFunction()">Try it</button>
 </body>
</html>
prompt()

 function is used to display a dialog box that asks the user for input. It
provides a simple way to collect text input from users.
 let userInput = prompt("Enter your name:");
 let name=parseFloat(prompt('enter a number'))
 let name=parseInt(prompt('enter a number'))
 document.getElementById("ruru").value
javaScript template literals (using backticks ` `) allow placeholders inside strings using
${}.

console.log(`Hello, my name is ${name} and I am ${age} years old.`);


 document.getElementById("demo").value

document.getElementById("demo").value is a JavaScript statement that retrieves


the value of an HTML element with the ID "demo". If "demo" refers to an <input>, <textarea>, or
<select> field, it fetches the user-entered or selected value. This is commonly used in form
handling to get user input dynamically
if Statement :
The if statement executes a block of code only if the condition inside the parentheses is true.
javascript
let age = 18; if (age >= 18) { console.log("You are an adult."); }
If age is 18 or greater, the message "You are an adult." will be printed .

let age = 18;


if (age >= 18) {
console.log("You are an adult.");
}
 let score = 75;
 if (score >= 90) {
 console.log("Grade: A");
 } else if (score >= 80) {
 console.log("Grade: B");
 } else if (score >= 70) {
 console.log("Grade: C");
 } else {
 console.log("Grade: F");
 }
Ternary Operator (? :)
A shorthand way to write if...else.
javascript
let age = 20; let message = (age >= 18) ? "You can vote." : "You
cannot vote.";

console.log(message);
Logical Operators in JavaScript
Logical operators are used to combine or manipulate boolean values (true or false). They are mainly
used in conditional statements and loops.
1. AND (&&)
•Returns true if both conditions are true, otherwise false.
•Example:
javascript
let a = 10, b = 20; console.log(a > 5 && b < 30); // true (both conditions are true) console.log(a > 15 && b < 30); // false (first
condition is false)
OR (||)
•Returns true if at least one condition is true.
•Example:
let x = 5, y = 15; console.log(x > 10 || y < 20); // true (one condition is true) console.log(x > 10 || y >
20); // false (both conditions are false)

You might also like