Lecture 15 - Internet Technologies

ERRORS IN JAVA SCRIPT CODE

  • Error Line: rror_mod.mirror_object
  • Operation Types:
    • == "MIRROR_X":
      • mirror_mod.use_x = True
      • mirror_mod.use_y = False
      • mirror_mod.use_z = False
    • == "MIRROR_Y":
      • mirror_mod.use_x = False
      • mirror_mod.use_y = True
      • mirror_mod.use_z = False
    • == "MIRROR_Z":
      • mirror_mod.use_x = False
      • mirror_mod.use_y = False
      • mirror_mod.use_z = True
  • Selection Operation:
    • Pob.select= 1
    • er_ob.select=1
    • bpy.context.scene.objects.active
    • print("please select exactly one object")
  • Operator Classes:
    • Context:
    • types.Operator
    • Describes the context for the operator class
  • Mirror Operation:
    • object.mirror_mirror_x
  • Active Object Assessment:
    • next.active_object is not None

JAVA SCRIPT OVERVIEW

What is JavaScript?

  • Definition:
    • JavaScript (JS) is a lightweight programming language primarily for the web. It enables programming the behavior of web pages and allows dynamic interactions with users.
  • Comparison to Other Languages:
    • HTML: A markup language for structuring web content.
    • CSS: A styling language for the presentational aspects of web pages.

Key Caracteristics of JavaScript

  • Interactivity: Enables creation of dynamic interactions on web pages.
  • Execution Environment: JavaScript code is interpreted at runtime by the client browser.
    • Modern JS engines (e.g., V8 in Google Chrome) convert JS into optimized machine code using Just In Time (JIT) compilation to enhance performance.
  • Object-Oriented Capability: Supports object-oriented programming concepts.

JavaScript Structure

  • Core JavaScript: The base language features and utility objects like Math.
  • Client-Side JavaScript: Accesses browser and HTML Document Object Model (DOM).
  • Server-Side JavaScript: Manages interactions with server environments and systems.

HISTORY OF JAVASCRIPT

Development Timeline

  • Inception:
    • Created by Brendan Eich in 1995.
  • Standardization:
    • Became an ECMA standard in 1997 as ES1 (version 1).
  • Evolving Language Variants:
    • ES5 released in 2009.
    • ES6 released in 2015 with significant updates (new syntax and features).
    • Post-2016, new versions are labeled by the year (e.g., ES2016, ES2017).

ES6 Updates

  • Modern Features:
    • Introduces new syntax, readability improvements, allowing to write less code while achieving more functionality.
  • Browser Support:
    • Most modern browsers support ES6 features.

FUNCTIONALITY OF JAVASCRIPT

What Can JavaScript Do?

  1. DOM Manipulation: Dynamic changes to HTML elements
    • Change content, attributes, and CSS styles.
  2. Event Handling: Responds to user actions (e.g., button clicks).
    • Example of Button Click: Incrementing click count.
  3. Styling: Changing styles dynamically (e.g., text colors).

Code Examples

Click Event Example:
  • JavaScript Button: 
  <button onclick='incrementClick()'>Click me</button>
  <p>Number of clicks: <span id="count">0</span></p>
Text Color Example:
  • JavaScript for Color Change: 
  <button onclick='changeColor()'>Change text colour</button>

PLACEMENT OF JAVASCRIPT

Locations for JavaScript

  1. Internal JavaScript: Embedded directly within HTML documents.
    • As <script> elements placed in either the head or body.
  2. External JavaScript: Stored in separate .js files for better reuse.
    • Imported using <script src="myscript.js"></script> with the defer attribute.

BASIC JAVASCRIPT STRUCTURE

Components

  1. Identifiers: Names assigned to variables, functions, etc.
    • Must start with a letter/underscore and be case-sensitive. Examples: first_name, test01.
  2. Variables: Containers for storing data.
    • Declared using const, let, or var.
  3. Data Types:
    • Primitive: number, boolean, string.
    • Objects: User-defined objects and built-in objects like Math, Array.
  4. Operators:
    • Arithmetic, logical, and comparison operators.
  5. Type Casting: Converting between data types.
    • Example: Casting string to number using Number() or parseInt().
  6. Comments: Single-line (// comment) and multi-line (/* comment */).

EVENTS IN JAVASCRIPT

Event Definitions

  • Event: An action detected by the computer, such as mouse clicks or page loading.

Event Handlers

  • Functionality: Executes code based on events, e.g., changing background color on mouse over.

Example Code for Events

  • Mouseover Code: 
  const p = document.querySelector('p');
  p.addEventListener('mouseover', function() {
      p.style.backgroundColor = 'yellow';
  });