JavaScript
Popular programming language of the Web. Primarily used for front-end web development.
JS creates dynamic and interactive web pages.
Dynamic web page
This means the content is updated regularly. E.g. News site, e-commerce
Some Full Form
- ES6: ECMAScript 6
- ECMA: European Computer Manufacturer's Association
Why JS?
It is one of the languages that all web developers must learn.
- HTML: Hypertext Markup Language - Describes the structure and defines the contents or controls of web pages.
- CSS: Cascading Style Sheets - Style an HTML document, describes how HTML elements should be displayed, in short design the web page.
- JS: JavaScript - Program the behavior of web pages.
JavaScript can change HTML content?
JavaScript HTML methods are getElementById() - "finds" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript".
InnerHTML = to get and set the internal html contents.
E.g
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript accepts both double and single quotes.
JavaScript can change HTML Styles (CSS)
E.g
document.getElementById("demo").style.fontSize = "35px";
JavaScript can hide HTML elements
Hiding HTML elements can be done by changing the display style.
document.getElementById("demo").style.display = "none";
JS, where to write?
In HTML, JavaScript code is inserted between <script> and </script> tags.
<script type="text/javascript">
// Your JavaScript code here
</script>
The type attribute is not required. JavaScript is the default HTML scripting language.
External JS
You can place the script in external files as well.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To access, use src
<script src="demo.js"></script>
JS Role in Web Development
- Interactivity and User Experience: allows developers to create dynamic content that responds to user actions, such as button clicks, form submissions, and mouse movements.
- DOM Manipulation: JavaScript enables developers to manipulate the DOM, which means they can programmatically modify the content, structure, and style of a web page.
- Asynchronous Programming: allowing developers to execute tasks without blocking the main thread.
- Web APIs: Integrate API
- Frameworks and Libraries: Frameworks like React and Angular provide structured ways to build complex user interfaces. while libraries like jQuery simplify common tasks like DOM manipulation and AJAX requests
- Server-Side Development: JavaScript is primarily known for its client-side but now expanded into server-side development. Node.js, a runtime environment for executing JavaScript on the server