The name "javascript in browser" is super funny. JavaScript was exclusively for browser before node came along. Since we started our first class using a CLI app which was run using node, this name is needed to differentiate.
querySelector()
If you know all of this, this video is not for you. It's aimed at beginners.
index.html
filealert
and prompt
for output and inputquerySelector()
querySelector()
.addEventListener("click", callback)
and click eventstextarea
input tag.value
of the tag. You can do this only inside event. There are two events which you can listen toonchange
on textarea, we will learn this method in next class while doing Reactonclick
on button, let's do this now.Every element on the page is represented as a property of an object. Remember objects? Think of it like this:
/**
* this is just for simplification and understanding
*/
var htmlPageObject = {
"input-text": <textarea></textarea>,
"input-btn": <button></button>,
};
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()
.
If this seems too much to understand, ignore it, come back to it after you have done some web dev. A lot of experienced devs too don't know about it. Knowing is definitely better.
Everything you do on a web page triggers an event. There are multiple events like onscroll
onsubmit
etc. and knowing about it will help you respond to user's needs. The more web dev you do, the more you'll know about these.
Good thing about these events is that you can plug your own callback
or functionality in each of these and introduce custom behavior. Think of the animation shown when user starts scrolling.
querySelector()
works on the principles of CSS selectors. It selects and returns the first element which matches the query.
You can open this mdn doc for reference. And then let's do some exercises.
What will be the query you would write for each one below? Select the first...
textarea
tag.btn-primary
.input-btn
.input
element with an attribute name='translator'
.Knowing this is extremely useful in web development. Useful in JS, in CSS and also in automated unit, integration and e2e testing.
More about querySelector()
on this mdn doc.
bonus blog: write a blog about the selectors. Have some complex quizzes to test the learning.
div
innerText
to write to this div dynamically when button click happensinnerText
writes text.innerHTML
write HTML directly.document.createElement()
,document.createTextNode()
to create textNode,insertBefore()
and appendChild()
. Explore these pieces and write blogs on it when you understand this.We did CLI exercies around leap year and prime numbers. For practice you should make both these apps now in browser. It would be much more visual and easy to use! :)
We have a JS app which takes user input, does processing and then shows an output! This is essentially what most apps do.
Think of posting a status on facebook. It takes your status via input box, you press post button and then it shows the posted status below in the newsfeed.
However, it does one thing more: making a call to server. Server is where you do heavy processing, it's the place where you can save your data. This is the reason when you post something from your laptop you (and others) can see it on their mobile i.e. other clients too.
This is called client server architecture in short. Client requests data, and or submits data. Server maintains data.
We'll learn how to make full fledged servers with data maintenance in levelOne where the training will be around full stack development.
Meanwhile, there are some BaaS (Backend as a Service) which you can explore to store your data, and do processing without setting up anything. See Firebase and AWS Amplify. These are two are the best and are most used in industry.
For now, we will see how to make a network call from the browser and talk to server.
text="testing"
Call the server above with different text and see the contents of text reflect back on what you sent.
Does this work for you?
fetch()
in your browser to call the server from JavaScript.xhr
was used extensively, you can read about it online.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.
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. This is asynchronous programming
.
How would we tell fetch()
what do with this data? By giving it a callback inside the .then()
of promise.
NOTE
Async programming, event loop, callbacks, promises etc. these things take time to wrap our heads around. However, these are important concept. You don't need to understand it right away, concentrate on programming apps for now. But before going to any interview, make sure you know these.
.then()
of the fetch callBONUS: Look into encodeURI()
and use it to make sure the URL is encoded. Learn why encoding is needed.
.catch()
takes a callback and error is passed to as an argument to the callback.find the URL on funtranslations.com
when everything works just replace the URL with the actual.
sometimes you work with mock APIs and then use PROD API in production. this is a good practice for that. generally, in real life we have env
variables which tells the software where it is hosted and depending on the environment the API and many other settings are used.
think of payment site, to test it while developing will the developer always use real credit card to test the site? No, that's why there are fake CC.
See the styling of https://bananaspeakpractice.netlify.app/ and make your app look pretty like this.
The best way to style the app like this is to start from scratch and remove any styling we have done during this video.
for markSix
you have to make this app, the same app which I made live.
for markSeven
take any of the translation APIs on the website and use it to create your own fun translation app. Give it your own style, maybe use some SVGs. Give it your own flair.
And if you don't get any ideas don't do much just change the color and font and you'll have a new app.
If you are watching it later and get doubts, ask on our Discord Server