1.2 Introduction to JavaScript

9 min read
10.1k
Updated: September 28, 2023

In this lesson “Introduction to JavaScript,” describe the historical development of JavaScript, demonstrate the execution of JavaScript code within a web browser’s console, and illustrate the utilization of console.log statements in JavaScript for displaying values.

What is JavaScript?

JavaScript, often abbreviated as JS, is a pivotal programming language in the realm of the World Wide Web, operating alongside HTML and CSS. It was conceived by Brendan Eich in 1995 and has since evolved into an indispensable tool for web development.

As of 2023, a staggering 98.7% of websites employ JavaScript for client-side functionality, frequently incorporating third-party libraries. Virtually all contemporary websites harness the power of JavaScript, and modern web browsers, spanning desktops, gaming consoles, tablets, and smartphones, include JavaScript interpreters, establishing JavaScript as the most widespread programming language in history.

JavaScript constitutes three core technologies that every web developer must master:

  1. HTML (HyperText Markup Language): HTML serves to delineate the content and structure of web pages. It defines elements and layouts such as headings, paragraphs, images, links, and forms.
  2. CSS (Cascading Style Sheets): CSS is utilized to dictate the presentation and visual aesthetics of web content. It governs layout, colors, fonts, and the overall visual identity of a webpage, fostering separation between design and content for adaptability and customization.
  3. JavaScript: JavaScript introduces interactivity and dynamic behavior to webpages. Developers leverage JavaScript to craft responsive and interactive features like form validation, animations, and real-time updates, all without necessitating full page reloading.

For individuals acquainted with other programming languages, it’s worth noting that JavaScript is a high-level, dynamically-typed, and interpreted programming language amenable to both object-oriented and functional programming paradigms.

JavaScript’s syntax draws inspiration from Java, its first-class functions borrow from Scheme, and its inheritance mechanism is rooted in Self. However, prior knowledge of these languages or associated terms is not a prerequisite for learning JavaScript. The moniker “JavaScript” can be misleading, as it diverges substantially from the Java programming language, aside from some superficial syntactic resemblances. Over time, JavaScript has transcended its origins as a scripting language to emerge as a robust and efficient general-purpose language. The latest iterations of the language introduce new features tailored for substantial, large-scale software development.

What is JavaScript? A high level definition!

JavaScript is a high-level, object-oriented, multi-paradigm programming language.
Let’s break down each part of this definition:

High-level: JavaScript is considered a high-level programming language, which means it is designed to be human-readable and easy to understand. High-level languages abstract away many low-level details of the computer’s hardware, making it more convenient for developers to write code without worrying about specific machine-level instructions.

Object-oriented: JavaScript is an object-oriented programming language (OOP), which means it provides mechanisms for organizing code and data into reusable structures called objects. Objects in JavaScript can have properties (data) and methods (functions) associated with them, allowing for modular and organized code design.

Multi-paradigm: JavaScript is a multi-paradigm programming language, which means it supports multiple programming paradigms or styles. In addition to being object-oriented, JavaScript also supports procedural programming (where code is organized into procedures or functions), functional programming (where functions are treated as first-class objects), and even some aspects of declarative programming (where the focus is on what the program should accomplish rather than how to achieve it).

ALSO READ:  2.10 Coding Challenge-2: Calculate Grade Average

Overall, JavaScript is a versatile language that can be used for various purposes, including creating interactive websites, developing server-side applications, building mobile applications, and even creating desktop applications. Its combination of high-level features, object-oriented principles, and support for multiple programming paradigms makes it a powerful and widely-used language in the field of web development and beyond.

History of JavaScript

JavaScript was created by Brendan Eich in 1995. It was developed while Eich was working at Netscape Communications Corporation, a company known for its early web browsers. Initially, the language was named “Mocha” during development, but it was later renamed “LiveScript” before finally being called “JavaScript.” The name change to JavaScript was partly due to a marketing collaboration with Sun Microsystems, which wanted to capitalize on the popularity of its Java programming language at the time.

Microsoft recognized the potential of JavaScript and introduced its own version, called “JScript,” to be used in its Internet Explorer web browser. This move by Microsoft created a situation where web developers had to consider both JavaScript and JScript when building websites, leading to compatibility challenges and browser-specific scripting. This period of competition between JavaScript and JScript resulted in the need for web developers to write code that worked in both browsers.

JScript, as developed by Microsoft, was similar in many respects to JavaScript, but there were some differences. These differences in how JavaScript and JScript interpreted code led to inconsistencies and compatibility issues in web development. Web developers often had to write conditional code to accommodate both JavaScript and JScript, which added complexity to their work.

Despite the challenges posed by the coexistence of JavaScript and JScript, JavaScript continued to gain popularity as a scripting language for web development. To address the compatibility issues, efforts were made to standardize the language. This led to the creation of ECMAScript, which is a standardized specification for scripting languages. JavaScript is often considered the de facto implementation of ECMAScript, and this standardization helped improve cross-browser compatibility.

JavaScript continued to evolve and mature over the years. New versions of ECMAScript were introduced, with each version adding new features and capabilities to the language. JavaScript’s versatility and wide adoption led to its use not only in web browsers but also in server-side development through technologies like Node.js. Additionally, various libraries and frameworks, such as jQuery, Angular, and React, were developed to simplify web development, contributing to JavaScript’s status as a mature and powerful programming language.

In summary, JavaScript’s history is marked by its creation at Netscape, its adoption by Microsoft and the resulting compatibility challenges, its growth through standardization with ECMAScript, and its maturity as a versatile language for web and server-side development. This history highlights JavaScript’s evolution from a simple scripting language to a critical component of modern web development.

