DEV Community: Rohini Bali

Getting started with JavaScript : The Definitive Guide : Week2

Rohini Bali — Thu, 21 Jan 2021 20:51:47 +0000

Topics Covered in this blog are Objects!

Computer works in a very simple way. It takes input from user, processes it and then provides us with an output. This seems like work of intelligence! It is indeed. But I've to break it to you, computer is a dumb machine it cannot do anything by itself.

Computer programs are what makes computer an Intelligent Machine and how does computer program do these things? It manipulates values, the kind of values that are known as types and are one of the fundamental characteristics of a programming language. Also there values are stored within the memory with the help of variable. We will see more about this as we advance through this chapter :

JavaScript types can be divided into two categories

1.Primitive types
2.Object types

Basically everything in JavaScript is an Object including the Primitive types. And every object has two compulsory characteristics properties and values. The third characteristic one is optional as it is methods (which basically are nothing but functions related to a particular set of object) because some might require them and some might not.

JavaScript's primitive types include
1.Numbers
2.Strings
3.Boolean
4.Null
5.Undefined

Primitive types are basically immutable objects, which means an object whose state cannot be modified after it is created and are predefined within the language.
You can check the type of the variables or objects using typeof operator in JavaScript.

Now let's jump to understand more about Objects. A mutable object is an object whose state can be modified after it is created. A JavaScript program can change the values of object properties and array elements.

Let's look at an example I've given here:

Let Me show you the type person now belongs to:

See now we know about objects. More interesting part over here is I can even change the whole object. See this

But But But!!!!! take a look at the declaration. I've used let to define my object person. Which means we can change the whole object in a single command. But the thing to keep in mind here is that when we declare a object using const keyword it is not that easy to change the object. Look how the same code threw an Error over here:

So now the question that would pop-up into your mind would be would it make this person(object) immutable?

The answer to the above question is NO.

I'd explain it to you in a simple way. Just suppose yourself as a object with const declaration. You have some properties which will remain as they are for your entire life such as your name mentioned on your birth-certificate(unless you decide to change it) or the colour of your hair or simply who gave you birth. These things won't change. But yes you can have different age, different hairstyle, different favourite song!

You can still change the properties of the Obj with const declaration but not all of them together. Here is how you can do it:

We can do this by reassigning each object property individually.
You can study more about how let, const and var works in JavaScript in this link.
I want to bring your focus to one more thing over here. When we define functions within an particular object they are called methods. Take this for an example:

Here fullName is function declared within person object and hence will be called as method of person.

Now, let's move forward and see how we can create new objects,
but before we dive deep, it is important to note that JavaScript is an object-based language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have an inheritance of properties and their values.

We can create objects in the following ways given:

1.Creation of an object using constructor

Constructor is nothing but a function and with help of new keyword, constructor function allows to create multiple objects of same blueprint as shown below:

A class is a blueprint for similar type of objects, in OOPs it has two major components, certain parameters and few member functions. In this method we declare a function similar to a class, there are three parameters, brand, designer and country (the this keyword is used to differentiate brand, designer and country of the class to the brand, designer, country of the arguments that are being supplied.). We then simple create an object tshirt of the type clothes and initialize it. We can see that tshirt object now has properties as of clothes i.e. brand, designer and country.

2.Creation of objects using Object literals.

Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces as shown below:

As shown in the above code we created a simple object named tshirt with the help of object literal, having properties like brand, designer, country. Then we make use of the property accessor methods(Dot notation, Bracket notation) to console.log the values.
Now let’s see how we can add more properties to an already defined object:

3.Creating object with Object.create() method.

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

4.Using es6 classes.

ES6 supports class concept like any other Statically typed or object oriented language. So, object can be created out of a class in javascript as well as shown below:

So that's all for this week. Hope you liked it!

If you think this article can be improved let me know.🙂

Getting started with JavaScript : The Definitive Guide

Rohini Bali — Wed, 13 Jan 2021 13:41:01 +0000

I started reading out this book a week ago and here I'm trying to break-up a few things I understood while getting started.

Chapter 01 : Introduction to JavaScript.

JavaScript is a high-level, dynamic, interpreted programming language that is well suited to Object oriented and functional programming styles with multi-paradigm. It has curly-bracket syntax, prototype-based object-orientation, and first-class functions. It is basically everywhere around us.
I know what you're thinking. Alright, I accept these are a lot of jargons to take in abruptly. So let's get our feet into the deep waters one foot at a time.

What is High-level Programming language?
In computer science it can be explained as a programming language that uses abstraction(providing relevant information in a type). Means we all know machine cannot understand natural languages that humans speak. They only understand the binary or machine level language, which consists of only zeroes and ones. Now what earlier software engineers did for us was they kind of made a dictionary in which they wrote down sequences of 0's and 1's so that when we type something in our natural language the machine will have a reference to look up to, to understand what it exactly means in machine level language.

