<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript References</title>
    </head>
<body>
  <h2 align="center" style="font-size: 35;"><u>Practical No: 7</u></h2>
<ol type="1">
  <dl><dt style="font-size: 30;"><b><u>Aim:</u> Design a Web page demonstrating different core java script references(Array,
    Boolean, date, Function, Math, Number, object and String).</b></dt><br>
  <li><b><u>JavaScript Arrays</b></u></li>
  <p>The Array object is used to store multiple values in a single variable:</p>
  <p>id="demo" const cars = ["Saab", "Volvo", "BMW"];
    document.getElementById("demo").innerHTML = cars;</p>
    <b><p>output:</p></b>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
<ul type="circle">
<li><b><u>at() Method</b></u></li>
<p>The at() method returns an indexed element from an array.</p>
<p>id="demo1" const fruits = ["Banana", "Orange", "Apple", "Mango"];
  let fruit = fruits.at(2);
  document.getElementById("demo1").innerHTML = fruit;</p>
  <b><p>output:</p></b>
<p id="demo1"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
document.getElementById("demo1").innerHTML = fruit;
</script>

<li><b><u>concat() Method</b></u></li>
<p>The concat() method concatenates (joins) two or more arrays:</p>
<p>id="demo2" const arr1 = ["Cecilie", "Lone"];
  const arr2 = ["Emil", "Tobias", "Linus"];
  const children = arr1.concat(arr2); 
  document.getElementById("demo2").innerHTML = children;</p>
  <b><p>output:</p></b>
<p id="demo2"></p>
<script>
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const children = arr1.concat(arr2); 
document.getElementById("demo2").innerHTML = children;
</script>
</ul>

<li><b><u>JavaScript Booleans</b></u></li>
<p>Display the value of (10 > 9):</p>
<b><p>output:</p></b>
<p id="demo3"></p>
<script>
document.getElementById("demo3").innerHTML = (10 > 9);
</script>

<li><b><u>JavaScript Dates</b></u></li>\
<ul>
<li><b><u>new Date()</b></u></li>
<p>new Date() creates a new date object with the current date and time:</p>
<p>id="demo4" const d = new Date();
  document.getElementById("demo4").innerHTML = d;</p>
<b><p>output:</p></b>
<p id="demo4"></p>
<script>
const d = new Date();
document.getElementById("demo4").innerHTML = d;
</script>
</ul>

<li><b><u>JavaScript Math</b></u><br><br></li>
<ul type="circle">
<li><b><u>pow() Method</u></b></li>
<p>Math.pow(x,y) returns the value of x to the power of y:</p>
<p>id="demo5" document.getElementById("demo5").innerHTML = Math.pow(4, 3);</p>
<b><p>output:</p></b>
<p id="demo5"></p>
<script>
document.getElementById("demo5").innerHTML = Math.pow(4, 3);
</script>

<li><b><u> Math.sqr() Method</u></b></li>
<p>Math.sqrt() returns the square root of a number:</p>
<p>id="demo6" document.getElementById("demo6").innerHTML = Math.sqrt(9);</p>
<b><p>output:</p></b>
<p id="demo6"></p>
<script>
document.getElementById("demo6").innerHTML = Math.sqrt(9);
</script>
</ul>

<li><b><u>JavaScript Numbers</u></b><br><br></li>
<ul type="circle">
<li><b><u>valueOf() Method</u></b></li>
<p>valueOf() returns the primitive value of a number:</p>
<p>id="demo7" let num = 21;
  let n = num.valueOf();
  document.getElementById("demo7").innerHTML = n;</p>
<b><p>output:</p></b>
<p id="demo7"></p>
<script>
let num = 21;
let n = num.valueOf();
document.getElementById("demo7").innerHTML = n;
</script>

<li><b><u>Number.isInteger() Method</u></b></li>
<p>Number.isInteger() returns true if the value is an integer of the datatype Number:</p>
<p>id="demo8" let result =
  "Is 123 an integer? " + Number.isInteger(123) + "<br>" +
  "Is 123 an integer? " + Number.isInteger(-123) + "<br>" +
  "Is '123' an integer? " + Number.isInteger('123');
  document.getElementById("demo8").innerHTML = result;</p>
