JavaScript - 2018 Part 1
Create a folder js
Inside js create two folders: model and service
Also inside js create index.html
write following program.
save it.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
alert("hello world javascript");
for (var i = 1; i <=10; i++) {
document.write("Hello " + i + "<br/>");
}
</script>
</body>
</html>
open index.html
Output:
Hello 1
Hello 2
Hello 3
Hello 4
Hello 5
Hello 6
Hello 7
Hello 8
Hello 9
Hello 10
---------------------------------------------------
If you write this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
</script>
</body>
</html>
The output will be a green box:
box.style.background="red";
This will change background to red.
The following code will change background color every 3 seconds.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var box = document.getElementById('box');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
setInterval(function(){
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},3000);
</script>
</body>
</html>
The following code will show strings under the box:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<div id="quote"></div>
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var quotes=["hi","Hello", "Hey", "Dear","Howdy","Darling"];
function getObj(key){
return document.getElementById(key);
}
var box = getObj('box');
var quote = getObj('quote');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
setInterval(function(){
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},1000);
var j = 0;
setInterval(function(){
quote.innerHTML=quotes[j];
j++;
if(j==quotes.length){
j=0;
}
},1000);
</script>
</body>
</html>
To get Time:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<div id="quote"></div>
<input type="text" id="clock" />
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var quotes=["hi","Hello", "Hey", "Dear","Howdy","Darling"];
function getObj(key){
return document.getElementById(key);
}
var box = getObj('box');
var quote = getObj('quote');
var clock = getObj('clock');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
setInterval(function(){
var date = new Date();
clock.value=date.getHours() + ":" + date.getMinutes()+":"+date.getSeconds();
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},1000);
var j = 0;
setInterval(function(){
quote.innerHTML=quotes[j];
j++;
if(j==quotes.length){
j=0;
}
},1000);
</script>
</body>
</html>
Output:
20:7:9
if you want to stop time at particular time with a button. for eg; there is a button and you want to stop the time with that stop button then:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<div id="quote"></div>
<input type="text" id="clock" />
<input type="button" id="stop" value="Stop" />
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var quotes=["hi","Hello", "Hey", "Dear","Howdy","Darling"];
function getObj(key){
return document.getElementById(key);
}
var box = getObj('box');
var quote = getObj('quote');
var clock = getObj('clock');
var stop = getObj('stop');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
var interval = setInterval(function(){
var date = new Date();
clock.value=date.getHours() + ":" + date.getMinutes()+":"+date.getSeconds();
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},1000);
var j = 0;
setInterval(function(){
quote.innerHTML=quotes[j];
j++;
if(j==quotes.length){
j=0;
}
},1000);
stop.onclick = function(){
clearInterval(interval);
};
</script>
</body>
</html>
--------------------------------
Another program:
two folders model and service inside js folder
inside model: create student.model.js
function Student(){
this.firstName="";
this.lastName="";
this.email="";
}
in js folder create app.html
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
</head>
<body>
<script>
var student = new Student();
console.log(student);
</script>
</body>
</html>
now if you open app.html in browser and inspect the console you will see
Object { firstName: "", lastName: "", email: "" }
Now update app.html:
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
</head>
<body>
<script>
var student = new Student();
student.firstName="Mandip";
student.lastName="Shrestha";
student.email="mandip@gmail.com";
console.log(student);
</script>
</body>
</html>
Output will be:
Object { firstName: "Mandip", lastName: "Shrestha", email: "mandip@gmail.com" }
Now if you want to take input from user, change app.html:
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
</head>
<body>
<h1>Student Management System</h1>
<form>
<div>First Name:<input type="text" id="fname" name="first_name" /></div>
<div>Last Name:<input type="text" id="lname" name="last_name" /></div>
<div>Email:<input type="text" id="email" name="email" /></div>
<button type="submit" id="save-student">Save</button>
</form>
<script>
function getOBJ(key){
return document.getElementById(key);
}
window.onload=function(){
var fname=getOBJ("fname");
var lname=getOBJ("lname");
var email=getOBJ("email");
var saveButton=getOBJ("save-student");
saveButton.onclick=function(){
var student = new Student();
student.firstName=fname.value;
student.lastName=lname.value;
student.email=email.value;
console.log(student);
};
};
</script>
</body>
</html>
Now create a service in service folder:
student.service.js
update (add) src in app.html
<script src="service/student.service.js"></script>
inside student.service.js
function StudentService(){
this.studentList=[];
this.add=function(student){
this.studentList.push(student);
}
this.getAll=function(){
return this.studentList;
}
}
this is for adding and showing student list.
update app.html
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
<script src="service/student.service.js"></script>
</head>
<body>
<h1>Student Management System</h1>
<form>
<div>First Name:<input type="text" id="fname" name="first_name" /></div>
<div>Last Name:<input type="text" id="lname" name="last_name" /></div>
<div>Email:<input type="text" id="email" name="email" /></div>
<button type="submit" id="save-student">Save</button>
<a href="javascript:void(0)" id="show-students">Show Students</a>
</form>
<div id="student-list"></div>
<script>
function getOBJ(key){
return document.getElementById(key);
}
var studentService = new StudentService();
window.onload=function(){
var fname=getOBJ("fname");
var lname=getOBJ("lname");
var email=getOBJ("email");
var saveButton=getOBJ("save-student");
var showLink=getOBJ("show-students");
var showStudentList=getOBJ("student-list");
saveButton.onclick=function(){
var student = new Student();
student.firstName=fname.value;
student.lastName=lname.value;
student.email=email.value;
studentService.add(student);
return false;
};
showLink.onclick=function(){
studentList = studentService.getAll();
var content="";
for (var i = 0; i<studentList.length; i++) {
var student = studentList[i];
content+="<li>" + student.firstName + " " + student.lastName + "</li>"
};
showStudentList.innerHTML=content;
};
};
</script>
</body>
</html>
this will show all the added firstname and lastname.
hjhsd gd
hjhsd gd
1 2
1wre fdsfs
Inside js create two folders: model and service
Also inside js create index.html
write following program.
save it.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
alert("hello world javascript");
for (var i = 1; i <=10; i++) {
document.write("Hello " + i + "<br/>");
}
</script>
</body>
</html>
open index.html
Output:
Hello 1
Hello 2
Hello 3
Hello 4
Hello 5
Hello 6
Hello 7
Hello 8
Hello 9
Hello 10
---------------------------------------------------
If you write this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
</script>
</body>
</html>
The output will be a green box:
box.style.background="red";
This will change background to red.
The following code will change background color every 3 seconds.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var box = document.getElementById('box');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
setInterval(function(){
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},3000);
</script>
</body>
</html>
The following code will show strings under the box:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<div id="quote"></div>
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var quotes=["hi","Hello", "Hey", "Dear","Howdy","Darling"];
function getObj(key){
return document.getElementById(key);
}
var box = getObj('box');
var quote = getObj('quote');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
setInterval(function(){
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},1000);
var j = 0;
setInterval(function(){
quote.innerHTML=quotes[j];
j++;
if(j==quotes.length){
j=0;
}
},1000);
</script>
</body>
</html>
To get Time:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<div id="quote"></div>
<input type="text" id="clock" />
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var quotes=["hi","Hello", "Hey", "Dear","Howdy","Darling"];
function getObj(key){
return document.getElementById(key);
}
var box = getObj('box');
var quote = getObj('quote');
var clock = getObj('clock');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
setInterval(function(){
var date = new Date();
clock.value=date.getHours() + ":" + date.getMinutes()+":"+date.getSeconds();
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},1000);
var j = 0;
setInterval(function(){
quote.innerHTML=quotes[j];
j++;
if(j==quotes.length){
j=0;
}
},1000);
</script>
</body>
</html>
Output:
20:7:9
if you want to stop time at particular time with a button. for eg; there is a button and you want to stop the time with that stop button then:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box"></div>
<div id="quote"></div>
<input type="text" id="clock" />
<input type="button" id="stop" value="Stop" />
<script>
var colors = ["red", "green", "yellow", "blue", "black"];
var quotes=["hi","Hello", "Hey", "Dear","Howdy","Darling"];
function getObj(key){
return document.getElementById(key);
}
var box = getObj('box');
var quote = getObj('quote');
var clock = getObj('clock');
var stop = getObj('stop');
box.style.height="300px";
box.style.width="300px";
box.style.border="1px solid green";
var i = 0;
var interval = setInterval(function(){
var date = new Date();
clock.value=date.getHours() + ":" + date.getMinutes()+":"+date.getSeconds();
box.style.background=colors[i];
i++;
if(i==colors.length){
i=0;
}
},1000);
var j = 0;
setInterval(function(){
quote.innerHTML=quotes[j];
j++;
if(j==quotes.length){
j=0;
}
},1000);
stop.onclick = function(){
clearInterval(interval);
};
</script>
</body>
</html>
--------------------------------
Another program:
two folders model and service inside js folder
inside model: create student.model.js
function Student(){
this.firstName="";
this.lastName="";
this.email="";
}
in js folder create app.html
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
</head>
<body>
<script>
var student = new Student();
console.log(student);
</script>
</body>
</html>
now if you open app.html in browser and inspect the console you will see
Object { firstName: "", lastName: "", email: "" }
Now update app.html:
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
</head>
<body>
<script>
var student = new Student();
student.firstName="Mandip";
student.lastName="Shrestha";
student.email="mandip@gmail.com";
console.log(student);
</script>
</body>
</html>
Output will be:
Object { firstName: "Mandip", lastName: "Shrestha", email: "mandip@gmail.com" }
Now if you want to take input from user, change app.html:
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
</head>
<body>
<h1>Student Management System</h1>
<form>
<div>First Name:<input type="text" id="fname" name="first_name" /></div>
<div>Last Name:<input type="text" id="lname" name="last_name" /></div>
<div>Email:<input type="text" id="email" name="email" /></div>
<button type="submit" id="save-student">Save</button>
</form>
<script>
function getOBJ(key){
return document.getElementById(key);
}
window.onload=function(){
var fname=getOBJ("fname");
var lname=getOBJ("lname");
var email=getOBJ("email");
var saveButton=getOBJ("save-student");
saveButton.onclick=function(){
var student = new Student();
student.firstName=fname.value;
student.lastName=lname.value;
student.email=email.value;
console.log(student);
};
};
</script>
</body>
</html>
Now create a service in service folder:
student.service.js
update (add) src in app.html
<script src="service/student.service.js"></script>
inside student.service.js
function StudentService(){
this.studentList=[];
this.add=function(student){
this.studentList.push(student);
}
this.getAll=function(){
return this.studentList;
}
}
this is for adding and showing student list.
update app.html
<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="model/student.model.js"></script>
<script src="service/student.service.js"></script>
</head>
<body>
<h1>Student Management System</h1>
<form>
<div>First Name:<input type="text" id="fname" name="first_name" /></div>
<div>Last Name:<input type="text" id="lname" name="last_name" /></div>
<div>Email:<input type="text" id="email" name="email" /></div>
<button type="submit" id="save-student">Save</button>
<a href="javascript:void(0)" id="show-students">Show Students</a>
</form>
<div id="student-list"></div>
<script>
function getOBJ(key){
return document.getElementById(key);
}
var studentService = new StudentService();
window.onload=function(){
var fname=getOBJ("fname");
var lname=getOBJ("lname");
var email=getOBJ("email");
var saveButton=getOBJ("save-student");
var showLink=getOBJ("show-students");
var showStudentList=getOBJ("student-list");
saveButton.onclick=function(){
var student = new Student();
student.firstName=fname.value;
student.lastName=lname.value;
student.email=email.value;
studentService.add(student);
return false;
};
showLink.onclick=function(){
studentList = studentService.getAll();
var content="";
for (var i = 0; i<studentList.length; i++) {
var student = studentList[i];
content+="<li>" + student.firstName + " " + student.lastName + "</li>"
};
showStudentList.innerHTML=content;
};
};
</script>
</body>
</html>
this will show all the added firstname and lastname.
Comments
Post a Comment