Introduction to JavaScript

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. 🙂

3 thoughts on “Introduction to JavaScript”

  1. Nice Post! I’ve heard that jon duckett books are good. I’m just over halfway through O’rielly Head First JS myself and loving it! I wrote a post on passing objects up to functions as a parameter since that was the part that had me really stumped! Object oriented programming in new to me and I’m only just getting into it in halfway through this book. I think it totally helps to pen things out like your doing too – to explore and explain your understanding of the topic.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s