Introduction and Setup For Modern JavaScript Fundamentals- DAY02(0N 100 DAYS CODING CHALLENGE)
Hi, folks, Welcome to Modern JavaScript Fundamentals. In this introductory Tutorial we'll take a look at the scope of the free tutorial. Follow along with this course and you'll learn about all the most important features of JavaScript.
1.1 Introduction
Hi, folks, Welcome to Modern JavaScript Fundamentals. In this introductory Tutorial we'll take a look at the scope of the free tutorial. Follow along with this course and you'll learn about all the most important features of JavaScript.
We're going to learn all of the essential concepts of JavaScript. Yep, all of them. After the introductory first section, we'll take a look at some of the fundamental concepts of the language, like how variables are declared and assigned, and the different data types and operators in the second section.
In section three, we'll focus on data structures, and look at arrays, objects, maps, and sets.
In section four, we'll see how we can control program execution and take a look at the conditional logic involving if, switch, and ternary statements. We'll also cover loops and iterators here.
Section five will see us move on to some more practical aspects of JavaScript, like how to work with the different types of data. And some of the built in APIs like JSON and Math. We'll also see how to work with dates and times. Functions are one of the most used parts of the language, as well as one of the most useful.
So section six will focus entirely on them. We look at some essential function concepts like scope, closures, prototypes, and the this key word. And we'll see how to work with different types of functions including arrow functions and generator functions.
In section seven, we'll look at a collection of different but widely used features of the language like AJAX, promises, destructuring assignments, regular expressions and classes.
Section eight will focus exclusively on working with the DOM. And the final section,
Section nine, will look at some of the more common web API's like the selector API, geolocation, web storage, and web workers. Don't worry if you've never written a single line of JavaScript before. By the end of the 100 days coding challenge, you'll be able to work with the language to leverage its strengths and steer clear of its weaknesses. And don't worry if you don't know any other programming languages at all. All concepts required to understand JavaScript will be explained in full. We've got a lot of material to get through, so let's move to the next to our first tutorial and get set up ready for the coding examples.
1.2 Setup
Related Links
Let’s get our development area set up and ready for coding! In this lesson I’ll show you how.
We're going to get a basic development area set up, ready to work through the various coding examples that I'll be showing you throughout the tutorial. During the tutorial we'll be using a variety of JavaScript versions. It will be a mixture of mostly ES5 and ES2015, but we'll also include some newer features such as ES Modules. ES2015 is now largely supported in most modern mainstream browsers, but ES modules did not have as much support yet.
For this reason, it's still best to use a transfiler to convert the latest JavaScript into a previous version of JavaScript that would be understood by a wider number of browsers. For this tutorial, I've chosen to use SystemJS with the Babel plugin because it's extremely simple to set up and requires very little configuration.
The repository for this tutorial is set up to use SystemJS out of the box. And while we won't need it til later in the course, we can go ahead and claim the repository at this point. You'll need to have the latest stable version of Node.js installed, as well as the Git version control system.
So if you don't have these already, head on over to nodejs.org and get git-scm.com and follow the installation instructions for your platform. So to start with then, we can clone the repository, which we can do on the command line. You can get the URL at the repository from GitHub.
Once the clone is complete, which basically just means that the repository has been copied from GitHub down to your local computer. We will then need to run npm install to install the project's dependencies. npm is the package manager for Node.js and allows us to install many, many useful packages for JavaScript development. Once this command is finished, everything should be ready to use.
Let's just take a quick look at what you'll get in the project directory once you've cloned the repository. There are a couple of files there for Git, the gitignore License and readme.md files. And there are some npm files as well, the package.json and the package-lock.json files. We can ignore these, they aren't related to the course material at all and just contain meta information for git and npm.
There is a config.js file which contains a small amount of configuration for SystemJS. We won't need make any changes to this throughout the course and again this can largely be ignored. There's also a very basic HTML file called index.html. This file loads SystemJS and the configuration file, and tells SystemJS to load a file called index.js. This index.js file is our playground, and is where I'll be adding most of the different examples that we'll work on.
There is another branch in the repository which contains individual files for each of the different lessons throughout the course. Just to separate out the various coding examples that we're going to be looking at. These are in a branch called completed-course, and you can look at these at your own leisure. Let's just open up the index.js file, it should contain just the use strict directive and a console.log statement. We'll be looking at strict mode in more detail later in the course.
The console.log statement just writes a message to the browser's console, but it can be very useful for debugging purposes and we'll be seeing it a lot throughout the course. As well as SystemJS the project also uses a tool called browser sync, which allows us to use a local web server.
And again, this is very useful for development purposes and is a very common practice in JavaScript development. We can run browser sync by running the command npm run serve in the command line. We'll first need to move into the directory that we've just cloned. We can then use browser sync by running the npm run serve command.
So this command should open up your default browser and load the index.html file from the repository in the browser. And I'm just gonna open up the console now. And in the console there you can see the working message that came from the console.log statement back in the index.js file.
One feature of browser sync is that it automatically watches our files and refreshes the browser whenever we save a file. So if we go back to the index.js file now, and let's just change the console.log statements.
When we go back to the browser, we should find that it has refreshed itself automatically and updated the log message. Great, so this is all the setup that we need to do right now. Let's move on and start learning JavaScript in section two tomorrow. #DAY2-(100 DAYS CODINGCHALLENGE)
-
6
LOGIN/REGISTER TO DOWNLOAD THE FREE SOURCECODES BELOW
For more information about the system. You can contact me @
Email –geeksourcecodes@gmail.com
Mobile No. – +254714643906
Or feel free to comment below.SUBSCRIBE TO OUR YOUTUBE CHANNEL BELOW TO WATCH MORE VIDEOS
Note: Source Code is only available for educational purpose, plz don’t use it for commercial purpose without the permission of the original author.