A dynamic programming language is nothing but just a class of high level programming language in which operations otherwise done at compile-time can be done at run-time. In JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running. This is the ability of a dynamic language.
Interpreters run through a program line by line and execute each command so if a command in JavaScript is executed, that is done in the manner previously mentioned and thus becomes an interpreted language. The point to note here is that in compiled languages that are directly converted into machine code, they tend to be faster than interpreted languages. But with the development of JUST-IN-TIME compilation the gap is shrinking.

Chapter 02 : Lexical Structure.

When learning any new language one needs to keep in mind that every language in this world has a particular script and a particular set of defined rules on which the whole language relies upon. Like you know how American English has the same letters as British English but still both are different in ways. Pronunciation, spelling of particular words etc. Similarly in every programming language there is a set of elementary rules that specifies how you write programs in a particular language. This is called lexical structure or in simple words its syntax. Important points to remember are that :

JavaScript is a case-sensitive language.
JavaScript ignores excess whitespace along with line breaks except for those that are a part of string or regular expression literals.
Currently according to ECMAScript 6 there are total of 48 reserved keywords in JavaScript.
JavaScript programs are written using the Unicode character set.
Semicolons are optional.
Primitive types (inbuilt or predefined datatypes and methods linked to them).

We will continue to discuss the further chapters.
If you think this article can be improved do let me know. 🙂

Precedence Rules in CSS3-P2

Rohini Bali — Sun, 03 Jan 2021 16:08:35 +0000

We have already seen how browser will display properties of an HTML document when styling is done using multiple methods. Now we will see how precedence rule works when we declare different properties of selectors, multiple times within a single CSS file.

Let's focus on the styling of paragraph tag within the HTML file. As you can see that I've also highlighted the styled component of p tag. We have declared multiple font-families in the paragraph tag.Now the question that arises is which font will be displayed on the browser. Well to answer that question first of all we need to understand the fact that every font is not available within every browser(common font families- predefined in every browser) so if the first-font family if available it will display that.
Here we have Georgia as the font-family which is being displayed in the web browser.
Now let's see what happens if the first font-family is not present within the browser properties.

As you can see the browser has rendered font family as Times New Roman. This happened because Nunito is not a common font-family that is available within all the browsers. You can go ahead and search online and see how we display different types of Font-families using a reference to tell the browser from where they can get the font (let's keep that part of discussion for some other day).
So the browser jumped to the next font-family that was provided to make sure that if something goes wrong with the first one, it would know what to do next or else if we don't do that as well, the browser has default settings to display items as per its own properties which are pre-defined within the browser.
Now let's take a look at this example below:

We have defined the properties of paragraph tag multiple times within the CSS file, but as per precedence rules the browser will display the most recent property(which is declared last in the sheet) for the selector (tag) if there are multiple references present within the same stylesheet.
It's just like you made a change and then later you didn't like the property you'd chosen earlier for a particular selector. So you redefined the property without changing the previously defined selector property. Easy! Isn't it?
But what if you want to stick to what you'd written earlier or what if some other person redefines the selector properties and you want to avoid that? In order to make sure that does not happen we can use !important after declaring the property that it is not meant to be updated. This is an important part of precedence that we should always keep in our minds. I've given the example below:

That's all of what I've understood of precedence rules in CSS. Thanks for reading.
If you've any suggestions for how I can improve you can reach out to me. Thank you!

Precedence Rules in CSS3-P1

Rohini Bali — Sat, 02 Jan 2021 15:26:30 +0000

While styling a single HTML document via cascading style sheets one has to keep in mind the CSS Precedence rule which I used to often get confused with. So let's begin.
We all know that there are typically three ways to style an HTML document. For those who don't know let me tell you that these are:

1.By Embedding the CSS inside the style attribute of the HTML elements i.e., in the start tag itself.

2.By Embedding CSS inside style HTML element i.e., within the style tag.

3.By linking the External CSS files in the HTML within the head tag.

Now the question that arises is what if someone does styling of a single html page using all the methods mentioned above? This is an obvious question that comes to beginner's mind when they get into web development.
Let's Understand how CSS Precedence rules resolve this by this example here:

Did you see what happened here? We have declared the colour for h1 in style tag, in CSS stylesheet which is linked in the head and also within the h1 tag as an attribute. The precedence in CSS works like this :

a) If nothing is specified for a particular tag, each browser has its own rendering properties which are predefined within them, which is what we usually see when we open a simple HTML document in our browsers.

Look carefully we have not linked any stylesheet in the html file.

b) The browser while rendering the HTML document checks within the head tag for linked stylesheets and if there is one present it will display the contents as prescribed in the stylesheet.

c) The then proceeds to check for the style tag and the content within the style tag to make the particular changes

d) Finally the browser looks for style contents within the particular tag itself which in our case is h1.As we all can see it has overridden all the other style tag and stylesheet linked with the html.

TO BE CONTINUED...