Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
105 views

Chapter 4-JavaScript

The document discusses JavaScript, including its uses, APIs, DOM, and syntax. JavaScript can access and manipulate HTML and CSS. The DOM represents HTML documents as objects that can be manipulated. JavaScript code can be embedded in HTML and used to modify HTML content, attributes, and styles.

Uploaded by

birhanualemayehu185
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
105 views

Chapter 4-JavaScript

The document discusses JavaScript, including its uses, APIs, DOM, and syntax. JavaScript can access and manipulate HTML and CSS. The DOM represents HTML documents as objects that can be manipulated. JavaScript code can be embedded in HTML and used to modify HTML content, attributes, and styles.

Uploaded by

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

JavaScript

Chapter - 4
Introduction
• As of 2022, 98% of websites use JavaScript on the client side for webpage
behavior, often incorporating third-party libraries.
• All major web browsers have a dedicated JavaScript engine to execute the code
on users' devices.
• JavaScript It is multi-paradigm, supporting event-driven, functional, and
imperative programming styles.
• It has application programming interfaces (APIs) for working with text, dates,
regular expressions, standard data structures, and the Document Object Model
(DOM).
• An application programming interface (API):
• is a way for two or more computer programs to communicate with each other.
• It is a type of software interface, offering a service to other pieces of software
• In contrast to a user interface, which connects a computer to a person, an application
programming interface connects computers or pieces of software to each other.
• The Document Object Model (DOM):
• is a programming interface for HTML(HyperText Markup Language) and XML(Extensible
markup language) documents.
• With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or
Elements of HTML using commands or methods provided by the Document object.
• Using DOM, the JavaScript gets access to HTML as well as CSS of the web page and can
also add behavior to the HTML elements.
• so basically Document Object Model is an API that represents and interacts with HTML
or XML documents.
• Although Java and JavaScript are similar in name, syntax, and respective
standard libraries, the two languages are distinct and differ greatly in design.
• JavaScript and Java are completely different languages, both in concept and
design.
• JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in
1997.
• ECMA-262 is the official name of the standard. ECMAScript is the official name of the
language.
• JavaScript was initially created to “make web pages alive”.
• The programs in this language are called scripts.
• They can be written right in a web page’s HTML and run automatically as the page loads.
• Scripts are provided and executed as plain text.
• They don’t need special preparation or compilation to run.
• When JavaScript was created, it initially had another name: “LiveScript”.
• But Java was very popular at that time, so it was decided that positioning a new language
as a “younger brother” of Java would help.
• But as it evolved, JavaScript became a fully independent language with its own
specification called ECMAScript, and now it has no relation to Java at all.
• ECMAScript is a JavaScript standard intended to ensure the interoperability of web pages across
different browsers.
• It is standardized by Ecma International in the document ECMA-262.
• Ecma International is a nonprofit standards organization for information and communication systems.
• It acquired its current name in 1994, when the European Computer Manufacturers Association
(ECMA) changed its name to reflect the organization's global reach and activities.
• As a consequence, the name is no longer considered an acronym and no longer uses full capitalization.
Starting with JavaScript

• In HTML, JavaScript code is inserted between <script> and </script> tags.


• Old JavaScript examples may use a type attribute: <script type="text/javascript">.
• The type attribute is not required. JavaScript is the default scripting language in HTML.
• You can place any number of scripts in an HTML document.
• Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both.
• Placing scripts at the bottom of the <body> element improves the display speed,
because script interpretation slows down the display.
• Scripts can also be placed in external files.
• External scripts are practical when the same code is used in many different web pages.
• JavaScript files have the file extension .js.
• To use an external script, put the name of the script file in the src (source) attribute of
a <script> tag:
• <script src="myScript.js"></script>
• You can place an external script reference in <head> or <body> as you like.
• The script will behave as if it was located exactly where the <script> tag is located.
• External scripts cannot contain <script> tags.
• Placing scripts in external files has some advantages:
• It separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads
• To add several script files to one page - use several script tags.

