The JavaScript Math.ceil() rounds a number upwards to the nearest integer, and returns the result.
Syntax:
Math.ceil(number)Example:
<!DOCTYPE html>
<html>
<body>
<button onclick="ceilExample()">Try it</button>
<p id="math-ceil"></p>
<script>
function ceilExample() {
document.getElementById("math-ceil").innerHTML = Math.ceil(2.2);
}
</script>
</body>
</html>
Output:
Click the button to round the number 2.2 upward to its nearest integer.
Enjoy coding!
Read also:
The HTML canvas fillStyle property defines the color, gradient, or pattern used to fill the drawing.
Syntax:
context.fillStyle=color|gradient|pattern;value: color
Specify a green fill-color for the square:
<!DOCTYPE html>
<html>
<body>
<canvas id="square-1" width="200" height="200" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("square-1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>Output:
value: gradient
Specify a gradient (top to bottom) as the fill style for the square:
<!DOCTYPE html>
<html>
<body>
<canvas id="square-2" width="200" height="200" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("square-2");
var ctx = c.getContext("2d");
var create_gradient = ctx.createLinearGradient(0, 0, 0, 150);
create_gradient.addColorStop(0, "#2a9d8f");
create_gradient.addColorStop(1, "#264653");
ctx.fillStyle = create_gradient;
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>Output:
Specify a gradient that goes from red, to orange, to yellow, as the fill style for the square:
<!DOCTYPE html>
<html>
<body>
<canvas id="square-3" width="200" height="200" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("square-3");
var ctx = c.getContext("2d");
var createGradient = ctx.createLinearGradient(0, 0, 150, 0);
createGradient.addColorStop(0, "#e76f51");
createGradient.addColorStop(0.5, "#f4a261");
createGradient.addColorStop(1, "#e9c46a");
ctx.fillStyle = createGradient;
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>Output:
To read more about HTML canvas gradients and learn how to create HTML canvas radial-gradient click here.
value: pattern
Use an image to fill the drawing:
<!DOCTYPE html>
<html>
<body>
<p>Image:</p>
<img src="https://lenadesign.org/wp-content/uploads/2021/06/car.png" id="car" width="39" height="33">
<p>Canvas:</p>
<canvas id="myPattern" width="200" height="200" style="border:1px solid #333;">
</canvas>
<br><br>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('no-repeat')">No-repeat</button>
<script>
function draw(direction) {
var c = document.getElementById("myPattern");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = document.getElementById("car")
var pat = ctx.createPattern(img, direction);
ctx.rect(0, 0, 200, 200);
ctx.fillStyle = pat;
ctx.fill();
}
</script>
</body>
</html>Output:
Image:
Canvas:
Enjoy coding!
The HTML DOM allows JavaScript to change the style of HTML elements.
Changing HTML Style
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property = new styleThe following example changes the style of a <p> element:
<!DOCTYPE html>
<html>
<body>
<p id="p-one">Hello World!</p>
<p id="p=two">Hello World!</p>
<script>
document.getElementById("p-two").style.color = "#f4a261";
document.getElementById("p-two").style.fontFamily = "Arial";
document.getElementById("p-two").style.fontSize = "larger";
</script>
</body>
</html>Output:
Hello World!
Hello World!
Using Events
The HTML DOM allows you to execute code when an event occurs.
Events are generated by the browser when “things happen” to HTML elements:
You will learn more about events in the next chapter of this tutorial.
This example changes the style of the HTML element with id=”change” when the user clicks a button:
<!DOCTYPE html>
<html>
<body>
<h3 id="change">This is a heading.</h3>
<button type="button"
onclick="document.getElementById('change').style.color = '#e76f51'">
Click Me!</button>
</body>
</html>
Output:
Enjoy coding!
Read also:
JavaScript Output defines the ways to display the output of a given code. JavaScript can “display” data in different ways:
a) Writing into an HTML element, using innerHTML.
b) Writing into the HTML output using the document.write().
c) Writing into an alert box, using a window.alert().
d) Writing into the browser console, using console.log().
a) Using 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:
Example:
<!DOCTYPE html>
<html>
<body>
<h4>This is an HTML heading.</h4>
<p>This is a paragraph.</p>
<p id="js-1"></p>
<script>
document.getElementById("js-1").innerHTML = 5 + 6;
</script>
</body>
</html> Output:
This is a paragraph.
Changing the innerHTML property of an HTML element is a common way to display data in HTML.
b) Using document.write()
For testing purposes, it is convenient to use the document.write():
Example:
<!DOCTYPE html>
<html>
<body>
<h4>This is an HTML heading</h4>
<p>This is a paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html> Output:
This is a paragraph.
11
Note: The document.write() method should only be used for testing.
c) Using window.alert()
You can use an alert box to display data:
<!DOCTYPE html>
<html>
<body>
<h4>This is an HTML heading </h4>
<p>This is a paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html> Output:
d) Using console.log()
For debugging purposes, you can use the console.log() method to display data:
<!DOCTYPE html>
<html>
<body>
<h4>Press F12</h4>
<p>Select "Console" in the debugger menu. Then click Run again.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html> Output:
Enjoy coding!
Read also:
JavaScript is the programming language of HTML and the Web. Java Script is one of the 3 languages all web developers should learn:
a) HTML – to define the content of web pages.
b) CSS – to specify the layout of web pages.
c) JavaScript – to program the behaviour of web pages.
Web pages are not the only places where JavaScript is used. Many desktop and server programs use JavaScript (for example Node.js).
JavaScript can change the HTML content. One of many JavaScript methods is getElementById(). This example uses the method to “find” an HTML element (with id=”demo”) and changes the element content (innerHTML) to “Hello JavaScript”:
<!DOCTYPE html>
<html>
<body>
<h4>What Can JavaScript Do?</h4>
<p id="exampleOne">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("exampleOne").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>Output:
JavaScript can change HTML content.
JavaScript can change HTML attribute values. In this example, JavaScript changes the value of the src (source) attribute of an <img> tag:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('image').src='pic_bulbon.gif'">Turn on the light</button>
<img id="image" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('image').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>Output:
JavaScript can change HTML styles (CSS). Changing the style of an HTML element is a variant of changing an HTML attribute:
<!DOCTYPE html>
<html>
<body>
<h4>What Can JavaScript Do?</h4>
<p id="examle">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('example').style.fontSize='35px'">Click Me!</button>
</body>
</html> Output:
JavaScript can change the style of an HTML element.
Enjoy coding!
Read also:
JavaScript is the programming language for the web and can update and change both HTML and CSS.
You can place any number of scripts in your HTML document.
You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag, depending on when you want Java Script to load.
In this example, a JavaScript function is placed in <head> section of HTML page. The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("example").innerHTML = "Text changed.";
}
</script>
</head>
<body>
<h4>JavaScript in the Head Section</h4>
<p id="example">Click on the button to change the text.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Output:
Click on the button to change the text.
Hope you find it helpful.
Enjoy coding!
Read also: