sumn2u / learn-javascript

A book that teaches JavaScript

Learn JavaScript

Overview

**This book offers a comprehensive introduction to programming and JavaScript, designed to impart fundamental knowledge in a clear and organized manner. Its content delves into foundational principles and core concepts, presented in simple language to facilitate easy comprehension. The book is thoughtfully structured, providing in-depth explanations and accompanying notes enriched with illustrative examples, thereby enhancing the reader's understanding of the subject matter.

Furthermore, the inclusion of practical exercises at the end of each section adds significant value to the learning experience, allowing readers to apply the acquired knowledge and reinforce their skills. This thoughtful combination of theoretical explanations, real-world examples, and hands-on exercises ensures a well-rounded educational approach, making the book an invaluable resource for beginners looking to grasp the essentials of programming and JavaScript in a professional and systematic manner.**

Table of Contents

1. Introduction
2. Typographic Conventions
3. Support the Project
4. Installation and Usage Instructions
5. Structure
6. Contributing Guidelines
7. Contributors
8. Contact Us
9. License Information

📚 Introduction

Learn JavaScript: Beginners Guide provides a foundational understanding of programming and JavaScript. It covers the core concepts in a simple and organized manner, offering in-depth information and notes along with examples to facilitate comprehension. Each chapter includes exercises to reinforce your learning.

What You'll Learn 😎

This meticulously crafted book caters to a diverse audience, ranging from novice learners taking their first steps into the world of programming to seasoned developers seeking to enhance their skills specifically in the domain of JavaScript. Its strength lies in providing a thorough and inclusive initiation into the JavaScript programming language.

The book's structure is intelligently organized into three distinct sections, each catering to different aspects of JavaScript learning. The first part, comprising the initial 14 chapters, meticulously covers the fundamental concepts of JavaScript. These chapters are designed to build a strong foundation, ensuring that readers, regardless of their prior experience, grasp the core principles of the language comprehensively.

Moving forward, the subsequent four chapters transition seamlessly into the realm of web browser programming using JavaScript. This section not only imparts theoretical knowledge but also provides practical insights into real-world applications, enabling readers to understand how JavaScript functions within the context of web development.

The book doesn't merely stop at the basics; it goes the extra mile by dedicating the final two chapters to miscellaneous topics that are pivotal in mastering JavaScript.

🚀 Code, and What to Do With It

Code is the heart of any program, and this book contains numerous code examples. To master programming, it's essential to read and write code diligently. Don't rush through the examples; take your time to understand them thoroughly. The same applies to the exercises – attempt to solve them before checking the solutions. Consider running your code in a JavaScript interpreter to ensure it works correctly. Experimenting and going beyond the exercises will enhance your skills.

By adding emojis and organizing the content, you can make the text more engaging and visually appealing.

Typographic conventions

In this book, text written in a monospaced font represents elements of a program. This can be a self-contained fragment or a reference to part of a nearby program. Programs, like the one shown below, are written in this way:

const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}

Sometimes, the expected output of a program is written after it, preceded by two slashes with a Result, like this:

console.log(txt);

// Result: txt = '45491625'

Support the Project ⭐

If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us get visibility and allow the community to grow. 🙏

Installation and Usage Instructions

To get started with this project, follow these steps:

1. Clone this repository.
2. Move to the 'learn-javascript' directory.
3. Install dependencies using yarn or npm install.
4. Run yarn start command.
5. Visit http://localhost:4000 for a preview.

Structure

The main contents are under the charset of each language directory . For English, use en directory.

directory | description

learn-javascript
├── _book                   # compiled version of contents
├── _layouts                # layout for rendering book/website
├── en                      # content of book in english language
├── fr                      # content of book in french language
├── np                      # content of book in nepali language
├── tr                      # content of book in turkish language
├── LANGS.md                # supported languages
├── books                   # books in pdf and epub formats with translation
├── book.json               # configuration for book
└── ...

Contributing Guidelines

Contributions to this project are welcome. If you want to contribute, follow these steps:

1. Create an issue to discuss your proposed changes or improvements.
2. Fork and clone the repository.
3. Make your changes locally.
4. Push your changes and create a pull request.

Tips

For Adding new documents : Create *.md file under <lang>/chapter-<n>/ directory.

Contributors

We would like to thank the open-source community for their valuable contributions to this project

Contact Us

If you have any questions or feedback, please don't hesitate to contact us at [email protected], or reach out to Suman directly. We hope you find this resource helpful 💜.

License Information

This project is licensed under the Apache License 2.0 , which means that you are free to use, modify, and distribute the code as long as you comply with the terms of the license.

learn-javascript's Issues

CallBack function and CallBack Hell

Call back is import topic in js.

I wanna add the better styling for the content!!!

Is your feature request related to a problem? Please describe.
overall site looks very fabulous and i want to add some styling configuration to make learning more interesting.

