Scribd
Upload
5 views24 pages

Internet Based Programming: Frontend Web Development

The document provides an introduction to JavaScript as a core technology for frontend web development, detailing its capabilities, advantages, and disadvantages. It explains how JavaScript can manipulate HTML content, attributes, styles, and elements, as well as where to place JavaScript code within HTML documents. Additionally, it covers JavaScript syntax and output methods, emphasizing its ease of use and compatibility with modern web browsers.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views24 pages

Internet Based Programming: Frontend Web Development

The document provides an introduction to JavaScript as a core technology for frontend web development, detailing its capabilities, advantages, and disadvantages. It explains how JavaScript can manipulate HTML content, attributes, styles, and elements, as well as where to place JavaScript code within HTML documents. Additionally, it covers JavaScript syntax and output methods, emphasizing its ease of use and compatibility with modern web browsers.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

04/20/2025

Internet Based Programming


Frontend web development: JS (introduction, JS position, JS output, syntax,
JS comments, variables, data types, template literals (template strings))

Asst. Prof. Dr. İnan KAZANCI


[email protected]

Frontend web development- JS: Introduction


• JavaScript is a high-level programming language that all modern web browsers support. It is also one
of the core technologies of the web, along with HTML and CSS that you have learned previously.
• JavaScript provides us to embed our programming logic into HTML code to make a web page more
integrative and responsive. The JavaScript code that we embed in HTML document is called a script.
• JavaScript is an object-based scripting language:
 JavaScript is considered to be object-based because it’s used to work with the objects associated
with a web page document: the browser window, the document itself, and elements such as forms,
images, and links.
 Because JavaScript is interpreted by a browser, it is considered to be a client-side scripting
language.
A language in which series of commands are executed without being compiled known as scripting
language.

04/20/2025 2

1
04/20/2025

Frontend web development- JS: Introduction


• Some examples of what JavaScript can do: JavaScript Can Change HTML Content:

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML =
"Hello JavaScript!"'>Click Me!</button>
</body>
</html>

 getElementById(): is one of many JavaScript HTML methods.

04/20/2025 3

Frontend web development- JS: Introduction


• Some examples of what JavaScript can do: JavaScript Can Change HTML Attribute Values:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute
values.</p>
<button
onclick="document.getElementById('myImage').src='P
ics/pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="Pics/pic_bulboff.gif"
style="width:100px">
<button
onclick="document.getElementById('myImage').src='P
ics/pic_bulboff.gif'">Turn off the light</button>
</body>
</html>

04/20/2025 4

2
04/20/2025

Frontend web development- JS: Introduction


• Some examples of what JavaScript can do: JavaScript Can Change HTML Styles (CSS):

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change
the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('demo'
).style.fontSize='35px'">Click
Me!</button>
</body>
</html>

04/20/2025 5

Frontend web development- JS: Introduction


• Some examples of what JavaScript can do: JavaScript Can Hide HTML Elements:

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button"
onclick="document.getElementById('demo').style.display='none'">
Click Me!</button>
</body>
</html>

04/20/2025 6

3
04/20/2025

Frontend web development- JS: Introduction


• Some examples of what JavaScript can do: JavaScript Can Hide HTML Elements:

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo" style="display:none">Hello
JavaScript!</p>
<button type="button"
onclick="document.getElementById('demo').style.
display='block'">Click Me!</button>
</body>
</html>

04/20/2025 7

Frontend web development- JS: Advantages


• Some of the advantages of JavaScript are:
 Saves time and bandwidth: JavaScript is executed on the client side to save bandwidth and
avoid load on the web server.
 Compatible for all browsers: The biggest advantage of JavaScript having the ability to support
all modern browsers and produce an equivalent result.
 Easy to use: JavaScript is relatively easy to learn and comprises of syntax that is close to C/C++
and Java.
 Huge libraries/frameworks: It provides plenty of prewritten functionality.
 Interoperability: Because JavaScript seamlessly integrates with other programming languages,
many developers favor using it to create a variety of applications.

04/20/2025 8

4
04/20/2025

Frontend web development- JS: Disadvantages


• Some of the disadvantages of JavaScript are:
 Less Secure: Has some security problem as the code execute on the users’ computer, and
exploited for some malicious activities.
 No Multiple Inheritance: JavaScript does not support multiple inheritance; only one
inheritance is supported. This property of object-oriented languages might be necessary for
some programmers.
 Cannot Debug: Although some HTML editors allow for debugging, they are not as effective as
editors for C or C++. Additionally, the developer has a difficult time figuring out the issue
because the browser doesn't display any errors.
 Disabling JavaScript can hinder a web page: People tend to disable JavaScript on the website,
