Scribd
Upload
15K views

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
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15K views

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
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