JAVASCRIPT Declarations

Posted on by binarybuggs

  • External JS files can be referenced in tag using src attribute
  • Both relative and absolute binding are supported
  • Remote resources can also be used
  • Locally defined JS code is added between tags
  • More than one script tags can be used
  • In HTML5, type attribute is not mandatory anymore
  • Executed automatically (DOM is not ready yet!)
  • Coding example 
< ! DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8" / > 
<tit1e>First JS App!</title> 
<script src="js/myExterna1.js"  />
< script > 
console. log( "I'm running!");
</script> 
</head> 
< bodY> 
< / html >

When a web page is loaded, the browser creates a Document Object Model of the page.

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

Language Basics

Statement
Keyword: var
Variables: a, b
Literal value: 2
Operators: =,*

Expressions:
Literal expression: 2,
Variable expression: b,
Arithmetic expression: 2 * b,
Assignment expression: a = 2 * b

Variables are declared without type information (no type enforcement)
Use the var or let keyword
Reserved JS keywords cannot be used
Its name must start with [a-zA z], $ or
Constants used to be defined with upper case (only naming convention)
Since ES6: const keyword for real constants
Variable declaration (var a) and initialization (a
2) are two distinct things, even if they are in
the same statement

Variable Naming Conventions

Variable names are defined in camelCase format
Private variable names start with _ (only naming convention)
Variable types are not enforced, but at SAP we are using variables with dedicated types. It’s just a naming convention:

Integer: i Variable
Float: f Variable
Boolean: bVariab1e
String: sVariab1e
Array: aVariable
Object: ovariable
Function: fnFunction
Map/Associated array: mProperties 

Assignment: =

Math: +,-,*,/

Compound: +=, -= , *=, /=

Increment/Decrement: ++ , --

Equality: ==, != , === , !==

Comparison: < , >, <= , >=

Logical: I ||, && , !

String Concatenation: +

Only values have type, variables are untyped
Simple primitive types:
number
boolean
string
undefined

Non-primitive types:

Obj ect
 Array
RegExp
Function

Value type is checked using the typeof keyword

typeof means:get the type of the value assigned to this variable”

Returns the name of the type as string
Array and Date cannot be checked
null is typed as object 

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>JS Basics - Values & Types</title>

      <script>
           
            console.log( "1.1: " + typeof 1.1 );
			console.log( "\"Text\": " + typeof "Text" );
			console.log( "NaN: " + typeof NaN );
			console.log( "false: " + typeof false );
			console.log( "[1, 2]: " + typeof [1, 2] );
			console.log( "{ prop: \"Text\" }: " + typeof { prop: "Text" } );
			console.log( "new Date(): " + typeof new Date() );
			console.log( "function() {}: " + typeof function() {} );
			console.log( "null: " + typeof null );
			console.log( "undefined: " + typeof undefined );
           
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

Leave a comment