• <script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Example 1 - JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML =
"Hello JavaScript!"'>Click Me!</button>
</body>
</html>
Example 2 - JavaScript Can Change HTML Attributes
<!DOCTYPE html>
<html>
<body>
<p>In this case JavaScript changes the value of the src (source) attribute of
an image.</p>
<button
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn
on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn
off the light</button>
</body>
</html>
Example 3 - 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>
Example 4 - 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>
T h eH T M L D O M T reo fO b jects
• The DOM is a W3C (World Wide Web Consortium) standard.
• The DOM defines a standard for accessing documents.
• The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs
and scripts to dynamically access and update the content, structure, and style of a document. The W3C DOM
standard is separated into 3 different parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents
• The HTML DOM can be accessed with JavaScript (and with other programming languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods of each object.
• A property is a value that you can get or set (like changing the content of an HTML element).
• A method is an action you can do (like add or deleting an HTML element).
• The innerHTML Property
• The easiest way to get the content of an element is by using the innerHTML property.
• The innerHTML property is useful for getting or replacing the content of HTML elements.
• The innerHTML property can be used to get or change any HTML element, including <html> and <body>.
• JavaScript HTML DOM Document
• The HTML DOM document object is the owner of all other objects in your web page.
• The document object represents your web page.
<!DOCTYPE html>
<html>
<body>
<p id="intro"></p>
<p id="demo"></p>
<p class="intro"></p>
<script>
document.getElementById("demo").innerHTML = "Paragraph by element";
const x = document.getElementsByClassName("intro");
x[0].innerHTML="Paragraph by class";
const y = document.getElementsByTagName("p");
y[0].innerHTML = "Paragraph by tag";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Abebe"><br>
Last name: <input type="text" name="lname" value="Tola"><br><br>
<input type="submit" value="Submit">
</form>
<p>These are the values of each element in the form:</p>
<p id="demo"></p>
<script>
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript Output
<html>
<head>
<title>Java</title>
</head>
<body>
<p id="demo"> </p>
<script>
document.getElementById("demo").innerHTML=5+6;
alert("I am alerting. You got this?");
console.log("Hi");
</script>
<button type="button" onclick="document.write('The write property');">Click here</button>
</body>
</html>
• JavaScript statements are composed of: Values, Operators, Expressions,
Keywords, and Comments.
• The statements are executed, one by one, in the same order as they are
written.
• Semicolons separate JavaScript statements.
• JavaScript ignores multiple spaces.
• JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.
• JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements
JavaScript Syntax

• JavaScript syntax is the set of rules, how JavaScript programs are constructed.
• The JavaScript syntax defines two types of values: Fixed values and Variable
values.
• Fixed values
• Fixed values are called Literals.
• The two most important syntax rules for fixed values are:
• Numbers that are written with or without decimals and Strings that are text, written within double or
single quotes.
• Variable values
• Variable values are called Variables.
• In a programming language, variables are used to store data values.
• JavaScript uses the keywords var, let and const to declare variables.
• An equal sign is used to assign values to variables.
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.
• In Single Line Comments, that start with //, Any text between // and the end of the line
will be ignored by JavaScript (will not be executed).
• Example
// Change heading
• Multi-line comments start with /* and end with */. Any text between /* and */ will be
ignored by JavaScript.
• Example
/* The code below will change the heading with id = "myH"
and the paragraph with id = "myP" in my web page: */
JavaScript Variables
• There are 4 Ways to Declare a JavaScript Variable: Using var, Using let, using const and using
nothing.
• The let and const keywords were added to JavaScript in 2015. If you want your code to run in older
browsers, you must use var.
• If you want a general rule: always declare variables with const.
• If you think the value of the variable can change, use let.
• Examples:

• var x = 5;
• let x = 5;
• const price1 = 5;
const price2 = 6;
let total = price1 + price2;

• All JavaScript variables must be identified with unique names. These unique names are called
identifiers.
• Identifiers are JavaScript names used to name variables,keywords, and functions.
• The rules for legal names are the same in most programming languages.
• A JavaScript name must begin with: A letter (A-Z or a-z) , A dollar sign ($) Or an underscore
(_)
• Subsequent characters may be letters, digits, underscores, or dollar signs.
• Numbers are not allowed as the first character in names.
• All JavaScript identifiers are case sensitive.
• Creating a variable in JavaScript is called "declaring" a variable.
• After the declaration, the variable has no value (technically it is undefined).
• To assign a value to the variable, use the equal sign.
• You can also assign a value to the variable when you declare it.
• You can declare many variables in one statement by separating the variables by
comma.
• If you re-declare a JavaScript variable declared with var, it will not lose its value.
But you cannot re-declare a variable declared with let or const.
• Variables declared inside a { } block cannot be accessed from outside the block.
<p id="demo"></p>
<p id="demo1"></p>
<script>
{ var x=5; // can be accessed outside this block. }
{ let x=2; // cannot be accessed outside this block. }
y=6; // y variable hoisted above the declaration
var y;
document.getElementById("demo").innerHTML="x="+x+" and "+"y="+y;
//**************************************************************
const z = 3;
z = 3.14;
z = z + 10;
document.getElementById("demo1").innerHTML=z;
//**************************************************************
</script>
JavaScript Operators
• There are different types of JavaScript operators:
• Arithmetic Operators
• Arithmetic Operators are used to perform arithmetic on numbers.
• Assignment Operators
• Assignment operators assign values to JavaScript variables.
• Comparison Operators
• Operator Description
• == equal to
• === equal value and equal type
• != not equal
• !== not equal value or not equal type
• > greater than
• < less than
• >= greater than or equal to
• <= less than or equal to
• ? ternary operator
• String Operators
• All the comparison operators above can also be used on strings alphabetically. The + can also be used to add (concatenate) strings. Adding
a number and a string will return a string.
• Logical Operators8
• Operator Description
• && logical and
• || logical or
• ! logical not
<p id="op"></p>
<p id="st"></p>
<script>
let x = 5, y=10;
let str1='Res', str2="ult=";
let female=10, male=30;
//total = female + male + " students";
total = "students=" + female + male; // evaluating expressions left to right
str3=str1+str2; //Concatenation
// z = x + y; //Arithmetic Operator
// z=x<=y; // Comparision operator
// z = (x<y ? x : y); // ternary operator
z= !((x<y) && (y>x)); //Logical operator
document.getElementById("op").innerHTML = str3+z;
document.getElementById("st").innerHTML = total;
</script>
• JavaScript arrays are written with square brackets.
• Array items are separated by commas.
• The following code declares (creates) an array called cars, containing three items (car
names):
const cars = ["Saab", "Volvo", "BMW"];
• Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
• JavaScript objects are written with curly braces {}.
• Object properties are written as name:value pairs, separated by commas.
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
• The object (person) in the example above has 4 properties: firstName, lastName, age, and
eyeColor.
• You can use the JavaScript typeof operator to find the type of a JavaScript variable.
• The typeof operator returns the type of a variable or an expression:
typeof "" // Returns "string“
typeof 314 // Returns "number"
<p id="dtype"></p>
<script>
const person = {firstName:"John", lastName:"Doe"};
document.getElementById("dtype").innerHTML=typeof person;
</script>
JavaScript Functions

• A JavaScript function is a block of code designed to perform a particular task.


• A JavaScript function is executed when "something" invokes it (calls it).
• A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
• Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
• The parentheses may include parameter names separated by commas: (parameter1,
parameter2, ...).
• The code to be executed, by the function, is placed inside curly brackets: {}.
• function name(parameter1, parameter2, parameter3…) {
// code to be executed
}
• Function parameters are listed inside the parentheses () in the function definition.
• Function arguments are the values received by the function when it is invoked.
• Inside the function, the arguments (the parameters) behave as local variables.
• The code inside the function will execute when "something" invokes (calls) the function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
<p id="func"></p>
<script>
x=add(4,5);
document.getElementById("func").innerHTML = x;
function add(a,b) { return a+b; }
</script>

 You can reuse code


 Variables declared within a JavaScript function, become LOCAL to the
function.
JavaScript Events

• HTML events are "things" that happen to HTML elements.


• When JavaScript is used in HTML pages, JavaScript can "react" on these events.
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• Often, when events happen, you may want to do something.
• JavaScript lets you execute code when events are detected.
• HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
Example: The following program displays date on mouse over.

html>
<head>
<title></title>
</head>
<body>
<button onmouseover="document.getElementById('dt').innerHTML =
Date();">The time is:</button>
<p id="dt"> </p>
</body>
</html>
JavaScript String Methods

<p id="str"></p>
<script>
let n="Software Engineering";
document.getElementById("str").innerHTML = n.slice(0,10); // end included but not the start
document.getElementById("str").innerHTML = n.slice(10);
document.getElementById("str").innerHTML = n.substring(0,10); //The difference is that start and end values
// less than 0 are treated as 0 in
substring()
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
document.getElementById("str").innerHTML = newText;
document.getElementById("str").innerHTML = newText.toUpperCase();
document.getElementById("str").innerHTML = newText.toLowerCase();
document.getElementById("str").innerHTML = "Hello".concat(" ","World");
document.getElementById("str").innerHTML = " Hellow ".trim();
document.getElementById("str").innerHTML = "5".padStart(4,"x");
document.getElementById("str").innerHTML = "software".charAt(3);
document.getElementById("str").innerHTML = "software".charCodeAt(3);
Conditional Statements

• Very often when you write code, you want to perform different actions for
different decisions.
• You can use conditional statements in your code to do this.
• Use if to specify a block of code to be executed, if a specified condition is true
• Syntax:
• if (condition) {
// block of code to be executed if the condition is true
}
<!DOCTYPE html>
<html>
<body>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
}
document.getElementById("demo").innerHTML = "Today is " + day;
JavaScript Loops

• The for statement creates a loop with 3 optional expressions:


for (expression 1; expression 2; expression 3) {
// code block to be executed
}
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
The JavaScript for in statement loops through the properties of an Object:
• The JavaScript for in statement loops through the properties of an Object
<p id="demo"></p>
<script>
const person = {fname:"John", lname:"Doe", age:25};
let txt = "";
for (let x in person)
{
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
The JavaScript for in statement can also loop over the properties of an Array:
<h2>JavaScript For In</h2>
<p>The for in statement can loops over array values:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
for (let x in numbers) {
console.log(numbers[x]);
}
</script>
</body>
</html>
• The forEach() method calls a function (a callback function) once for each
array element.
<!DOCTYPE html>
<html>
<body>
<script>
const numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(v) {
console.log(v);
}
</script>
</body>
</html>
The while loop statement is simpler than the for loop. It consists of a condition and block
statement. The condition is evaluated before each pass through the loop. If the condition
is true then it executes block statement.
<html>
<head>
<title>JS while</title>
</head>
<body>
<script>
let i=0;
while(i<6){
document.write(i);
document.write("</br>");
i++;
}
</script>
</body>
</html>
• The do...while loop is much like a while loop.
• It will repeat the loop until the specified condition is false.
• This loop will always be executed at least once, even if the condition is false,
because the block of statements is executed before the condition is tested.
• In this loop statement, curly braces are optional.
<script>
let i=0;
do{
document.write(i);
document.write("</br>");
i++;
} while(i<6);
</script>
• Break statement is used to exit from the innermost loop, switch statement, or
from the statement named by label.
• It terminates the current loop and transfers control to the statement following the
terminated loop.
• The continue statement skips the statement following it and executes the loop
with next iteration.
• It is used along with an if statement inside while, do-while, for, or label
statements.
• The continue statement does not terminate the loop. Instead, in a while loop, it
jumps back to the condition and in a for loop, it jumps to the update expression.
<html>
<head>
<title>JS break continue</title>
</head>
<body>
<script>
for(let i=0;i<=10;i++){
if(i==4)
//continue;
break;
document.write(i);
document.write("<br>");
}
</script>
</body>
</html>
JavaScript WITH statement

With statement saves a lot of typing when properties of same object have to be
accessed. For example, it is common to work with deeply nested object hierarchies.
Example:
<html>
<head>
<title>WITH statement </title>
</head>
<body>
<script>
with(document){
write("Writing using with");
}
</script>
</body>
</html>
JavaScript String Search

<p id="demo"></p>
<script>
let text = "Please LOCATE where 'Locate' occurs!";
let findex = text.indexOf("locate");
let lindex = text.lastIndexOf("locate");
let lindex2=text.lastIndexOf("locate",5);
let indexs=text.search("locate");
let indexs2=text.search(/locate/);
// g indicates all possible matches. i indicates case insensetive
const myArr = text.match(/oc/gi);
let swith = text.startsWith("Please");
let ewith = text.endsWith("occurs");
//document.getElementById("demo").innerHTML = lindex;
//document.getElementById("demo").innerHTML = lindex;
//document.getElementById("demo").innerHTML = indexs;
//document.getElementById("demo").innerHTML = indexs2;
//document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
//document.getElementById("demo").innerHTML = swith;
//document.getElementById("demo").innerHTML = ewith;
</script>
JavaScript Numbers

<p id="demo"></p>
<script>
let x = 123.123;
//document.getElementById("demo").innerHTML = x.toString();
//document.getElementById("demo").innerHTML = x.toExponential();
//document.getElementById("demo").innerHTML = x.toExponential();
//document.getElementById("demo").innerHTML = x.toExponential(4);
//document.getElementById("demo").innerHTML = x.toFixed(2);
//document.getElementById("demo").innerHTML = Number("10");
//document.getElementById("demo").innerHTML = x.valueOf();
let d = new Date("1970-01-02");
document.getElementById("demo").innerHTML = Number(d);
</script>
JavaScript Array Methods
<script>
let my=["home","car","marriage"];
let your=["job","education"];
const x = [[1,2],[3,4],[5,6]];
document.getElementById("demo").innerHTML = my.toString(); //converts an array to a string
document.getElementById("demo").innerHTML = my.join("*"); //you can specify the separator
//document.getElementById("demo").innerHTML = my.pop(); //removes the last element
document.getElementById("demo").innerHTML = my.push("home");//adds a new element
document.getElementById("demo").innerHTML = my.shift(); //pop the first element
document.getElementById("demo").innerHTML = my.concat(your); //merging arrays
document.getElementById("demo").innerHTML = x.flat(); //reducing the dimensionality
document.getElementById("demo").innerHTML = your.splice(1,0,"sport");//position and removed elements
document.getElementById("demo").innerHTML = your;
document.getElementById("demo").innerHTML = my.sort();
document.getElementById("demo").innerHTML = my.reverse();
</script>
<p id="demo"></p>
<script> JavaScript Date Objects
const d = new Date()
document.getElementById("demo").innerHTML = d;
document.getElementById("demo").innerHTML = d.getMonth();
document.getElementById("demo").innerHTML = d.getFullYear();
document.getElementById("demo").innerHTML = d.getDate();
document.getElementById("demo").innerHTML = d.getDay();
document.getElementById("demo").innerHTML = d.getHours();
document.getElementById("demo").innerHTML = d.getMinutes();
document.getElementById("demo").innerHTML = d.getSeconds();
document.getElementById("demo").innerHTML = d.getMilliseconds();
document.getElementById("demo").innerHTML = d.getTime();
document.getElementById("demo").innerHTML = d;
</script>
JavaScript Random
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random()*10);
</script>
</body>
</html>
JavaScript Classes

• JavaScript Classes are templates for JavaScript Objects.


• Use the keyword class to create a class.
• Always add a method named constructor(): Add any number of methods.
• class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
• A JavaScript class is not an object, it is a template for JavaScript objects.
• When you have a class, you can use the class to create objects:
• const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
• The constructor method is a special method called automatically when a new object is created.
• It has to have the exact name "constructor".
• It is used to initialize object properties.
• If you do not define a constructor method, JavaScript will add an empty constructor method.
• Class methods are created with the same syntax as object methods.
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() { const date = new Date();
return date.getFullYear() - this.year; }
}
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML ="My car is " + myCar.age() + "
years old.";
</script>

You might also like