Scribd
Upload
51 views

3 Javascripttt

The document contains code examples demonstrating various JavaScript concepts including: 1. Using alert boxes and buttons to display messages. 2. Changing HTML content and styles dynamically using JavaScript. Variables, functions, and event handlers are used to modify elements on the page. 3. Demonstrating data types, operators, arrays, objects, constructors and other programming fundamentals. The multiple code snippets provide a tutorial on basic to intermediate JavaScript concepts through interactive examples.

Uploaded by

llavii
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

3 Javascripttt

The document contains code examples demonstrating various JavaScript concepts including: 1. Using alert boxes and buttons to display messages. 2. Changing HTML content and styles dynamically using JavaScript. Variables, functions, and event handlers are used to modify elements on the page. 3. Demonstrating data types, operators, arrays, objects, constructors and other programming fundamentals. The multiple code snippets provide a tutorial on basic to intermediate JavaScript concepts through interactive examples.

Uploaded by

llavii
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

<!--1.alertmessage.

html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<title>
alert message
</title>
</head>
<body>
<p>
Javascript.
</p>
<script type="text/javascript"
src="js/code.js"></script>
</body>
</html>
//File: code.js in the js folder
window.alert("Welcome to Javascript!");

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
buttons
</title>
</head>
<body>
<p>
Javascript.
</p>
<button onclick="alert('How can I help you?')">
Click me.
</button>
<button id="button2">
Click me.
</button>
<script>
document.getElementById("button2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
change html content
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;

}
</style>
</head>
<body>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great">
great
</span>
.
</p>
</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>
</div>
<div class="greenbox">
<p>
Microsoft.
</p>
</div>
<button id="button1">
Change facebook content.
</button>
<button id="button2">
Change apple content.
</button>
<script>
document.getElementById("button1").onclick =
function(){
document.getElementById("facebook").innerHTML =
"<p>Facebook.</p>";
}

document.getElementById("button2").ondblclick =
function(){
document.getElementById("apple").innerHTML =
"<ul><li>Audi</li><li>BMW</li><li>Mercedes</li></ul>";
}
</script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
change html style
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;

}
</style>
</head>
<body>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great">
great
</span>
.
</p>
</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>
</div>
<div class="greenbox">
<p>
Microsoft.
</p>
</div>
<button id="button1">
Change facebook style.
</button>
<button id="button2">
Change apple style.
</button>
<script>
document.getElementById("button1").onclick =
function(){
document.getElementById("facebook").style.width =
'200px';
document.getElementById("facebook").style.backgroundColor
= 'rgba( 26, 203, 135, 0.1 )';

}
document.getElementById("button2").ondblclick =
function(){
document.getElementById("apple").style.fontFamily =
'monospace';
document.getElementById("apple").style.fontSize
= '3em';
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
variables and date types
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;

}
</style>
</head>
<body>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great">
great
</span>
.
</p>
</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>
</div>
<div class="greenbox">
<p>
Microsoft.
</p>
</div>
<button id="button1">
Change facebook style.
</button>
<button id="button2">
Change apple style.
</button>
<script>
var x = 3;
window.console.log(x);
var y;
y = 5;
var z;
window.console.log("the value of z is " + z);
z = x + y;

window.console.log("the value of z is " + z);


window.console.log("the type of z is: " +
typeof(z));
z = x + " " + y;
window.console.log("the value of z is " + z);
window.console.log("the type of z is " + typeof(z));
var greeting = "Hello";
var firstname = "John";
var message = greeting + " " + firstname;
window.console.log("the value of message is: " +
message);
window.console.log("the type of message is: " +
typeof(message));
var check = (x == 5);
window.console.log("the value of check is: " +
check);
window.console.log("the type of check is: " +
typeof(check));
var myArray = [1,2,3];
window.console.log(myArray);
window.console.log(typeof(myArray));
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
change html using variables
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;

}
</style>
</head>
<body>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great">
great
</span>
.
</p>
</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>
</div>
<div class="greenbox">
<p>
Microsoft.
</p>
</div>
<button id="button1">
Change facebook style.
</button>
<button id="button2">
Change apple style.
</button>
<script>
var color = 'rgb(18, 149, 68)';
document.getElementById("button1").onclick =
function(){
document.getElementById("facebook").style.backgroundColor
= color;

}
var x, y, z, appleColor;
document.getElementById("button2").onclick =
function(){
x = Math.round(Math.random()*256);
y = Math.round(Math.random()*256);
z = Math.round(Math.random()*256);
appleColor = 'rgb(' + x + ', ' + y + ', ' + z +
')';
document.getElementById("apple").style.backgroundColor =
appleColor;
document.getElementById("apple").innerHTML = '<p>'
+ appleColor + '</p>';
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
functions
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;

}
</style>
</head>
<body>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great">
great
</span>
.
</p>
</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>
</div>
<div class="greenbox" id="microsoft">
<p>
Microsoft.
</p>
</div>
<button id="button1"
onclick="swap('facebook','apple')">
Swap content of facebook and apple.
</button>
<button id="button2"
onclick="swap('apple','microsoft')">
Swap content of apple and microsoft.
</button>
<script>
function greeting1(){
window.alert('Hello!');
}
//greeting1();

