Skip to main content

JavaScript Variables, Arrays and Objects Front end Development [S4 V7 - ...





In this lesson, we will understand what is a variable, how its created and used along with jQuery.


REFERENCE FILE
https://drive.google.com/open?id=1FJP...

Variable is a value-holding container. Means, it's just a name that can hold a value like your name, age, date of birth, etc. But why do we create a variable? There are number of reasons, but the following are important to understand:
1. So that we can use this in different locations of our application. Reason? Because we cannot write our name a million times by hand (or even copy paste). Reason? Because it's time consuming and error prone. Variables improve our work and project efficiency.

2. We need to manage all the instances from one place. For example, we have used a variable thousand times in different places. Now changing the value of the variable once will update every other instance. Variables provide us greater control over our content.

Now how to create a variable? That's really simple.

Just write the name of it and its created.

Really! it's just that simple. For example, I want to create a variable called "age" so that I can save my age in it. All I have to do it write the name of the variable like this:

age;

and then I have to tell my age to it - in numbers, like this:

age = 27;

Lo behold! The variable is created. But this is not really the only way to create it. There are three other ways, each having their own precise usability and need. In the above case, our need was simple, so we used a simple way to create it, but in larger applications we also need to know the other three ways of creating a JavaScript variable:

1 - var
2 - let
3 - const

A quick note on the "constant". As the name implies, a constant is something that cannot be changed once defined.This definition immediately raises one question. Does a variable then changes? The answer is Yes, but only when we want it to change. Constants cannot change whatsoever. Constants are mostly used or configurations and hard code referencing.

Var and Let are almost the same thing as just typing out the name as we did in the first example. But in advanced lessons you will learn that there are very clear differences in between the two. But for now, we can use them as synonyms.

Now where is jQuery in all that stuff?

As we know that we are working on a resume project, therefore we contextualize every thing in that project. In our project, we are creating clickable cards that display a popup with more information about that card. We need to reference those cards in a variable. Referencing in JavaScript is not just that easy, it takes little extra keystrokes and a little more human memory.

With the help of jquery we will reference all the cards that have the class ".project" and store in the variable called projectCards, like this:

let projectCards = $(".project");

The dollar sign is used to communicate with the HTML document and search the class project in it. All the elements matching the class are then saved in the variable called projectCards.

We can now alert() and console.log this variable to see what's in it for us, but we will quickly do that in the next lesson.

Comments

Popular posts from this blog

Design Organized Website Structures

When developing a website, you must proactively decide its structure before starting the coding. But what does the Web Structure mean at the very first place? Website Structure can be defined as follows: When you talk about the structure of a website, you are talking about its components , their working , their location , their inter-dependency , and their interaction with the user. The design of the Website Structure does not include code. Generally, the design includes, wire frames, sketches, mock ups, lists, flow charts and other visual aids. What is a component? Well, it can be defined as follows: Components are the useful or functional parts of a website Every component has a particular purpose and function. For example, navigation bar of a website has a purpose of providing navigation links to the user. But some, components are versatile and have multiple purposes. For example, a header of website can contain a navigation bar, a search bar, a login form...

S3 V6 - Class and ID (ENGLISH/URDU) Tutorial | Phase 1

S3 V6 - Class and ID (URDU) Tutorial | Phase 1 S3 V6 - Class and ID (ENGLISH) Tutorial | Phase 1 Understand and learn concept of Class and ID in Urdu Tutorial. files - - https://goo.gl/QTY6E8 This article elaborates the difference between CSS Class and ID . To understand the difference, consider the example of a group children in a school; they are categorized into classes as Grade 1 - Red, Grade 1 - Blue. The problem of this categorization is that if they all are made to stand together as a crowd then an outsider cannot identify the grade colours of the students. An outsider can only identify when they see them sitting in their respective classes. In this condition, if the outsider is asked " Hey outsider, please identify which students belong to grade 1 - red!" They would of course reply "No. How can I identify the students when they have no proper identifier?" The management now decides to change uniforms of each class according to their colour...

JavaScript Functions Frontend Development Course - S4 V10

In this tutorial, you will learn about JavaScript functions, how they are created and used in an object. You will also learn about arrow functions and their usage in a JavaScript project. FILES Basic Functions https://stackblitz.com/edit/js-cba8jz Arrow Functions https://stackblitz.com/edit/js-nv9vye As the word Function itself means that some action is performed so is the real purpose of this JavaScript aspect is. Functions are meant to perform following actions: 1 - value display -> DOM (display website) 2 - value popup -> alert() 3 - value change 4 - value assign 5 - object create 6 - variable create 7 - new function 8 - simple and complex calculations In this tutorial, we will not cover all the purposes but we will do see how the value is displayed in the DOM, how an external value is changed and also see how parameters are used to make interactive applications in JavaScript. The code is super easy, but you need to pay great attention at what is being ...