Scribd
Upload
16K views11 pages

Javascript Lesson 1

Here is the JavaScript code to create a div element with an image when a button is clicked: <button id="creator">Create Div</button> <script> document.getElementById("creator").addEventListener("click", function(){ var div = document.createElement("div"); var img = document.createElement("img"); img.src = "image.jpg"; div.appendChild(img); document.body.appendChild(div); }); </script> This code listens for a click on the button, then creates a div and image element, sets the source of the image, adds the image to the div, and finally appends the div to the body.

Uploaded by

Alistair Frame
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
16K views11 pages

Javascript Lesson 1

Here is the JavaScript code to create a div element with an image when a button is clicked: <button id="creator">Create Div</button> <script> document.getElementById("creator").addEventListener("click", function(){ var div = document.createElement("div"); var img = document.createElement("img"); img.src = "image.jpg"; div.appendChild(img); document.body.appendChild(div); }); </script> This code listens for a click on the button, then creates a div and image element, sets the source of the image, adds the image to the div, and finally appends the div to the body.

Uploaded by

Alistair Frame
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/ 11

JavaScript

Lesson 1
What Is JavaScript?

• JavaScript is a Scripting Language


• JavaScript is programming code that can be
inserted into HTML pages.
• All modern HTML pages are using JavaScript.
• JavaScript code can be executed by all modern
web browsers.
JavaScript in <head> or <body>

JavaScripts can be put in the <body> and in the <head> section of an


HTML page.
<script>
alert("My First JavaScript");
</script>

Scripts can also be placed in external files.

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
Manage Html with JavaScript

JavaScript is typically used to manipulate HTML elements.

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
document.write("<p>THIS IS NEW PARAGRAPH</p>");
</script>
</body>
</html>
JavaScript Comments

JavaScript comments can be used to make the code more readable.

<!DOCTYPE html>
<html>
<body>
<h1 id="page_title"></h1>
<p>Single line comments start with //.</p>
<script>
// Write to a heading:
document.getElementById("page_title").innerHTML="Welcome";
</script>
</body>
</html>
JavaScript Variables

• JavaScript variables are "containers" for storing information:


• Variable names must begin with a letter
• Variable names are case sensitive (x and X are different variables)
<script> <script>
var x=5; var subject= "Javascript";
var y=6; document.getElementById("demo").innerHTML= subject;
var z=x+y; </script>
alert(z); <p id= "demo" > It will be changed</p>
</script>

<script>
var z= "CSS";
z= "Javascript ";
alert(z);
</script>
JavaScript Data Types

String, Number, Boolean, Array, Object, Null, Undefined.

<script> <script>
//String example //Number example
var x= "optimum" ; var x=75;
</script> </script>

<script> <script>
//Boolean example //Array example
var x= true; var x=new Array("Html", "Css", "Script");
var y= false ; var y=["Html", "Css", "Script“];
</script> var z=new Array();
z[0]="Html";
z[1]="Css";
z[2]="Script";
</script>
JavaScript Data Types

String, Number, Boolean, Array, Object, Null, Undefined.

<script>
<script> //Null example
//Object example var x=null;
var person={name:"John", lastname:"Lennon", </script>
id:5566};
//Get object properties  <script>
name=person.name; //Undefined example
name=person["name"]; var x;
</script> </script>
JavaScript Function Syntax

A function is a block of code that will be executed when "someone" calls it.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript Functions

<script> <script>
function simple(x) function sum(x,y)
{ {
alert(x); z=x+y;
} alert(z);
simple("Optimum.am!"); }
sum (5,6);
</script> </script>

<script>
function sum(x,y)
{
z=x+y;
return z;
}
var result= sum(5,6);
alert(result);
</script>
Task 1:

Ստեղծել կոճակ creator անունով, որի


վրա սեղմելիս էջում ստեղծվի div
էլեմենտ և իր մեջ պարունակի նկար:

You might also like