considering its vulnerabilities. But, this prevents many sites like Google Maps from loading.

04/20/2025 9

Frontend web development- JS: Where to put JavaScript Code?

• JavaScript can be written as:


Inline JavaScript: Right inside an HTML tag using attributes like onclick.
Internal JavaScript: Placed on head or body section of a document.
External JavaScript: It can also be in a separate .js file.
• JavaScript Events and Functions:
 Events basically happen as a result of a user action (e.g. clicking a
button, pressing a key etc.) or an external action such as loading a We will learn
page. HTML provides a way to bind a script to an event. That is, the much more
script will execute in response to that event for example onclick. about
functions and
 Function is a block of JavaScript code, that can be executed when events later
"called" for. For example, a function can be called when
an event occurs, like when the user clicks a button.
04/20/2025 10

5
04/20/2025

Frontend web development- JS: Where to put JavaScript Code?

• JavaScript in Body Section: we can write JavaScript code anywhere in the body section.
 In HTML, JavaScript code is inserted between <script> and </script> tags.
 A document can have one or more scripts depending on what and when we want to do something
through JavaScript.
 If a JavaScript is not bound to any event, it will always execute when we load the page.
 The script that is bound to an event executes only when the specified event happens.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<script>
document.write("My First JavaScript");
</script>
</body>
</html>

04/20/2025 11

Frontend web development- JS: Where to put JavaScript Code?

• JavaScript in Body Section: we can write JavaScript code anywhere in the body section.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>

04/20/2025 12

6
04/20/2025

Frontend web development- JS: Where to put JavaScript Code?

• JavaScript in Head Section: a special place for the <script> element is within the head section
of a document.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

04/20/2025 13

Frontend web development- JS: Where to put JavaScript Code?

• JavaScript in <head> or <body>


Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both.
Because of the sequential nature of the web documents, the <head> is always
executed first. However, we want to execute the script somewhere in the body of the
document. Therefore, script written in the head section is generally used to declare
variable or functions that may be used later on in the document.

04/20/2025 14

7
04/20/2025

Frontend web development- JS: Where to put JavaScript Code?

• Notes:
You can place any number of scripts in an HTML document.
You have to nocte the sequence of operations, for example if you write a script to
change the content of an element before creating of that element the script will not
work.
Placing scripts at the bottom of the <body> element improves the display speed,
because script interpretation slows down the display.

04/20/2025 15

Frontend web development- JS: Where to put JavaScript Code?


<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
<p id="demo">Paragraph not changed.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">Paragraph not changed.</p>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
</body>
</html>

04/20/2025 16

8
04/20/2025

Frontend web development- JS: Where to put JavaScript Code?

• External JavaScript: the code is saved in a separate file (e.g., myScript.js) which is then linked to
an HTML document using src attribute of <script> tag.
anHTMLDocument.html
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
</body>
</html>

myScript.js
function myFunction() { External scripts cannot
document.getElementById("demo").innerHTML = "Paragraph changed.";
contain <script> tags.
}

04/20/2025 17

Frontend web development- JS: Where to put JavaScript Code?

• External JavaScript: you can place an external script reference in <head> or <body> as you like.
anHTMLDocument.html
<!DOCTYPE html>
<html>
<head>
<script src = "myScript.js"></script>
</head>
<body>
<h2>Demo External JavaScript</h2>
<script>
document.write("Script demo");
</script>
<button type="button" onclick="msg();">click</button>
</body>
</html>

myScript.js
function msg() { alert('You clicked on the button');}

04/20/2025 18

9
04/20/2025

Frontend web development- JS: JavaScript Output


• JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().

04/20/2025 19

Frontend web development- JS: JavaScript Output


• innerHTML: to access an HTML element, JavaScript can use the document.
getElementById(id) method. The id attribute defines the HTML element. The innerHTML property
defines the HTML content.

<!DOCTYPE html>
<html>
<body>
<h2>innerHTML:</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

04/20/2025 20

10
04/20/2025

Frontend web development- JS: JavaScript Output


• document.write(): for testing purposes, it is convenient to use document.write():
<!DOCTYPE html>
<html>
<body>
<h2>document.write():</h2>
<script>
document.write(5 + 6);
</script>
</body> Note: Using document.write() after an HTML document is
</html> loaded, will delete all existing HTML:
<!DOCTYPE html>
<html>
<body>
<h2>document.write():</h2>
<p>this is a paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>

04/20/2025 21

Frontend web development- JS: JavaScript Output


• window.alert(): you can use an alert box to display data:
<!DOCTYPE html>
<html>
<body>
<h2>window.alert():</h2>
<button type="button" onclick= 'window.alert(5 + 6)'>Click Me!</button>
</body>
</html>