Describe the solution you'd like
i want to create some styling for the content to learn as i am the js certified by LinkedIn i can make it Feasible.

JavaScript Interview Questions [ Updated: Basic Level ]

We already have interview questions, but they are limited. It would be nice to have more questions to help candidates better prepare themselves.

Addition of `for ... of` loop

@sumn2u Please assign me.

Adding Project Section [Part I].

I am a learning developer and when it comes to learning a programming language I feel along with strong grip of theory and rules one should have hands on learning of that language.

As there is already a exercise section ,I feel there can be a project section where few small projects are suggested and explained so that the reader understand how they can use the learned concepts in application.

Please let me know your thoughts on this !!
Thankyou.

Translation to [hindi]

Dear @sumn2u,

I trust this message finds you in good health. I have come across a document, and I would like to offer my assistance in translating it into Hindi. I discovered this opportunity during Hacktoberfest, and I am keen to contribute under that specific tag.

Please consider assigning this task to me, and I will ensure a professional and accurate translation.

Warm regards,
Somuya Khandelwal.

add license to readme file

Describe the bug
the license hasnt been mentioned on the readme file

To Reproduce
Steps to reproduce the behavior:

1. Go to 'readme.md'
   scroll all the way down

Adding reverse method in array

Adding reverse method in array.

Translation- [German]

Dear @sumn2u ,

I trust this message finds you in good health. I have come across a document, and I would like to offer my assistance in translating it into German. I discovered this opportunity during Hacktoberfest, and I am keen to contribute under that specific tag.

Please consider assigning this task to me, and I will ensure a professional and accurate translation.

Warm regards,
Ayushi Rastogi.

Table of Content

Can i create the table of content (index) which helps to user read the documentation

Example:

JavaScript interpreter

I want to add details about javascript interpreter.

Fixed a bug in for-each.md in arrays

Bug

Clearly there is a bug, as we should not see {% hint style="warning" %} and {% endhint %}

ECMA script

ECMA script is the standard Nature of a JS. Before Starting the JS u must also Know about ECMA script

JavaScript Interview Questions [ Intermediate Level ]

A curated list of JavaScript questions that helps learners to improve their understanding of the language and develop the skills they need to be successful JavaScript developers.

Adding more exercise based on chapter

There is hardly ten exercise available. I want to add more exercise on it.

Please assign me this

Testing and debugging chapter

It would be beneficial to include a dedicated chapter discussing testing frameworks such as Jest and Mocha, as well as covering unit testing, debugging techniques, and browser developer tools.

I want to add more Interview questions in Interview Questions Section

@sumn2u Can you assign me this issue

Web APIs and AJAX Chapter

Would be nice to have a separate chapter that talks about Web APIs and AJAX as they are fundamental for creating interactive and dynamic web applications

Examples of code(mostly used function) in String section and Complete String section

Space and Time complexity

Considering space and time complexity is a significant aspect of programming that ensures code efficiency, scalability, and maintainability. Having a brief introduction to these concepts, followed by example, can greatly benefit JavaScript developers.

Translate

I wish it could be translated by many different language.

Adding Project Section [Part II].

This is the second part of adding project section as discussed here

Add JavaScript ES6 Concepts Documentation

Issue Title:
Add JavaScript ES6 Concepts Documentation

Is your feature request related to a problem? Please describe.
The current issue is a lack of comprehensive documentation on JavaScript ES6 concepts within the repository. Contributors and newcomers to the project may struggle to understand and leverage modern JavaScript features due to this gap.

Describe the solution you'd like
I would like to see the repository updated with thorough documentation on ES6 concepts, which should include explanations, code examples, and best practices for ES6 features like arrow functions, classes, destructuring, template literals, let and const, and more.

Describe alternatives you've considered
I haven't considered any alternatives as adding ES6 documentation directly to the repository seems to be the most straightforward and inclusive solution.

Additional context

• The existing documentation in the repository.
• The significance of up-to-date JavaScript knowledge in web development.
• My commitment to maintaining the documentation and ensuring it stays current with future ES6 updates and new JavaScript features.

Addition of `break` and `continue` statement

Design Patterns in JavaScript

It would be nice to have a chapter that describes design patterns in JavaScript. Design patterns are proven solutions to common software design problems that help in writing maintainable, scalable, and efficient code.

Client-side Frameworks and Libraries

It would be nice to have a separate chapter that describes client-side frameworks and libraries, as this would equip developers with the knowledge and skills needed to efficiently create modern, feature-rich web applications that meet user expectations and industry standards.

Improvement in operator section

I want to update operator section with following heading:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Ternary Operators
Bitwise Operators
typeof Operator

Modify Comments section

Is your feature request related to a problem? Please describe.
Update comments section

Describe the solution you'd like
I want to add real like use of comment as examples:

// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";

I would like to restructure the markdown in following format

# Comments
## Types of Comments
### Single Line comments
### Multi Line comments
## Real life examples of comments

Introduce single thread nature chapter

