Basic JS

Introduction

Computer programming

Programming is a way of giving instructions to the computer. These instructions are known as code, and computer programmers write code to solve problems or perform a task. The end goal is to create something: from a web page to AI.

When you open your computer or phone, everything you can see is there because someone wrote the code to make it happen. That's why computer programming is often described as a mix between art and science; it's technical and analytical, yet creative at the same time.

Watch the following video about the concept of programming keeping in mind these questions: Can you explain what is programming? What is code? What is the end goal of coding?

📽️ What is programming?

JavaScript language

If programming is giving the computer instructions, a programming language is HOW we write those instructions so that the computer will understand them. And since we are learning web development, we will be learning JavaScript, a programming language made to add functionality to HTML. With HTML we can do things like navigate to a page, or send a form, but we're going to need more powerful tools if we want to do more complex things.

With JavaScript we can make a page more interactive, which simply means that there's more communication between the user and the computer. Let's think of an example: We have a button in our web page. An interaction would be the user clicking this button. In this imaginary example we have some code instructing the computer to show a menu with fresh information when the user clicks the button. They will see this information and perform another interaction, like scrolling down or closing the menu. This is a cycle in wich the user and our website talk to each other, the user perfoms actions and the website reacts showing diferent pages, data, menus, etc.

Exercise

📖 This is a page with almost no Javascript. What type of content can you see? What types of interactions can you make? How does the page changes with those interactions? Now go to to your email and ask yourself the same questions.

Adding JavaScript to your page

The structure and foundation of our website is HTML, and in order to add functionality to it with JavaScript, we have to create a JS file and link it to our HTML project. Follow the instructions in this 🖥 tutorial, which will help you create a JavaScript file, add it to your web page and test that it is working. When you're following the tutorial in step 5, instead of opening your index.html directly, you can open it from VSCode clicking the "Go live" button you've been using to work on your HTML projects.

📖 For more information on Chrome Developer Tools , read the tutorial Get Started With Running JavaScript In The Console provided by Google.

Goals

• Understand how to give instructions to computers.
• Answer to these questions: "What is JavaScript?", "what does it look like?" and "what can it do?"
• Learn about the tools available for developers.
• Understand the tools that JavaScript provides you. What are variables, conditionals, arrays and functions?
• How to use the DOM and add JavaScript events to it.

Extra reading

📖 Javascript: JavaScript — Dynamic client-side scripting. Don't try to understand everything, just get the general idea of what JavaScript is and what we can achieve with it. Can you explain the story behind this language? How do engines work? What can and can't JavaScript do in the browser? What are the 3 things that make JavaScript unique?

📖 Interpreted versus compiled code: Difference between Compiled and Interpreted Language. Now that you know the differences, JavaScript is it a compiled or interpreted programming language?

📖 Server-side versus client-side code: Components: Server-Side vs. Client-Side that will give you a wide picture on what it is Rendering, Interactivity, Performance, but at this point just try to explain the difference between client-side code and server-side code, and how is JavaScript involved.