Example <!DOCTYPE html> <html> <body> <h2>JavaScript Statements</h2> <p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p> <p id=”demo”></p> <script> let x, y, z; // Statement 1 x = 5; // Statement 2 y = 6; // Statement 3 z = x + y; … Read More »
JavaScript Display Possibilities 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(). 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:… Read More »
The <script> Tag In HTML, JavaScript code is inserted between <script> and </script> tags. Example <!DOCTYPE html> <html> <body> <h2>JavaScript in Body</h2> <p id=”demo”></p> <script> document.getElementById(“demo”).innerHTML = “My First JavaScript”; </script> </body> </html> Result: JavaScript in Body My First JavaScript Old JavaScript examples may use a type attribute: <script type=”text/javascript”>.The type attribute is not required. JavaScript is the default… Read More »
JavaScript is the world’s most popular programming language. JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced. JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById(). The example below “finds” an HTML element (with id=”demo”), and changes the… Read More »
JavaScript Introduction JavaScript Where To use? JavaScript Display Output Possibilities JavaScript Statements JavaScript Syntax JavaScript Comments JavaScript Variables JavaScript Let JavaScript Const JavaScript Operators JavaScript Arithmetic JavaScript Assignment JavaScript Data Types JavaScript Functions JavaScript Objects JavaScript Events JavaScript Strings JavaScript String Methods JavaScript String Search JavaScript Template Literals JavaScript Numbers JavaScript Number Methods JavaScript Arrays JavaScript Array Methods JavaScript Sorting Arrays JavaScript Array Iteration JavaScript Array Const JavaScript Date Objects JavaScript Date Formats JavaScript Get Date Methods JavaScript Set… Read More »
Grid Container To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows. The grid-template-columns Property The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a… Read More »
Child Elements (Items) A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows. The grid-column Property: The grid-column property defines on which column(s) to place an item. You define where the item will start,… Read More »
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Browser Support The grid properties are supported in all modern browsers. Google Chrome Internet Explorer Mozilla Firefox Safari Opera 57.0 16.0 52.0 10 44 Grid… Read More »
CSS Flexbox Layout Module Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. Browser… Read More »
CSS2 Introduced Media Types The @media rule, introduced in CSS2, made it possible to define different style rules for different media types. Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on. Unfortunately these media types never got a lot of… Read More »