I recently learnt about JavaScript so thought why not share my learnings?
So here I am listing some fundamentals of JavaScript you need to know as an absolute beginner!
1. Two ways of using JS on client: 🤓
👉In the HTML file,
<head>
<script>
console.log("Hello world")
</script>
</head>
<body>
<h1>Text</h1>
</body>
👉Creating JS file and then in HTML we link it.
HTML file 👇
<script src="app.js" type="text/javascript"></script>
JavaScript file(for example we name it as app.js) 👇
console.log("Hello world")
2. All about Alert and Prompt: 🤓
👉Alert and Prompt are popup boxes in JavaScript.
👉Before user enters the page,If you want user to take input then we use prompt.
Prompt:
var userName = prompt("East or west,neoG is the best");
console.log(userName);
👉If you want to give user an important note before he/she enters the page,we use alert.
Alert:
alert("Hello world")
3. VanillaJS: 🤓
👉It is the purest form,Plain form of JavaScript in which we do not use any frameworks or additional libraries
👉We can relate it with vanilla ice-cream in which we do not add any other flavors to it
4. .querySelector() 🤓
👉 It is basically a way to tell your browser,hey browser I need this element. Then browser will ask which element? That one which we wrote in HTML file. and finally that reference is stored in js file.
👉 When we need a reference to the CSS selector inside JavaScript,we use the method .querySelector() to store the information in JavaScript file.
👉Also note that this method will select the first element that matches with CSS selector.
👉If we want to select all the class/id with same name,then we can use .querySelectorAll()
👉Also note that if we want to select id,then .getElementById will also do the same job but .querySelector is more preferable as class and id both get selected by this method.
👉 Note that document. is an API
var btnTranslate = document.querySelector("#button")
5. .addEventListener("click", callback) and click events 🤓
👉 Think of how do users interact with an app? They click,they scroll,they touch so we have to listen to those events
👉 We tell browser when the click happens,do this. Browser asks do what? We say can you run the function when click happens ? So yeah,this is how addEventListener will work.
btnTranslate.addEventListener("What Event we have to listen?", whenever there is click event run it i.e via function);
btnTranslate.addEventListener("click", function clickEventHandler())
6. How does .querySelector() work internally? 🤓
👉 Query means we are asking something and with querySelector() we are asking a specific thing to get.
You can go to chrome,right click,inspect and do this in console 👇 and observe the change
document.body.style.backgroundColor = "red"
7. What is an API(Application programming interface)? 🤓
Let us understand it with plain English, Vanilla English 🤓!
👉What is CLI? user talk to program via command line
👉What is GUI? user talk to program via Graphics
Now API:
👉If you want to program an application,we use this interface. Many applications can do something on their own.
👉as a dev, you talk to user for example getting input, also talk to program saying I got this input can you do something about it?
👉To make a program understand,we need APIs
👉As a dev when we are talking to program,We use API
👉What is API? To talk with program we use API,thats it!
Some Examples:
👉 In node, readlineSync,import etc.. are API ,API which we can use to talk to node
👉document.querySelector() is an API which we can use to talk to document of the browser!
👉addEventListner is an API which can use to add an event to HTML element
8. Concept of callbacks in JavaScript: 🤓
👉In JavaScript, a callback is a function passed into another function as an argument to be executed later. Basically,when the event example "click" happens,do this.
btnTranslate.addEventListener("click", **function clickEventHandler(){
console.log("Clicked")
}**
)
Note the bold text. That entire function is called callback in JavaScript!
👉Is there any difference between normal function and callback function?
No,Both are same. Any function can be normal function as well as callback function. The only difference between normal and callback function is its given to function as an input. Any function which takes another function as an input(internal function) so that internal function is called callback.
9. DOM(Document Object Model) : 🤓
👉 Every element on the page is represented as a property of an object.
👉This object is called Document Object Model (DOM) as it models the entire HTML document in an object. And thus, to access those properties we use methods like document.querySelector().
10. Method in JavaScript: 🤓
👉When a function is inside an object it is called method in javascript
11. innerHTML: 🤓
👉innerHTML is used to print content between labels, including text information.
👉 It gets and sets the content in HTML format
👉We can insert HTML tags
👉It considers the spaces.
👉It returns a tag with an inner element tag.
12. innerText: 🤓
👉innerText is used to print the plain text information between tags and requires some layout system information. It also ignores the space.
👉It gets and sets the content in plain text.
👉We cannot insert HTML tags
👉It does not consider spaces.
👉It returns text without an inner element tag.
13. Creating a DOM element using document.createElement() 🤓
👉In an HTML document, the document.createElement() method creates the HTML element specified by tagName
HTML:
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="div">Random Text</div>
</body>
</html>
JavaScript:
function addElement () {
// Lets create a new element
var newDiv = document.createElement("div");
// Lets add up some content in it
var newContent = document.createTextNode("Hello world");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// Integrating new element and content into the DOM
var currentDiv = document.querySelector("div");
document.body.insertBefore(newDiv, currentDiv);
}
Output 👇
Hello world
Random Text
14. Hypertext Transfer Protocol(HTTP) request methods: 🤓
What is HTTP?
👉HTTP is designed to enable communications between clients and servers.
👉HTTP works as a request-response protocol between a client and server.
HTTP methods:
- GET
- POST
- PUT
- HEAD
- DELETE
- PATCH
- OPTIONS
Most common are GET and POST
GET:
👉GET is used to request data from server or specific resource.
POST:
POST is used to send data to a server to create/update a resource.
👉The data sent to the server with POST is stored in the request body of the HTTP request
15. Why API has rate limit like 5 requests per hour? 🤓
👉To ensure public safety,there is maximum capacity. Just like that,API has also rate limit to ensure the safety of the API’s consumers and the API itself.
👉They can protect you against slow performance and improve the overall user experience.
👉We need to provide user best experience. So to ensure that API is functioning properly,we have rate limit!
16. Call a mock server (from JS): 🤓
👉Using fetch() in your browser to call the server from JavaScript.
What is Fetch() :
👉First we store the url in variable and then fetch that url
👉fetch means just go and get it
👉For example We tell Tommy to fetch ball,Tommy will go and fetch it! Just like that fetch() works
var url = "https://lessonfourapi.tanaypratap.repl.co/translate/yoda.json?text=I%20am%20Samyak%20Shah"
fetch(url)
.then(response => response.json())
.then(json => console.log(json))
Why we converted response to json?
👉If the result was written in JSON format, it will result an error.
👉As we have done from server(using Postman),Response is in json so in console,we need to convert response in json to read the values
Once we got response in json, we just console logged json
17. Understand promise: 🤓
👉Lets understand promise with one example:
👉Tom will get a Trophy but on one condition: If Tom without cheating wins the game.
So it is promised that Tom will get Trophy but on some condition.
👉Now understanding Promise:
I am getting data from server but I dont know when server will respond, how long server will take time as server has many things to do but when I get the data I will give it to you thats what a promise is.
👉It will show promise pending till not got the data.Once got the data,it will show success.
👉fetch() call is essentially returning a promises. It says that you can go ahead with the execution and don't wait on me, I'll let you know when I get the data.
👉How would we tell fetch() what do with this data? By giving it a callback inside the .then() of promise.
18. Asynchronous programming: 🤓
👉Asynchronous programming makes it possible to express waiting for long-running actions without freezing the program during these actions. JavaScript environments typically implement this style of programming using callbacks, functions that are called when the actions complete.
👉This is extremely imporant in browser. You don't want your user to not be able to click on something, or everything to stop when browser is getting data
19. Query parameter and key: 🤓
var serverURL = "/"
function getTranslationURL(text){
return serverURL + "?" + "text=" + text
👉What is "?"
Query parameter
👉what is "text="
A key
👉What is text
It is nothing but value
20. What is .catch() 🤓
Note about API error:
API errors are not rare, knowing how to handle errors are useful when the data is coming from server.
👉The catch() method is used for error handling in promise composition.
👉.catch() takes a callback and error is passed to as an argument to the callback.
👉The catch() method returns a Promise and deals with rejected cases only.
function errorHandler(error) {
// console.log("error","error occured");
alert("Something is wrong with our server. Please try again later");
.catch(errorHandler)
I hope so far you have gained the learnings for javaScript
If you liked my content, how about connecting with me?