ALSO READ:  2.3 JavaScript Data Types: The Building Blocks of Programming

JavaScript vs. ECMAScript (What are the differences?)

JavaScript is a widely used programming language, and it is often implemented following the ECMAScript specification.

ECMAScript is a scripting language specification. It defines the rules and standards that a scripting language should follow. JavaScript is often considered an implementation of the ECMAScript specification. In other words, JavaScript adheres to the ECMAScript standard, and when you write JavaScript code, you are essentially writing code that follows the rules and guidelines outlined in the ECMAScript specification.

Key points to clarify the JavaScript vs. ECMAScript:

1. JavaScript is a popular implementation of the ECMAScript standard. When people refer to JavaScript, they are typically talking about the specific programming language that is used in web development.

2. ECMAScript is not a programming language itself, but a specification that defines how a scripting language should work. This specification is maintained by the Ecma International organization.

3. Over time, new versions of ECMAScript have been released, each introducing new features and improvements to the language. JavaScript’s engines in web browsers and other environments implement these versions of ECMAScript. For example, ECMAScript 6 (ES6) introduced significant enhancements to JavaScript, such as arrow functions, classes, and modules.

4. When developers talk about JavaScript compatibility, they often mean that their code adheres to a specific version of ECMAScript. For example, if a developer says their code is “ES6-compatible,” it means the code follows the ECMAScript 6 specification.

Execute JavaScript in the browser developer tools

So, let’s write our very first line of JavaScript code. For now, we will do that in the browser’s developer tools, just to get started as quickly as possible. We will then switch to the code editor, which we will set up in the next lesson.

The developer console is a valuable tool for quickly testing and experimenting with JavaScript code. While it’s not typically used for building complete applications, it’s excellent for debugging and learning the language’s basics. As you progress, you’ll transition to using a code editor for more extensive projects.

Opening Developer Tool

Make sure to open Google Chrome. The JavaScript developer console allows us to write and test JavaScript code, making it very useful during development, for example, to fix errors. Of course, we don’t write real applications using this console, but for now, let’s use it as a good and easy way to write some JavaScript here.

Here’s a step-by-step guide to help you get started quickly:

  1. Open Google Chrome: Launch Google Chrome if it’s not already open.
  2. Open Developer Tools:
    • On Mac: Press Command + Option + J on your keyboard.
    • On Windows: Press Ctrl + Shift + J.
  3. Alternatively, you can open the browser’s developer tools using the following methods:
    • Press F12 on your keyboard.
    • Right-click on a web page element and select “Inspect.”
  4. Once you have the developer tools open, navigate to the “Console” tab. This is where you can type and run JavaScript code.
  5. In the “Console” tab, you’ll see a blinking cursor, indicating that you can start typing your JavaScript code directly.
  6. To write your first line of JavaScript code, simply type it in. For example:
console.log("Hello, JavaScript Tutorial!");
  1. Press Enter to run the code.
  2. You should see the output of your code displayed in the console, which, in this case, will be “Hello, JavaScript Tutorial!”
ALSO READ:  2.11 Type Conversion and Coercion in JavaScript
JavaScript (console.log())- BotBoxAI

This simple example showcases the power of JavaScript for outputting information to the console, which is a valuable tool for debugging and understanding how your code works.

Definition of console.log():
console.log() is a JavaScript function used for printing messages or values to the browser’s console. It’s a commonly used tool for debugging, monitoring variables, and providing feedback during web development. When you use console.log(), the specified content is displayed in the console, allowing you to inspect and troubleshoot your JavaScript code.

As you progress through this tutorial, you’ll delve deeper into JavaScript’s capabilities and learn more advanced techniques. We’ll revisit and expand on the use of console.log() in later lessons to help you become proficient in using JavaScript for web development.

Avatar for Amit

Amit (16)

Hello! I'm Amit Kumar, a passionate teacher specializing in web development and digital marketing. With several years of experience in the industry, I am dedicated to sharing my knowledge and expertise to empower aspiring learners like you.

Teaching Philosophy:

I believe in creating a dynamic and engaging learning environment where students can thrive. My teaching approach focuses on hands-on experience, practical applications, and real-world examples. I strive to make complex concepts understandable and enjoyable, ensuring that you not only grasp the fundamentals but also develop the skills necessary to excel in web development and digital marketing.

Web Development Expertise:

As a web development instructor, I am well-versed in HTML, CSS, JavaScript, and various frameworks such as React and Angular. I will guide you through the process of building responsive and user-friendly websites, exploring topics like front-end development, back-end integration, database management, and more. Together, we will delve into the latest trends and best practices in web development, equipping you with the tools to create stunning online experiences.

Digital Marketing Mastery:

In the rapidly evolving digital landscape, digital marketing is crucial for businesses to thrive. Through my digital marketing courses, I will help you navigate the intricacies of search engine optimization (SEO), social media marketing, content strategy, email marketing, and analytics. Gain insights into effective marketing techniques, harness the power of data-driven decision-making, and learn how to craft compelling campaigns that drive results.

Passion for Teaching:

Teaching is not just a profession for me; it's my passion. I find great joy in witnessing my students grow and succeed. I am committed to fostering a supportive learning community where questions are encouraged, ideas are shared, and challenges are overcome together. I am here to guide you every step of the way and provide the necessary resources for your personal and professional development.

Join me on this exciting journey of learning and discovery. Let's unlock your potential in web development and digital marketing together. Enroll in my courses today and embark on a transformative educational experience that will propel your career forward.
Start Learning Today!

5 1 vote
Article Rating
Subscribe
Notify of

guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Scroll to Top