Learn JavaScript

Learn JavaScript from Zero to Pro

Web Development4.6(59)11h 21m54 lectures18 sections

What you'll learn

  • Learn the basics of the JavaScript language
  • Write code the right way
  • Understand the core concepts of programming
  • Get to know the advanced features of the language
  • Handle events in web pages
  • Design interactive interfaces for websites
  • Use libraries in web development
  • Develop dynamic web applications

About this course

This course teaches the JavaScript language from the beginning. It is the language that makes web pages alive and interactive. You start with highlights that introduce the course, then learn the basics of the language, how to write code and the core concepts of programming. After that you move on to the advanced features in the following lectures, and learn to handle events in web pages and design interactive interfaces, then use libraries to develop web applications. This course suits anyone who wants to learn JavaScript to build dynamic websites and web applications, whether you are a beginner in programming or have some knowledge and want to expand it. You need no previous experience with the language, because the lessons start from the foundation and move forward step by step, with many lectures divided across different topics, and at the end of the course you will find downloadable attachments. All you need is a computer, a browser and the desire to learn and practice. By the end you will be able to write JavaScript code yourself, handle page events, and build dynamic, interactive web pages with confidence.

Expected outcomes

  • Write JavaScript code efficiently
  • Understand basic and advanced concepts
  • Develop dynamic web applications
  • Implement interactivity using JavaScript
  • Enhance your programming skills
  • Apply modern techniques in web development

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.
4.6
★★★★★
59 reviews
5★
34
4★
25
3★
0
2★
0
1★
0
  • ★★★★★Mohmed A.·منذ 5 شهرشاهد 100٪

    دورات رائعه سهله وبسيطه للفهم لجميع المستويات

تم عرض كل التقييمات (1)

Course content

1

Introduction to the Educational Course and Content Overview

2 lectures
  1. Course HighlightsA quick overview of the JavaScript course: the tools and NetBeans, then basics, conditions, loops, strings and object-oriented programming, followed by DOM, events, cookies, jQuery and drawing.7:38
  2. The LectureAn overview of the Java learning material: basics, data types and operators, the coding tool, loops, methods, then classes, inheritance and abstract classes, with the material split into two levels.7:57
2

Introduction to JavaScript and Required Tools

2 attachments
  1. Lecture One
  2. Lecture Two
3

Variables, Effects, and Operations

4 lectures
  1. Lecture One
  2. Lecture Two
  3. Lecture Three
  4. Lecture FourContinues the types of operators in programming basics: comparison operators such as equal and greater than, logical operators and, or and not, and shorthand assignment operators such as plus equal.6:05
4

Conditional Statements and Code Flow Control

4 lectures
  1. Lecture OneExplains the logic level in JavaScript and conditional statements, using if, else and else if chains to test a value such as a student's grade or a salary, with input conversion via parseFloat.14:21
  2. Lecture TwoContinues JavaScript conditional statements with if and else if, using a salary-based tax example that applies and to set a range, and a student grade example.18:27
  3. Lecture ThreeRedoes the grade example with different logic, then explains switch case with a calculator program that reads two numbers and offers a menu of operations, ahead of the conditional operator.17:59
  4. Lecture FourExplains the conditional operator as a compact alternative to if else that assigns a result to a variable based on a condition in one line, and also nested if statements.5:55
5

Loops

4 lectures
  1. Lecture OneExplains loops in JavaScript, specifically the for loop: printing a message several times, computing a factorial counting up and down, and changing the counter step.23:44
  2. Lecture TwoExplains nested loops, a for loop inside another for loop, and applies them to print a multiplication table, showing how the outer counter holds still while the inner one changes.13:25
  3. Lecture Three17:49
  4. Lecture FourContinues loops with a while example for a password that repeats under two conditions, a wrong password and attempts below a limit, then explains the break and continue keywords in a for loop.9:42
6

Dividing Code into Functions

5 lectures
  1. Lecture OneIntroduces the difference between non-structured programming, where code is repeated by copy and paste, and structured programming, which splits code into functions that can be called multiple times.13:02
  2. Lecture TwoContinues JavaScript functions with practice creating and calling them, and how to separate them into an external file and link it to the page with a script tag and its path.16:22
  3. Lecture ThreeExplains function parameters: instead of hardcoding a value inside the function, values are passed in at call time, with examples such as summing two numbers read from the user and finding the larger one.19:35
  4. Lecture FourExplains the return value of a function: instead of showing the result itself, the function returns it so further work can be done on it, such as a function totaling a student's marks and another computing the percentage.19:09
  5. Lecture FiveReviews JavaScript functions through practical examples of functions that return a value, such as computing a factorial and deciding a grade from a score, along with default parameters and return.12:29
7

Working with Arrays

4 lectures
  1. Lecture OneExplains arrays mathematically and in programming: a group of elements under one name accessed by index, one-dimensional or two-dimensional, and why they replace creating a separate variable for each value.3:24
  2. Lecture TwoExplains working with arrays: declaring them in two ways, filling them and printing them in reverse with a for loop, and declaring an empty array then populating it.14:53
  3. Lecture ThreeApplies arrays in an example that reads values from the user and fills the array with a for loop, then works with three arrays where the third holds the sum of the first two, and prints them.14:37
  4. Lecture FourContinues arrays with an example comparing user input to passwords stored in an array using a loop, then useful array functions such as sort, reverse, push and pop.16:25
8

Working with Text Programmatically