<b><p>output:</p></b>
<p id="demo8"></p>
<p>Number.isInteger() is not supported in Internet Explorer 11 and earlier.</p>
<script>
let result =
"Is 123 an integer? " + Number.isInteger(123) + "<br>" +
"Is 123 an integer? " + Number.isInteger(-123) + "<br>" +
"Is '123' an integer? " + Number.isInteger('123');
document.getElementById("demo8").innerHTML = result;
</script>
</ul>

<li><b><u>JavaScript Objects</u></b><br><br></li>
<ul type="circle">
<li><b><u>tostring() Method</b></u></li>
<p>toString() returns the content of a string:</p>
<p>The result of using toString() on an array:</p>
<p>id="demo9" const frui = ["Banana", "Orange", "Apple", "Mango"];
  const myArray = frui.toString();
  document.getElementById("demo9").innerHTML = myArray;</p>
<b><p>output:</p></b>
<p id="demo9"></p>
<script>
const frui = ["Banana", "Orange", "Apple", "Mango"];
const myArray = frui.toString();
document.getElementById("demo9").innerHTML = myArray;
</script>

<li><b><u>prototype Property</u></b></li>
<p>The prototype property allows you to add new properties and methods to existing objects.</p>
<p>Add a salary to all employees:</p>
<p>id="demo10" function employee(name, jobtitle, born) {
  this.name = name;
  this.jobtitle = jobtitle;
  this.born = born;
}
employee.prototype.salary = 2000;
const fred = new employee("Fred Flintstone", "Caveman", 1970);
document.getElementById("demo10").innerHTML = fred.salary;</p>
<b><p>output:</p></b>
<p id="demo10"></p>
<script>
function employee(name, jobtitle, born) {
  this.name = name;
  this.jobtitle = jobtitle;
  this.born = born;
}
employee.prototype.salary = 2000;
const fred = new employee("Fred Flintstone", "Caveman", 1970);
document.getElementById("demo10").innerHTML = fred.salary;
</script>
</ul>

<li><b><u>JavaScript Strings</u></b><br><br></li>
<ul type="circle">
<li><b><u>length Property</u></b></li>
<p>The length property returns the length of a string.</p>
<p>Find the length of "Hello World!":</p>
<p>id="demo11" let text = "Hello World!";
  let length = text.length;
  document.getElementById("demo11").innerHTML = length;</p>
<b><p>output:</p></b>
<p>length of Hello World is: </p>
<p id="demo11"></p>
<script>
let text = "Hello World!";
let length = text.length;
document.getElementById("demo11").innerHTML = length;
</script>

<li><b><u>trim() Method</u></b></li>
<p>trim() removes whitespace from both sides of a string:</p>
<p>id="demo12" id="demo13" let text1 = "     Hello World!     ";
  let result1 = text1.trim();
  document.getElementById("demo12").innerHTML = text1;
  document.getElementById("demo13").innerHTML = result1;</p>
<b><p>output:</p></b>
<p>before: </p>
<p><pre><p id="demo12"></p></pre>
<p>after: </p>
<pre><p id="demo13"></p></pre></p>
<script>
let text1 = "     Hello World!     ";
let result1 = text1.trim();
document.getElementById("demo12").innerHTML = text1;
document.getElementById("demo13").innerHTML = result1;
</script>
</ul>
</ol>
</body>
</html>

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

  • Any HTML document must start with document declaration <!DOCTYPE html>
  • HTML documents begin with <html> and ends with </html>
  • Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
  • Paragrahs are defined in <p>..</p> tag.
  • Links are defined in <a> tag.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>
  • Images are defined in <img> tag, where src attribute consists of image name.
  • Buttons are defined in <button>..</button> tag
  • Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

  • HTML element is everything present from start tag to end tag.
  • The text present between start and end tag is called HTML element content.
  • Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
  • Do not forget the end tag.
  • Elements with no content are called empty elements.
  • Elements can have attributes which provides additional information about the element.
  • In the below example, href is an attribute and a is the tag name.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

  • HTML Tables are defined in <table> tag.
  • Table row should be defined in <tr> tag
  • Table header should be defined in <th> tag
  • Table data should be defined in <td> tag
  • Table caption should be defined in <caption> tag

HTML-Javascript

  • Javascript is used in HTML pages to make them more interactive.
  • <script> is the tag used to write scripts in HTML
  • You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>