Categories
JavaScript Web development

JavaScript Math.ceil()

JavaScript Math.ceil()

The JavaScript Math.ceil() rounds a number upwards to the nearest integer, and returns the result.

Syntax:

Math.ceil(x)

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!

Categories
HTML JavaScript Web development

HTML canvas fillStyle Property

HTML canvas fillStyle Property

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!

Categories
JavaScript Web development

JavaScript HTML DOM/CSS

The HTML DOM allows JavaScript to change the style of HTML elements.

JavaScript HTML DOM CSS

Changing HTML Style

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

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

  1. An element is clicked on
  2. The page has loaded
  3. Input fields are changed

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:

This is a heading.

Enjoy coding!

Categories
JavaScript Web development

JavaScript Output

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().

JavaScript output

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 an HTML heading.

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 an HTML heading

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:

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

JavaScript Output

Enjoy!

Categories
JavaScript Web development

JavaScript Introduction

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 behavior of web pages.

JavaScript Intro

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:

What Can JavaScript Do?

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:

What Can JavaScript Do?

JavaScript can change the style of an HTML element.

Enjoy coding!

Categories
JavaScript Web development

How to add JavaScript to HTML?

In some of my previous posts started appearing JavaScript, so why today I would like to explain more how to nest the code into HTML. You will learn more about JavaScript in later chapters, but today in a short introduction to the post you need to know what JavaScript is and what JavaScript can do.

How to add JavaScript to HTML?

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:

JavaScript in the Head Section

Click on the button to change the text.


Hope you find it helpful.

Enjoy coding!

Read also:

JavaScript Introduction

HTML DOM