04/20/2025 22

11
04/20/2025

Frontend web development- JS: JavaScript Output


• console.log(): for debugging purposes, you can call the console.log() method in the browser to
display data.
<!DOCTYPE html>
<html>
<body>
<h2>console.log():</h2>
<p>F12 on your keyboard will activate Inspect</p>
<p>Then select "Console" </p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

04/20/2025 23

Frontend web development- JS: JavaScript syntax


• JavaScript syntax is the set of rules, how JavaScript programs are constructed.
• It is important to keep the following important points about JavaScript in your mind:
 Java script is case-sensitive. For JavaScript, this, This and THIS are three distinct identifiers.
 JavaScript code found in HTML document is interpreted line by line and it is read from top to bottom.
 Any use of excessive whitespace characters (e.g. spaces, tabs, line breaks) are ignored by JavaScript. For
example:
x=5; is equivalent to x = 5;
 A semicolon (;) indicates end of a statement. This allows us to write on or more statement on the same
line separated by ‘;’.
x = 5; y = 4;
Is same as
x = 5;
y = 4;

04/20/2025 24

12
04/20/2025

Frontend web development- JS: JavaScript Comments


• JavaScript comments can be used to explain JavaScript code, and to make it more readable.
• JavaScript comments can also be used to prevent execution, when testing alternative code.
• There are two comments types in JavaScript:
 Single Line Comments: start with //. Any text between // and the end of the line will be ignored
by JavaScript (will not be executed).
 Multi-line Comments: multi-line comments start with /* and end with */.

04/20/2025 25

Frontend web development- JS: JavaScript Variables


• Variables are containers used to label and store data in memory that can be used throughout your program.
• JavaScript variables can be declared by using: let, const or var.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>

04/20/2025 26

13
04/20/2025

Frontend web development- JS: JavaScript Variables


• When to Use var, let, or const?
 It is considered good programming practice to always declare variables before use.
 Always use const if the value should not be changed.
 Only use let if you can't use const.
 Only use var if you MUST support old browsers.
• JavaScript Identifiers: all JavaScript variables must be identified with unique names. The general rules for
constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.
 Names must begin with a letter.
 Names can also begin with $ and _ (but it is rarely used).
 Names are case sensitive (y and Y are different variables).
 Reserved words (e.g., let, var …) cannot be used as names.

04/20/2025 27

Frontend web development- JS: JavaScript Variables


• Note:
 It's a good programming practice to declare all variables at the beginning of a script.
 You can declare many variables in one statement by using by comma:
 If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo2"></p>
<script>
let x = "5" + 2 + 3;
let y = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
</script>
</body>
</html>

04/20/2025 28

14
04/20/2025

Frontend web development- JS: JavaScript Variables


• Note:
 It's a good programming practice to declare all variables at the beginning of a script.
 You can declare many variables in one statement by using by comma:
 If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo2"></p>
<script>
let x = "5" + 2 + 3;
let y = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
</script>
</body>
</html>

04/20/2025 29

Frontend web development- JS: JavaScript Data Types


• A JavaScript variable can hold any type of data. The basic datatypes in JavaScript are:
 String  Boolean  Object
 Number  Undefined
 Bigint  Null

• Examples:
// Numbers: // Object:
let length = 16; const person = { firstName: “Inan", lastName: “Kazanci" };
let weight = 7.5;
// Array object:
// Strings: const cars = ["Audi", "Volvo", "BMW"];
let color = "Yellow";
let lastName = “Kazanci"; // Date object:
const date = new Date("2022-03-25");
// Booleans
let x = true;
let y = false;

04/20/2025 30

15
04/20/2025

Frontend web development- JS: JavaScript Data Types


• JavaScript types are dynamic this means that the same variable can be used to hold different data types.
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String

• You can use single or double quotes with strings. Also, You can use quotes inside a string, as long as they don't
match the quotes surrounding the string.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let x = "String:";
let y = "University 'BANU'";
let z = 'University "BANU"';
document.getElementById("demo").innerHTML = x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>

04/20/2025 31

Frontend web development- JS: JavaScript Data Types


• All JavaScript numbers are stored as decimal numbers (floating point).
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p id="demo"></p>
<script>
let x1 = 34.00;
let x2 = 34;
let x3 = 3.14;
document.getElementById("demo").innerHTML = x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>

• If we want to write 34.00 then we can use x1.toFixed(2)

04/20/2025 32

16
04/20/2025

Frontend web development- JS: JavaScript Data Types


• JavaScript numbers are always double (stored in a 64-bit floating-point format containing both positives,
negatives and 0).
• JavaScript BigInt datatype is used to store big values that are too big to be represented by a normal
JavaScript Number.