2 lectures
  1. Lecture OneExplains working with strings in JavaScript: reading characters and their codes, concatenating, indexOf, substring, replace to swap a character, and testing whether a string starts or ends with given text.20:50
  2. Lecture TwoCovers working with Date and time and the functions that get its parts such as day, month and year, then Number and the Math functions such as square root.11:50
9

Object-Oriented Programming (OOP)

5 lectures
  1. Lecture OneIntroduces object-oriented programming in JavaScript: creating a class that holds several functions, taking an object from it and calling its functions, and how this helps organize code.9:38
  2. Lecture TwoContinues object-oriented programming by building a class with add, subtract, multiply and divide functions, a switch case menu, and calling the functions from an object taken from it.13:06
  3. Lecture ThreePractices class and object in JavaScript: taking several objects from the same class, calling a function on them, and assigning a value such as the id with set and get functions without a constructor.17:17
  4. Lecture FourContinues class and object with a constructor and set and get functions, then a rectangle class with length and width that computes its area, calling functions on each object and linking the file to an HTML page.11:09
  5. Lecture FiveExplains inheritance in object-oriented JavaScript: how a new class can build on an existing class, take all its members and extend them, calling the parent constructor through super.20:31
10

Working with the Browser Programmatically

4 lectures
  1. Lecture OnePrepares the ground for the JavaScript Browser Object Model by building HTML buttons wired to functions that show a message or a confirm box where the user picks OK or Cancel.14:28
  2. Lecture TwoContinues the Browser Object Model with functions that open a new window at a URL via window.open, close the current window and show screen dimensions, all tied to buttons.9:42
  3. Lecture ThreeExplains the location object in the Browser Object Model, the URL at the top of the browser, changing it with assign, the difference between going to a new page and replacing in place, and reading info like host and protocol.6:44
  4. Lecture FourContinues the Browser Object Model with the history object to move back and forward between pages with back, forward and go buttons, then the navigator object to show browser info such as its name, version and cookie support.8:04
11

Working with Web Page Content and Tools

5 lectures
  1. Lecture OneExplains the Document Object Model and how the document represents page components, reaching an element by its id, changing its content with innerHTML, and tying it to a button.15:14
  2. Lecture TwoHandles form components through the DOM by giving fields a name and id, reading and writing their values with getElementById, as groundwork for calculations on form values.9:28
  3. Lecture ThreeCompares ways to reach page elements through the DOM: id with innerHTML for elements without a value, name or value for input fields, then builds a button calculator and leads into input validation.18:51
  4. Lecture FourApplies input validation to the DOM-based calculator: checking a field is not empty and the value is a number, showing an error message and focusing the field, through a function that returns true or false.13:54
  5. Lecture FiveA practical Android Studio example of adding two numbers, showing how to program a button to read the entered values, add them and display the result, as an application of writing Java code in the app.10:16
12

Programming Web Page Events

3 lectures
  1. Lecture OneDefines JavaScript events such as click, double click, mouse move, focus and key press, and how a developer programs the page to respond to each one.5:49
  2. Lecture TwoApplies events through examples: asking for a password with prompt in a loop on page load, a mouse move event, and a focus event on a field.21:55
  3. Lecture ThreeContinues events with examples: passing this to a function so it handles the clicked element, the onload event, changing a value to uppercase, and the mouseover and mouse out events.24:48
13

Saving User Data with JavaScript Cookies

2 lectures
  1. Lecture OneExplains cookies in JavaScript: what they are, how to create them, list all those on the device, delete them and check one, with a demo interface of fields and buttons.19:03
  2. Lecture TwoBuilds the cookies project hands-on: creating a cookie with a name, value and expiry, then functions to list all cookies, delete them and fetch one, wired to the page buttons.12:23
14

Regular Expressions

2 lectures
  1. Lecture OneIntroduces Regular Expressions and the idea of comparing a value against a pattern, then a first example creating a regex object and testing whether a word exists inside a text with test.15:37
  2. Lecture TwoDevelops the Regular Expression example by validating user input: text ending with a given word or dollar sign, input limited to letters a to z, and substitution with replace.24:11
15

Integration XML/JSON/JavaScript

2 lectures
  1. Lecture OneDefines XML and JSON and how they relate to JavaScript, building an XML file with records and tables, and reading it in code to reach a specific node and its children.21:44
  2. Lecture TwoContinues XML and JSON with JavaScript by building an XML file for a company and its employees, then a JSON file with the same data, converting it to an object with parse and reading fields like first and last name.10:23
16

Working with jQuery

1 lectures
  1. LectureIntroduces jQuery as a framework built on JavaScript, how to download the file and add it to a page, then wiring buttons to click events and selecting elements instead of using getElementById.13:34
17

Drawing On Canvas

2 lectures
  1. First LectureExplains drawing on a web page with JavaScript through the canvas element and its ctx context, to draw rectangles, circles, lines and filled paths, leading into the p5.js library.13:07
  2. Second LecturePresents the p5.js drawing library: downloading the file and linking it to the page, building a sketch with setup and draw without a manual canvas, and drawing rectangles and circles that follow the mouse.14:45
18

Add-ons

1 attachments
  1. Download Attachments Here

Instructor

Eng. Azab Mohamed Azab

Eng. Azab Mohamed Azab

Lecturer at the Arab Academy for Science, Technology and Maritime Transport, and the Egyptian Ministry of Interior, specializing in technology and information.
69K views28 courses

Related courses