Video: Introduction to JavaScript (Bulgarian)

May 01, 2023 Nikolay Kostov (Nikolay.IT)

Dynamic HTML (DHTML) is a combination of web technologies used to create interactive and animated web pages that can respond to user actions without requiring a page reload. To create DHTML, you need to have a good understanding of HTML, XHTML, CSS, JavaScript, and the Document Object Model (DOM). JavaScript is a programming language used to create interactive effects and dynamic content in web pages. It has a simple syntax and can be embedded in HTML pages. Pop-up boxes are a common JavaScript feature used to display messages or alerts to users. Debugging is an essential process in JavaScript development to find and fix errors in the code. Overall, these topics are essential for web developers to create engaging and dynamic web pages using JavaScript and related technologies.

Topics covered:

  • Dynamic HTML
  • How to Create DHTML?
    • XHTML, CSS, JavaScript, DOM
  • Intro to JavaScript
    • JavaScript in Web Pages
  • JavaScript Syntax
  • Pop-up boxes
  • Debugging in JavaScript

Video (in Bulgarian)

Presentation Content

What is DHTML?

  • Dynamic HTML ( DHTML )
    • Makes possible a Web page to react and change in response to the user’s actions
  • DHTML consists of HTML + CSS + JavaScript

DTHML = HTML + CSS + JavaScript

  • HTML defines Web sites content through semantic tags (headings, paragraphs, lists, …)
  • CSS defines 'rules ’ or 'styles ’ for presenting every aspect of an HTML document
    • Font (family, size, color, weight, etc.)
    • Background (color, image, position, repeat)
    • Position and layout (of any object on the page)
  • JavaScript defines dynamic behavior
    • Programming logic for interaction with the user, to handle events, etc.

JavaScript

  • JavaScript is a front-end scripting language developed by Netscape for dynamic content
    • Lightweight, but with limited capabilities
    • Can be used as object-oriented language
    • Embedded in your HTML page
    • Interpreted by the Web browser
  • Client-side , mobile and desktop technology
  • Simple and flexible
  • Powerful to manipulate the DOM

JavaScript Advantages

  • JavaScript allows interactivity such as:
    • Implementing form validation
    • React to user actions, e.g. handle keys
    • Changing an image on moving mouse over it
    • Sections of a page appearing and disappearing
    • Content loading and changing dynamically
    • Performing complex calculations
    • Custom HTML controls, e.g. scrollable table
    • Implementing AJAX functionality

What Can JavaScript Do?

  • Can handle events
  • Can read and write HTML elements and modify the DOM tree
  • Can validate form data
  • Can access / modify browser cookies
  • Can detect the user’s browser and OS
  • Can be used as object-oriented language
  • Can handle exceptions
  • Can perform asynchronous server calls (AJAX)

JavaScript Engines

  • Depends on Browser
    • V8 in Chrome, Chakra in IE, Spidermonkey in Firefox, JavaScriptCore for Safari, etc.
  • Services
    • Memory Management / GC
    • Just-in-Time Compilation
    • Type System
    • etc.

The First Script

<html>

<body>
  <script type="text/javascript">
     alert('Hello JavaScript!');
  </script> 
</body>

</html>

Using JavaScript Code

  • The JavaScript code can be placed in:
    • <script> tag in the head
    • <script> tag in the body - not recommended
    • External files, linked via <script> tag the head
      • Files usually have .js extension
      • Highly recommended
      • The .js files get cached by the browser
<script src="scripts.js" type="text/javscript">
<!– code placed here will not be executed! -->
</script>

JavaScript – When is Executed?

  • JavaScript code is executed during the page loading or when the browser fires an event
    • All statements are executed at page loading
    • Some statements just define functions that can be called later
    • No compile time checks
  • Function calls or code can be attached as “event handlers” via tag attributes
    • Executed when the event is fired by the browser
      <img src="logo.gif" onclick="alert('clicked!')" />

Calling a JavaScript Function from Event Handler – Example