function greeting2(firstname){
window.alert('Hello ' + firstname + '!');
}
//greeting2('Mike');
function sum(a,b){
return a+b;
}
var x = sum(3,7);
//window.alert(x);
function swap(id1,id2){
var y =document.getElementById(id1).innerHTML;
var z =document.getElementById(id2).innerHTML;
document.getElementById(id2).innerHTML = y;
document.getElementById(id1).innerHTML = z;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
objects
</title>
</head>
<body>
<p>
Javascript.
</p>
<script>
var myPhone = {
make : "Apple" ,
model : "Iphone 4",
warranty : 12,
color : "white"
}
;
window.console.log(myPhone);
delete myPhone.warranty;
window.console.log(myPhone);
window.console.log(myPhone.model);
var myOtherPhone = myPhone;
window.console.log(myOtherPhone);

myOtherPhone.model = "Iphone 5";


window.console.log(myOtherPhone);
window.console.log(myPhone);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
objects using new
</title>
</head>
<body>
<p>
Javascript.
</p>
<script>
var myPhone = new Object();
myPhone.make = "Samsung";
myPhone.model = "Galaxy S4";
myPhone.warranty = 12;
myPhone.color = "black";
window.console.log(myPhone);
myPhone.warranty = 0;
window.console.log(myPhone);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
object constructors
</title>
</head>
<body>
<p>
Javascript.
</p>
<script>
function phone(make, model, warranty, color){
this.make = make;
this.model = model;
this.warranty = warranty;
this.color = color;
this.extendWarranty = function (x) {
this.warranty += x;
}
}
var myPhone = new phone("Apple", "Iphone 5", 12,
"white");

window.console.log(myPhone);
myPhone.extendWarranty(12);
window.console.log(myPhone.warranty);
myPhone.condition = "like new";
window.console.log(myPhone);
window.console.log(myPhone.condition);
var myBrothersPhone = new phone("Apple", "Iphone 4", 6,
"black");
window.console.log(myBrothersPhone);
window.console.log(myBrothersPhone.condition);
phone.prototype.condition = "new";
window.console.log(myBrothersPhone.condition);
window.console.log(myPhone.condition);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
arrays
</title>
</head>
<body>
<p id="myParagraph">
Javascript.
</p>
<script>
var shoppingList = ["bread", "eggs", "milk"];
//var shoppingList = new Array("bread", "eggs",
"milk");
showResult(shoppingList);
showResult(shoppingList[0]);
showResult(shoppingList[2]);
function showResult(x){
document.getElementById("myParagraph").innerHTML
+= "<br />" + x;
}
shoppingList[1] = "yogurt";
showResult(shoppingList);
shoppingList[2] = "orange";

