Hello!!

I hope you are doing well and staying at home.

Dear reader, this is gonna be a coding related post. This is just an introduction post, I am planning to continue this JavaScript coding serie. How did I come up with this idea? Well, I’ve started a new book called “JavaScript and JQuery, interactive front-end web development” by Jon Duckett. Here is the website of the book if you want to check. So, since Learning is a journey, I’ve decided to take notes while studying this book. I will share my notes from the book as blog posts. Hoping that these posts will help somebody that is interested in coding.

So, after a short intro of this new series, let’s get started.

Chapter 0 – Introduction

How Javascript makes web pages more interactive

Javascript allows you to make web pages more interactive by accessing and modifying the content and markup used in a web page while it is being viewed in the browser.

Javascript encompasses many of the traditional rules of programming. It can make the web page feel interactive by responding to what the user does.

1. Access Content
   1. You can use JavaScript to select any element, attribute, or text from an HTML page.
2. Modify Content
   1. You can use JavaScript to add elements, attributes, and text to the page, or remove them.
3. Program Rules
   1. You can specify a set of steps for the browser to follow (like a recipe), which allows it to access or change the content of a page.
4. React to Events
   1. You can specify that a script should run when a specific event has occurred. 

Couple examples for each of them:

Access Content

• Select the text inside all of the <h1> elements on a page.
• Select any elements that have a class attribute with a value of note
• Find out what was entered into a text input whose id attribute has value of email

Modify Content

• Add a paragraph of text after the first <hi> element
• Change the value of class attributes to trigger new CSS rules for those elements 
• Change the size or position of an <img> element 

Program Rules

• A gallery script could check which image a user clicked on and display a larger version of that image.
• A mortgage calculator could collect values from a form, perform a calculation, and display repayments.
• An animation could check the dimensions of the browser window and move an image to the bottom of the viewable area (also known as the viewport). 

React to Events

• A button is pressed
• A link is clicked (or tapped) on
• A cursor hovers over an element
• Information is added to a form
• An interval of time has passed
• A web page has finished loading 

Thank you for reading. Next post will be a short refreshing of HTML and CSS. Don’t forget to subscribe to my blog if you want to hear about it. See you in the next post.

Please stay safe and be yourself. 🙂