<html>
<head>
<script type="text/javascript">
  function test (message) {
    alert(message);
  }
</script>
</head>

<body>
  <img src="logo.gif"
    onclick="test('clicked!')" />
</body>
</html>

Using External Script Files

Using external script files:

<html>
<head>
  <script src="sample.js" type="text/javascript">
  </script>
</head>
<body>
  <button onclick="sample()" value="Call JavaScript
    function from sample.js" />
</body>
</html>

External JavaScript file:

function sample() {
  alert('Hello from sample.js!')
}

JavaScript Syntax

  • The JavaScript syntax is similar to C#
    • Operators ( + , * , = , != , && , ++ , …)
    • Variables (typeless)
    • Conditional statements ( if , else )
    • Loops ( for , while )
    • Arrays ( my_array[] ) and associative arrays ( my_array[‘abc’] )
    • Functions (can return value)

Standard Popup Boxes

  • Alert box with text and [OK] button
    • Just a message shown in a dialog box:
      alert("Some text here");
  • Confirmation box
    • Contains text, [OK] button and [Cancel] button:
      confirm("Are you sure?");
  • Prompt box
    • Contains text, input field with default value:
      prompt ("enter amount", 10);

Built-in Browser Objects

  • The browser provides some read-only data via:
    • window
      • The top node of the DOM tree
      • Represents the browser’s window
    • document
      • holds information the current loaded document
    • screen
      • Holds the user’s display properties
    • browser
      • Holds information about the browser

The Math Object

The Math object provides some mathematical functions

for (i=1; i<=20; i++) {
  var x = Math.random();
  x = 10*x + 1;
  x = Math.floor(x);
  document.write(
    "Random number (" +
    i + ") in range " + 
    "1..10 --> " + x + 
    "<br/>");
}

The Date Object

The Date object provides date / calendar functions

var now = new Date();
var result = "It is now " + now;
document.getElementById("timeField")
  .innerText = result;
...
<p id="timeField"></p>

Timers: setTimeout()

  • Make something happen (once) after a fixed delay
    • 5 seconds after this statement executes, this function is called
      var timer = setTimeout(bang, 5000);
    • Cancels the timer
      clearTimeout(timer);

Timers: setInterval()

  • Make something happen repeatedly at fixed intervals
    • This function is called continuously per 1 second:
      var timer = setInterval(clock, 1000);
    • Stop the timer:
      clearInterval(timer);

Timer – Example

<script type="text/javascript">
  function timerFunc() {
    var now = new Date();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    document.getElementById("clock").value = 
      "" + hour + ":" + min + ":" + sec;
  }
  setInterval(timerFunc, 1000);
</script>
<input type="text" id="clock" />

Debugging JavaScript

  • Modern browsers have JavaScript console where errors in scripts are reported
    • Errors may differ across browsers
  • Several tools to debug JavaScript
    • Microsoft Script Editor
      • Add-on for Internet Explorer
      • Supports breakpoints, watches
      • JavaScript statement debugger ; opens the script editor

Firebug

  • Firebug – Firefox add-on for debugging JavaScript, CSS, HTML
    • Supports breakpoints, watches, JavaScript console editor
    • Very useful for CSS and HTML too
      • You can edit all the document real-time: CSS, HTML, etc
      • Shows how CSS rules apply to element
    • Shows Ajax requests and responses
    • Firebug is written mostly in JavaScript

Debugging Node.js

  • JavaScript can also be debugged with Node.js:
    • Open Terminal/CMD
    • Run $ npm install –g node-inspector
    • In CMD/Terminal, navigate to the folder of the file to debug
    • Run in $ node-debug FILE_TO_DEBUG
    • A browser opens with the code, and it can be debugged

JavaScript Console Object

  • The console object exists only if there is a debugging tool that supports it
    • Used to write log messages at runtime
  • Methods of the console object:
    • debug(message)
    • info(message)
    • log(message)
    • warn(message)
    • error(message)
Share