showResult(shoppingList);
delete shoppingList[1];
showResult(shoppingList);
shoppingList[1] = "yogurt";
showResult(shoppingList);
shoppingList.splice(1,1);
showResult(shoppingList);
shoppingList.splice(1,0,"banana", "apple");
showResult(shoppingList);
shoppingList.sort();
showResult(shoppingList);
shoppingList.reverse();
showResult(shoppingList);
var myString = 'what is weather like?';
var myArray = myString.split(' ',2);
showResult(myArray);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
if and switch
</title>
</head>
<body>
<p>
Speed on the motorway:
<input id="speed" type="number"/>
<button onclick="checkSpeed()">
Check
</button>
</p>
<p>
Your season now:
<input id="myInput"/>
<button onclick="checkSeason()">
Submit
</button>
</p>
<script>
function checkSpeed(){

var speed =
document.getElementById("speed").value;
if (speed>70){
window.alert("You are going too fast!");
}
else if(speed<40){
window.alert("You are going too slow!");
}
else{
window.alert("Your speed is fine");
}
}
function checkSeason(){
var x =
document.getElementById("myInput").value.toLowerCase();
switch(x){
case "summer":
window.alert("It is summer time!");
break;
case "winter":
window.alert("It is winter time!");
break;
case "spring":
window.alert("It is spring time!");
break;
case "autumn":
window.alert("It is autumn time!");
break;
default:
window.alert("I do not recognise this");
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
loop for
</title>
</head>
<body>
<p id="myParagraph">
Javascript.
</p>
<script>
for(i=0; i<5; i++){
document.getElementById("myParagraph").innerHTML
+= "<br />" + i;
}
for(i=7; i>0; i--){
document.getElementById("myParagraph").innerHTML
+= "<br />" + Math.pow(i,2);
}
var shoppingList = ["bread", "milk", "eggs"];
for(i=0; i<shoppingList.length; i++){

document.getElementById("myParagraph").innerHTML
+= "<br />" + shoppingList[i];
}
var numberList = [1, 2, 3];
for(i=0; i<numberList.length; i++){
numberList[i] += 10;
}
document.getElementById("myParagraph").innerHTML +=
"<br />" + numberList;
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
while loop
</title>
</head>
<body>
<p id="myParagraph">
Javascript.
</p>
<button onclick="initiateGame()">
Start
</button>
<div id="balance">
Current Balance: $1000
</div>
<script>
var i = 0;
while(i<5){
document.getElementById("myParagraph").innerHTML
+= "<br />" + i;
i++;
}
function initiateGame(){

var balance = 1000;


var itemsBought = 0;
while(balance>0){
var itemPrice = Math.floor(Math.random()*100);
if(itemPrice <= balance){
itemsBought += 1;
balance -= itemPrice;
document.getElementById("balance").innerHTML
+= "<p> Purchase amount: $" + itemPrice +". New Balance:
$" + balance + ". </p>";
}
}
document.getElementById("balance").innerHTML +=
"<p> You bought: " + itemsBought + " items.</p>";
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Regular Expression
</title>
</head>
<body>
<p>
String:
<span id="string">
</span>
</p>
<p>
Pattern:
<span id="pattern">
</span>
</p>
<p>
Result(search):
<span id="search">
</span>
</p>
<p>
Result(match):

<span id="match">
</span>
</p>
<p>
Result(test):
<span id="test">
</span>
</p>
<script>
var str = "Atlanta \n5783 75%";
//var pattern = /[a-z]/g;
//var pattern = /[^atn]/g;
//var pattern = /[4-7]/g;
//var pattern = /\d/g;
//var pattern = /\w/g;
//var pattern = /\W/g;
//var pattern = /\s/g;
//var pattern = /\d{10}/g;
//var pattern = /^b/g;
var pattern = /\n/g;
//var pattern = new RegExp("a","g");
document.getElementById("string").innerHTML = str;
document.getElementById("pattern").innerHTML =
pattern;
document.getElementById("search").innerHTML =
str.search(pattern);
document.getElementById("match").innerHTML =
str.match(pattern);
document.getElementById("test").innerHTML =
pattern.test(str);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
errors
</title>
<style>
#error{

color: #d36363;
}
</style>
</head>
<body>
<p>
Your password should contain at least 6 characters,
1 number and 1 capital letter:
</p>
<p>
Enter Password:
<br />
<input id="password" type="password">
</p>
<p>
Re-enter Password:
<br />
<input id="password2" type="password">
</p>
<button onclick="check()">
Submit
</button>
<p id="error">
</p>
<script >
//try{
//sum(3,4);
//}
//catch(err){
//document.getElementById("error").innerHTML =
err.message;
//}
function check(){
var password =
document.getElementById("password").value;
var password2 =
document.getElementById("password2").value;
var errorMessage =
document.getElementById("error");
var errorTOThrow = "";

try{
if(password.length<6){
errorTOThrow += "<br /> Password too short.";
}
if(/[A-Z]/g.test(password) == false){
errorTOThrow += "<br /> Password should
include at least one capital letter.";
}
if(/\d/g.test(password) == false){
errorTOThrow += "<br /> Password should
include at least one digit.";
}
if(password != password2){
errorTOThrow += "<br /> Passwords should
match.";
}
throw errorTOThrow;
}
catch(err){
errorMessage.innerHTML = err;
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
setInterval and setTimeout
</title>
</head>
<body>
<p id="counter">
0
</p>
<button onclick="clearInterval(myCounter)">
Stop counting.
</button>
<br />
<button onclick="clearTimeout(delayedWelcomeMessage)">
Avoid Welcome Message
</button>
<script >
var counter = document.getElementById("counter");
var x = 0;
var myCounter = setInterval(function(){
x++;
counter.innerHTML = x},1000);

var delayedWelcomeMessage = setTimeout(function(){


window.alert("Welcome to our page")},3000);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
window and screen
</title>
<style>
#div1{
background-color: #dbee5c;
}
#div2{
background-color: #6dbf8c;
}
#div3{
background-color: #4a80ed;
}
#div4{
background-color: #d9a962;
}
.equalBox{

float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="div1" class="equalBox">
Div1
</div>
<div id="div2" class="equalBox">
Div2
</div>
<div id="div3" class="equalBox">
Div3
</div>
<div id="div4" class="equalBox">
Div4
</div>
<script >
var windowHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
//window.alert(windowHeight);
var screenWidth = window.screen.width;
//window.alert(screenWidth);
var availableScreenHeight =
window.screen.availHeight;
//window.alert(availableScreenHeight);
for(i=1; i<5; i++){
document.getElementById("div" + i).style.width =
window.innerWidth/4-10 + 'px';
document.getElementById("div" + i).style.height =
window.innerHeight-10 + 'px';
}

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Alert boxes
</title>
</head>
<body>
<p id="myParagraph">
Javascript.
</p>
<script >
//window.alert("Welcome to our page!");
var acceptCookies = window.confirm("Please confirm
you accept cookies");
if(acceptCookies == true){
window.alert("You confirmed you accept cookies.");
}
else{
window.alert("You do not accept cookies.");
}

var visitor = prompt("Please enter your name.");


window.alert("Hi " + visitor.toUpperCase() + ", we
wish you a nice exprerience on our page! Don't forget to
like us on Facebook!");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
cookies
</title>
</head>
<body>
<p id="myParagraph">
Javascript.
</p>
<script >
window.alert(document.cookie);
</script>
</body>
</html>

You might also like