• JavaScript Booleans: can only have two values: true or false


• JavaScript arrays: are written with square brackets.
• Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
<body>
<h2>JavaScript Arrays</h2>
<p id = "demo"></p>
<script>
const cars = ["Audi", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>

04/20/2025 33

Frontend web development- JS: JavaScript Data Types


• JavaScript Objects: an object is a collection of variables and related methods.
• objects are written with curly braces {}.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>

04/20/2025 34

17
04/20/2025

Frontend web development- JS: JavaScript Data Types


• The typeof Operator: returns the type of a variable or an expression
<!DOCTYPE html>
<html>
<body>
<h2>The typeof Operator:</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof ["BANU", "University"] + "<br>" +
typeof "" + "<br>" +
typeof "BANU" + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>
</body>
</html>

04/20/2025 35

Frontend web development- JS: JavaScript Data Types


• Undefined: a variable without a value, has the value undefined. The type is
also undefined.
• When a variable is declared but not initialized, or when a function does not return a
value, the variable or the function’s result is undefined.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>
</body>
</html>

04/20/2025 36

18
04/20/2025

Frontend web development- JS: JavaScript Data Types


• Null: null represents the intentional absence of any value.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let car = null;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>
</body>
</html>

04/20/2025 37

Frontend web development- JS: JavaScript Data Types


• Empty values: is used for initialization purposes.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let car = "";
let num = 0;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car +
"<br>" + num + typeof num;
</script>
</body>
</html>

04/20/2025 38

19
04/20/2025

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Normal string concatenations:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let a = "We Love";
let b = "JavaScript";
let c = "And";
let d = "Programming";
document.getElementById("demo").innerHTML = (a + " " + b + " " + c + " " + d);
</script>
</body>
</html>

04/20/2025 39

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Template Strings (Template Literals): back-Tics Syntax (`)
 Template Strings use back-ticks (``) rather than the quotes ("") to define a string.
 We use the ${} syntax inside the template literal to include the value of the variable within the
string.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let a = "We Love";
let b = "JavaScript";
let c = "And";
let d = "Programming";
document.getElementById("demo").innerHTML = (`${a} ${b} ${c} ${d}`);
</script>
</body>
</html>

04/20/2025 40

20
04/20/2025

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Template Strings (Template Literals): Quotes Inside Strings
 Template Strings allow both single and double quotes inside a string

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let a = "We Love";
let b = "JavaScript";
let c = "And";
let d = "Programming";
document.getElementById("demo").innerHTML = (`${a} "${b} ${c}' ${d}"`);
</script>
</body>
</html>

04/20/2025 41

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Template Strings (Template Literals): Quotes Inside Strings
 The same result but using string concatenations:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let a = "We Love";
let b = "JavaScript";
let c = "And";
let d = "Programming";
document.getElementById("demo").innerHTML = (a + " " + "\"" + b + " " + c + "\'" +
" " + d + "\"");
</script>
</body>
</html>

04/20/2025 42

21
04/20/2025

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Template Strings (Template Literals): Multiline Strings
 Template strings allow multiline strings.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let text =
`University: BANU,
Course: Internet Based Programming,
Class: 2'nd Class`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

04/20/2025 43

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Template Strings (Template Literals): Multiline Strings
 Using double quotes in multiline will cause an error.

04/20/2025 44

22
04/20/2025

Frontend web development- JS: JavaScript Template Strings (Template


Literals)
• Template Strings (Template Literals): Expression Substitution
 Allow expressions in strings:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let price = 10;
let VAT = 0.25;
let fName = "BA";
let lName = "NU";
let total = `${fName}${lName}, Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>

04/20/2025 45

Frontend web development- JS: JavaScript Strings Vs. Template Literals

• Template Literals: HTML Templates


<!DOCTYPE html>
<html>

<body>
<p id="demo"></p>
<script>
let title = "BANU:";
let desc = "Bandirma Onyedi Eylul University";
let markup =
`<div class="card">
<div class="child">
<h2>${title}</h2>
<p>${desc}</p>
</div>
</div>`;
document.write(markup);
</script>
</body>
</html>

04/20/2025 46

23
04/20/2025

Frontend web development- JS: JavaScript Strings Vs. Template Literals

• Template Literals: without using Template Literals

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let title = "BANU:";
let desc = "Bandirma Onyedi Eylul University";
These are at let markup = "<div class=\"card\">\n<div
the same line class=\"child\">\n<h2>".concat(title,"</h2>\n<p>").concat(desc,"</p>\n</div>\n</div>");
document.write(markup);
</script>
</body>
</html>

04/20/2025 47

04/20/2025 48

24

You might also like