Learn JavaScript : Introduction (Part 1)

 

JavaScript Image



Introduction

JavaScript is a computer programming language that is very good for client-side and server-side application development. JavaScript brings to life the interactivity of a website where you can see pop-ups, animations, manipulation of data, and other interactive functions.

JavaScript is an interpreted language and not a compiled language, the interpreter is built into the web browser, which enables the JavaScript source code you write to be translated into machine code so the CPU on your computer can execute it.

JavaScript is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. 

Prerequisite to learning this language

Before you can learn this computer programming language and use it well, it would be best if you have already learned Hyper Text Markup Language ( HTML ) and Cascading Style Sheet ( CSS ). This is because JavaScript Provides functionality through the Document Object Model (DOM), which allows JavaScript to manipulate the html document.

HTML would serve as the structure or skeleton for the web page. CSS would serve as the design and styling of the web page and JavaScript would help with the interactiveness of the web page, like pop-ups and alert displays.

Adding JavaScript to your web page

As an internal script

In this example, the JavaScript code is written inside a <script> tag in the head section of the HTML document. The code defines a function showMessage which, when called, displays an alert box with the message "Hello, World!".

The code also includes a button element with an onclick attribute that calls the showMessage function when the button is clicked. This is an example of how JavaScript can be used to add interactivity to a web page.

<!DOCTYPE html>
<html>
<head>
  <title>Internal JavaScript Example</title>
  <script>
    function showMessage() {
      alert("Hello, World!");
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">Click me!</button>
</body>
</html>

As an external script

Kindly note that the file extension of JavaScript files is in .js.
Assuming you have the following JavaScript code saved in a file called script.js that is the code below;

function showMessage() {
  alert("Hello, World!");
}

You can import this file into an HTML document using a <script> tag. Here's an example below;

<!DOCTYPE html>
<html>
<head>
  <title>External JavaScript Example</title>
  <script src="script.js"></script>
</head>
<body>
  <button onclick="showMessage()">Click me!</button>
</body>
</html>

In this example, the <script> tag in the head section of the HTML document has a src attribute that specifies the path to the external JavaScript file (script.js). This tells the browser to load the JavaScript code from the external file and make it available to the HTML document.

The rest of the code is the same as the internal JavaScript example I provided earlier - it includes a button element with an onclick attribute that calls the showMessage function when the button is clicked.

Note that the src attribute value is relative to the location of the HTML file. So if your script.js file is located in the same directory as your HTML file, you can simply use the file name as shown above. If the file is located in a different directory, you need to specify the full or relative path to the file in the src attribute.

Conclusion

JavaScript is a general-purpose programming language for developing most apps you can think of, whether mobile apps, user-interface widget, back-end development and so on. I would recommend this powerful tech tool for you, if you plan of starting software development.

Proceed to Part 2 : JavaScript Variables




Comments

Post a Comment

followers

Popular posts from this blog

The Beauty Of Using Flutter With Dart For Mobile Development

Image
Introduction Staying ahead of the curve is imperative. It's crucial to choose the right technology stack that streamlines the development process and delivers a stunning user experience. Flutter and Dart have emerged as powerful and elegant solutions, garnering significant attention and widespread adoption in recent years. Dart: The Foundation of Flutter Dart, the programming language developed by Google, serves as the backbone of Flutter. Its syntax is clean and approachable, making it an excellent choice for developers of all levels. Dart is compiled into native code, ensuring impressive performance across various platforms. One of Dart's most appealing features is its just-in-time (JIT) and ahead-of-time (AOT) compilation, which offers the flexibility to use hot reload, a feature that allows developers to see the changes they make in real-time, making the development process remarkably efficient. Visit Dart website click the link Flutter: A Framework for Be
Read more

Building a Fortified Database Connection in PHP

Image
In web development, where security breaches are on the rise, safeguarding your users' data is non-negotiable. When it comes to handling databases in PHP, establishing an ironclad, secure connection is your first line of defense. In this comprehensive guide, we'll unravel the safest and most efficient method to forge a robust database connection using PHP, complete with relevant code snippets for easy comprehension. The Crucial Role of Security In an age where data breaches can wreak havoc on individuals and organizations alike, the significance of a secure database connection cannot be overstated. Databases house a treasure trove of sensitive information, including personal details, financial records, and confidential documents. If this information falls into the wrong hands due to a compromised database connection, the repercussions can be disastrous. Navigating Common Pitfalls Before we dive into the nitty-gritty of establishing a secure database connection in
Read more

Mastering Error Handling in PHP: A Deep Dive into `@` and `try...catch`

Image
Introduction Effective error handling is paramount in PHP development, ensuring applications respond gracefully to unexpected scenarios. This article explores issues surrounding the `@` error suppression operator and the `try...catch` block, providing insights into their applications, drawbacks, and best practices through illustrative code examples. The `@` Error Suppression Operator The `@` symbol in PHP is an operator designed to suppress error messages generated by a specific expression. While seemingly convenient, its usage comes with notable pitfalls. //  php // Example using @ for error suppression $result = @file_get_contents('nonexistent-file.txt'); // Without error suppression, this would trigger a warning if the file doesn't exist // With @, the warning is suppressed, and $result might be false or an empty string Debugging Challenges    The primary drawback of `@` is its impact on debugging. Errors are concealed, making it challenging to identify an
Read more