JavaScript's single-threaded nature is essential for its simplicity, compatibility, and safety, but it also requires careful handling of long-running or CPU-intensive tasks to maintain a responsive user experience. A chapter on it would be beneficial for readers.

Missing markdown code in Number:Math

Changing Twitter logo in the Website

As seen in the image below, website has same old twitter logo, I want to change it to new one.

Please assign me.

i want to add remaining built in string functions can you assign that work to me??

Security and Performance

Security and performance are crucial in the development process to prevent breaches, compromised data, and poor user experiences. A dedicated chapter on these topics can equip developers with the necessary knowledge and tools to build secure and efficient applications

Building and Deploying JavaScript Applications

It would be helpful to have a separate chapter on building and deploying JavaScript applications, as the process of taking code from development to production involves a number of important considerations and steps.

Refine ReadMe.md file. Edit language and formatting (English).

Though I have not yet seen any blatant errors in the readme file, I would like to propose some minor changes to the formatting and language. For example, in the Introduction section, the book title is referenced. The title should be in italics (note: this is not a personal gripe but proper English formatting). Next, I would like to go through the file and evaluate the grammar and language used.

I'd be happy to take this on under the Hactoberfest tag!

Corrections to be added to the englis version

While taking the chapters based on their english version to tanslate into french. I've nitices in some points, errors either grammatical or orhographic. Other orrors involve also typo on some links.

I report it here cause after having done with the translation, I will also tackle down the task.

Adding `for ... in` loop in Looping section

@sumn2u Please assign me.

Is there an idea to translate it to other languages?

Hi,
if there is, I would like to translate it into Turkish.

Modules and tooling chapter

It would be helpful to include a separate chapter that covers topics such as JavaScript modules (specifically ES6), bundlers (such as Webpack and Rollup), package managers (including npm and Yarn), and build tools

I want to add some more contents in Interview Questions

I want to add some questions in Interview Questions for Basic and Intermediate sections.

@sumn2u Please assign this issue to me for working more further

JavaScript Interview Questions [ Basic Level ]

A curated list of JavaScript questions that helps learners to improve their understanding of the language and develop the skills they need to be successful JavaScript developers.

Screen properties table has duplicates

Property	Description
height	Represents the pixel height of the screen.
left	Represents the pixel distance of the current screen’s left side.
pixelDepth	A read-only property that returns the bit depth of the screen.
top	Represents the pixel distance of the current screen’s top.
width	Represents the pixel width of the screen.
orientation	Returns the screen orientation as specified in the Screen Orientation API
availTop	A read-only property that returns the first pixel from the top that is not taken up by system elements.
availWidth	A read-only property that returns the pixel width of the screen excluding system elements.
colorDepth	A read-only property that returns the number of bits used to represent colors.
height	Represents the pixel height of the screen.
left	Represents the pixel distance of the current screen’s left side.
pixelDepth	A read-only that returns the bit depth of the screen.
top	Represents the pixel distance of the current screen’s top.
width	Represents the pixel width of the screen.
orientation	Returns the screen orientation as specified in the Screen Orientation API

As you can see above, the height, left, pixelDepth, top, width, orientation properties duplicated.

You can find file here: https://github.com/sumn2u/learn-javascript/blob/main/en/browser-object-model-bom/screen.md

List of learning resources

A well-structured list of learning resources can be incredibly helpful for people looking to excel in JavaScript, whether they are beginners or more experienced developers. Create a list of resources that are available to public including articles, books, videos and posts.

Readme file for Error Handling

Is your feature request related to a problem? Please describe.
The readme file of error handling folder is empty I would like to improve it by updating about the error handling introduction and it's types which are explained in other two files.

Additional context
Assign me this issue I'll work on it and add the label of hacktoberfest @sumn2u

JavaScript Interview Questions [ Advance Level ]

A curated list of JavaScript questions that helps learners to improve their understanding of the language and develop the skills they need to be successful JavaScript developers.

Server-side JavaScript

A chapter on server-side JavaScript would give learners a full understanding of its applications in both front-end and back-end development, preparing them for diverse web development challenges. So, it would be nice to have it here.

Adding nested `if` example in if section

Typo in exercises section

Small typo missing "t":
"The Get the Tiles! problem"
https://github.com/sumn2u/learn-javascript/blob/main/en/exercises/get-the-titles.md

Translation - [French][Part II]

Translating this book can be a great way to expand its reach and connect with more readers. It's worth considering translating the chapters to make the book accessible to a wider audience. As agreed here the part II will consider all remaining chapters including exercises/ loops/ miscellaneous/ objects/ promise-async-await chapters.

Translation - [French][Part I]

Translating this book can be a great way to expand its reach and connect with more readers. It's worth considering translating the chapters to make the book accessible to a wider audience. As agreed here the initial part will consider all chapters excluding exercises/ loops/ miscellaneous/ objects/ promise-async-await chapters.