JavaScript & HTML Code Collection (High-Clarity PDF)
[1] Basic JavaScript Function
--------------------------------
[Link]("Hello, World!");
function calculateSum(num1,num2){
const sum=num1+num2;
alert("The sum of "+num1+" and "+num2+" is: "+sum);
}
const number1=5;
const number2=10;
calculateSum(number1,number2);
[2] Array Operations
--------------------------------
let cities=["New York","Los Angeles","Chicago","Houston","Phoenix"];
[Link]("Total number of cities:",[Link]);
[Link]("San Francisco");
[Link]("Cities after adding a new city:",cities);
[Link]();
[Link]("Cities after removing the first city:",cities);
const specificCity="Chicago";
const index=[Link](specificCity);
if(index!==-1){
[Link]("The index of "+specificCity+" is:",index);
}else{
[Link](specificCity+" is not found in the array.");
}
[3] String Manipulation HTML
--------------------------------
<!DOCTYPE html>
<html>
<head>
<title>String Manipulation</title>
<script>
function isPalindrome(str){
for(let i=0;i<[Link]/2;i++){
if([Link](i)!=[Link]([Link]-1-i)){
return false;
}
}
return true;
}
let userInput=prompt("Enter a string:");
let lengthOfString=[Link];
let extractedWord=[Link]("JavaScript")?
[Link]([Link]("JavaScript"),[Link]("JavaScript")+"JavaScript".length):
"JavaScript not found";
let newString=[Link]("JavaScript","TypeScript");
let palindromeCheck=isPalindrome(userInput);
[Link]("Original String: "+userInput+"<br>");
[Link]("Length of String: "+lengthOfString+"<br>");
[Link]("Extracted Word: "+extractedWord+"<br>");
[Link]("Modified String: "+newString+"<br>");
[Link]("Palindrome Check: "+palindromeCheck);
</script>
</head>
<body>
</body>
</html>
[4] Dynamic Student Object
--------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Student Object</title>
<script>
function createStudent(){
let student={
name:prompt("Enter the student's name:"),
grade:parseInt(prompt("Enter the student's grade:")),
subjects:prompt("Enter the student's subjects separated by commas:").split(",").map(subject=>[Link]())
};
return student;
}
function displayInfo(student){
[Link]("Student Details:");
for(let key in student){
if(typeof student[key]!=="function"){
[Link](`${key}:${student[key]}`);
}
}
[Link]("Passed:",[Link]?"Yes":"No");
[Link]("--------------------");
}
let student=createStudent();
[Link]=[Link]>=40;
displayInfo(student);
</script>
</head>
<body>
</body>
</html>
[5] Event Listeners Example
--------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners Example</title>
</head>
<body>
<button id="clickButton">Click Me</button>
<img id="exampleImage" src="[Link] alt="Example Image" width="200">
<script>
[Link]('clickButton').addEventListener('click',function(){
[Link]('Button Clicked!');
});
[Link]('exampleImage').addEventListener('mouseover',function(){
[Link]='5px solid red';
});
[Link]('exampleImage').addEventListener('mouseout',function(){
[Link]='none';
});
[Link]('keydown',function(event){
[Link]('Key pressed:',[Link]);
});
</script>
</body>
</html>