JavaScript Strings and Numbers

JavaScript Review

• Everything is case-sensitive including variable names, function names, and operators
• A variable named test differs from a variable named Test

Identifiers

• Identifiers name variables, functions, properties, and function arguments
• Identifiers are one or more characters
• The first character must be a letter, an underscore (_), or a dollar sign ($)
• Later characters may be letters, underscores, dollar signs, or numbers
• Convention uses camel case, so the first letter is lowercase, and each additional word starts with a capital letter
• Example: firstSecond, myCar, doSomethingImportant

Comments

• C-style comments are used
• A single-line comment starts with two forward slashes: //single line comment
• A block comment begins with /* and ends with */:

/*
- This is a multi-line comment
- /

Input and Output

• alert("Some Text"); creates an alert box displaying "Some Text"
• var myName = prompt("Enter your name: "); prompts the user to enter their name
• document.write("Some Text Output"); writes "Some Text Output" to the HTML document

Statements

• Statements are terminated by semicolons, but semicolons don't need to be added, the parser determines where a statement ends
• Example, this is valid but not recommended: var sum = a + b //valid even without a semicolon - //not recommended
• However this one is preferred: var diff = a - b; //valid - preferred
• Multiple statements can be combined into a code block using C-style syntax:

if (test){
test = false;
alert(test);
}

• Control statements, such as if, require code blocks only when executing multiple statements
• Best practise is to always use code blocks with control statements, even if only one statement to be executed

Variables

• JavaScript variables are loosely typed, any variable can hold any type of data, and are named placeholders for a value
• A variable is defined using the var keyword.
• For example: var message; // value is undefined
• A variable can be assigned a string value: var message = "hi";
• Assignment doesn't lock the variable to a string type, it's still possible to change the type of value stored:

var message = "hi";
message = 100; //legal, but  not recommended

• Global variables are defined outside a JavaScript function

var globalName = "Jimbo";
function myFunc(){
alert("Hi " + globalName);
}

• The var operator defines a a variable to the scope in which it was defined, defining one inside a funciton means that the variable is destroyed as soon as the function exits

function test(){
var message = "hi"; //local variable
}
test();
alert(message); //error!

• Multiple variables can be defined in a single statement, separated by commas

Data Types

• Five simple data types or primitive types:
• Undefined
• Null
• Boolean
• Number
• String
• One complex data type:
• Object is an unordered list of name-value pairs

typeof Operator

• Determines the data type of a given variable, returning one of the following strings:
• "undefined" if the value is undefined
• "boolean" if the value is a boolean
• "string" if the value is a string
• "number" if the value is a number
• "object" if the value is an object (other than a function) or null
• "function" if the value is a function

typeof Examples

var message = "some string"; 
var myNum = 5; 
var myFlag = false;
alert(typeof message); //"string" 
alert(typeof(message)); //"string" 
alert(typeof myNum); // "number" 
alert(typeof 95); // "number" 
alert(typeof myFlag) // "boolean"

Boolean Type

• Two literal values: true and false
• true is not equal to 1 and false is not equal to 0
• Assignment of Boolean values to variables:

var found = true;
var lost = false;

• Boolean literals true and false are case-sensitive
• True and False are identifiers

Number Type

• Uses the IEEE-754 format to represent integers and floating-point values (double-precision values)
• Several types of number literal formats
• Basic number literal format uses decimal integer
• Example: var intNum = 55; //integer

Floating-Point Values

• Floating-point value requires including a decimal point and at least one number after the decimal point
• An integer is not necessary before a decimal point, but it is recommended

var floatNum1 = 1.1;
var floatNum2 = 0.1;
var floatNum3 = .1; //valid, but not recommended

NaN

• NaN, short for "Not a Number", indicates failure of an intended number operation (opposed to an error)
• Dividing by 0 in JavaScript will return NaN, which allows program functions to continue

isNaN function

• The isNaN function takes a single argument of any data type

alert(isNaN(NaN)); //true
alert(isNaN(10)); //false - 10 is a number
alert(isNaN("10")); //false - can be //converted to number 10
alert(isNaN("blue")); //true - cannot be //converted to a number
alert(isNaN(true)); //false - can be //converted to number 1

Converting strings to Integers

• The parseInt() function inspects a string for number patterns

var num1 = parseInt("1234blue"); //1234
var num2 = parseInt(""); //NaN
var num3 = parseInt("0xA"); //10 hexadecimal
var num4 = parseInt(22.5); //22
- decimal
var num5 parseInt("70"); //70
var num6 = parseInt("0xf"); //15 - hexadecimal

Converting Strings to Floats

• The parseFloat() function works like parseInt(), except inspecting for characters starting at position 0:

var num1 = parseFloat("1234blue"); //1234 - //integer
var num2 = parseFloat("0xA"); //0 
var num3 = parseFloat("22.5"); //22.5 
var num4 = parseFloat("22.34.5"); //22.34 
var num5 = parseFloat("0908.5"); //908.5 
var num6 = parseFloat("3.125e7"); //31250000

String Type

• Strings are 0 or more 16-bit Unicode characters
• Can be delineated by : "" or ''

String Length

• The length of a string can be found with the length property:

text = "The quick brown fox";
alert(text.length); //outputs 19

String Immutability

• Strings are immutable, can't be changed after creation
• To change a string, the original string must be destroyed and replaced with a new value

var lang = "Java";
lang = lang + "Script";

Converting Numbers to Strings

var num = 10;
alert(num.toString()); //"10"
alert(num.toString(2)); //"1010"
alert(num.toString(10)); //"10"
alert(num.toString(16)); //"a"

Operators

• Unary Operators
  • Increment/Decrement operators come in prefix and postfix versions
  • Prefix versions are placed before the variable, postfix ones are placed after

var age = 29;
++age;
age++;

var fullName = "Sherlock ";
var myLast = "Holmes";
fullName += myLast;

• Boolean Operators
  • Necessary for testing relationships between values in programming
  • Boolean operators: NOT, AND, and OR

var test = false;
if (!test){ // NOT operator
// code here
}

var test = false;
var test1 = true;
if (test && test1){ // AND operator
// code here
}
if (test || test1){ // OR operator
// code here
}

• Multiplicative Operators
  • Multiply, divide, and modulus

var result = 34 * 56;
var result = 66 / 11;
var result = 26 % 5; //equal to 1

• If either operand isn't a number, it's converted to a number behind with the Number() casting function

• Additive Operators

  • Add and subtract
  • Conversions occur behind for different data types
  • If both operands are strings, the second is concatenated to the first
  • If only one operand is a string, the other is converted and the result is concatenation

var result = 1 + 2;
var result1 = 5 + 5; //two numbers
alert(result1); //10
var result2 = 5 + "5"; //a number and a string
alert(result2); //"55"

• Subtraction

  • If either operand is a string, Boolean, null, or undefined, it's converted to a number

• Relational Operators

  • <, >, <=, >=,
  • Perform comparisons and return a Boolean value

• Equality Operators

  • == is the equality operator.
  • != is the not-equal operator.
  • Both operators convert values

• Identically Equal and Not Identically Equal

  • === - The identically equal does the same thing as the equivalent, except that no converting value during testing
  • !== - The not identically equal does the same thing as the equivalent, except that no converting value during testing

var result1 = ("55" == 55); //true - equal because of // conversion
var result2 = ("55" === 55); //false - not equal because // different data types
var result1 = ("55" != 55); //false - equal because of // conversion
var result2 = ("55" !== 55); //true - not equal because // different data types

• Assignment Operator

var num 10;
num = num + 10;
var num = 10;
num += 10;

• Comma Operator
  • Allows execution of more than one operation in one statement

var num1=1, num2=2, num3=3;

• Switch statement

switch ("hello world") {
case "hello" + " world":
alert("Greeting was found.");
break;
case "goodbye":
alert("Closing was found.");
break;
default:
alert("Unexpected message was found.");
}

Functions

• Core of any language
• Allow the encapsulation of statements that be run anywhere
• Declared with the function keyword, followed by arguments, and the body

function functionName(arg0, arg1,...,argN) {
statements
}

• Example:

function sayHi(name, message) {
alert("Hello " + name + ", " + message);
}

• Functions can return a value using the return statement at any time

function sum(num1, num2) {
return num1 + num2;
}
var result = sum(5, 5);

• Can be called by using the function name, followed by the function arguments in parentheses
• JavaScript functions don't specify if they use a return value
• Any function can return value using the return statement
• In JavaScript, you you don't define the types of function arguments
• The language also doesnt care how many arguments you pass, nor how many different
• arguments in JavaScript are represented internally
• This array is always passed to the function on call
• arguments object that that be accessed during calling get value that

JavaScript Objects

• There are ways to create the instance, first is use the new operator with object constructor:

 var person = new Object();
person.name = "Nicholas";
person.age = 29;

• The second is to use literal notation:
• Object properties are functions JavaScript methods:

var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
}
var ret = myFunc(person);
var myName = person.name;
person.sayName();

JavaScript Arrays

• Can be created in two ways:
• Array constructor:

var colors = new Array();
var colors = new Array(20);
var colors = new Array("red", "blue", "green");

• Array literal notation:

var colors = ["red", "blue", "green"];// creates an array with three strings
var names = []; //creates an empty array
alert(colors.length); //3
alert(names.length); //0
alert(colors[0].length);

Exception Handling

• Like C family languages, JavaScript uses try-catch to handle exceptions:

var num = 10;
try {
var result = num / num1;
} catch (e){
alert(e);
}

JavaScript String Methods

• JS has nearly the same string methods as the C family
• string.charAt(pos)

name = 'Curly';
initial = name.charAt(0); // 'C'

name = 'Curly';
initial = name.charCodeAt(0); //'67'

var text = 'Mississippi';
var p = text.indexOf('ss'); // 2
p = text.indexOf('ss', 3); // 5
p = text.indexOf('ss', 6); // -1
// search from the end of the string
p = text.lastIndexOf('ss'); // 5

var result ="mother in law".replace('_', '-');
// produces mother-in law...
while (result.indexOf(' ') != -1)
result = "mother in law".replace('_', '-');

var resultArray = "mother_in_law".split('_');
var digits = '0123456789';
var a = digits.split('', 5); // a is ['0','1','2','3', '456789]
var ip = '192.168.1.0';
var b
b is ['192','168','1','0']

"mother in law".substr(0, 6);
// result is 'mother'
var myWord = "Hello World";
result = myWord.substr(6, 5);

JavaScript Objects (Introduction)

• The simple JavaScript types are numbers, strings, booleans, null and undefined
• All other values are objects including functions, arrays and regular expressions
• Objects are a container of properties with a name and a value
• Object normally use classes but are class-free

emptyObject = {};

stooge = {
firstName: "Joe",
lastName: "Howard"

var flight = {
airline: “Oceanic”,
number: 815,
departure: {
IATA: “SYD”,
time: “2004-09-22 14:55”,
city: “Sydney”
},
arrival: {
IATA: “LAX”,
time: “2004-09-23 10:42”,
city: “Los Angeles”
}

JavaScript Object Retrieval

var myTest = stooge.firstName; // "Joe"
myTest = flight.departure.IATA; // "SYD"
myTest = stooge.middleName; // undefined
myTest = flight.status; // undefined
myTest = stooge.FIRSTNAME; // undefined
myTest = flight.equipment; // undefined

JavaScript Object Update

stooge.firstName = 'Jerome';
stooge.nickName = 'Curly';

• Value can be changed by assignment
• If the property name doesnt exist, it can be added

JavaScript Object Reference

• Objects are passed around by reference, they are never copied

var x = stooge;
x.nickname = 'Curly';

var nick = stooge.nickname;

// nick is 'Curly' because x and stooge are references to the same object

JavaScript Methods

JavaScript object properties can also be functions • These are called JavaScript methods

{
name: “Nicholas”,
age: 29,
job: “Software Engineer”,
sayName: function() {
alert(this.name);
}
};

Constructor Pattern

• Constructors are a special kind of JavaScript function used to create objects

function PersonType(name, age, job){
this.name = name;
this.age = age;
this.job = job;
}

var personl = new PersonType(“Jimbo”, 29, “Teacher”);
var person2 = new PersonType(“Greg”, 27, “Doctor”);

Function Declaration vs Function Expression

function sum(a, b) {
return a + b;
}

var sum = function(a, b) {
return a + b;
}

JavaScript UI Event Model

• Setting up functions as event handlers is vital with event handling to called when the corresponding events take place
• Code needs to process code
• Ul takes an event, prioritize handling keystrokes

JavaScript setTimeout()

• setTimeout lets designate function that does the execution
• Allocations to the ul until time to execute with time the function, setTimeout()
• Isnt useful but short timespan set recursions
• Recursion is the strategy where you do loop processing

"done" in the inner set, use SetTimeout(innerloop,5), processing

Animation with JavaScript

• Use SetTimeout() to basicAnimations
• Moves an ball and bounces with an div block using SetTimeout to a recursive function call

• URL format

• //www.mysite.com/specials/saw-blade.gif

• Protocol: http://

• Internet address - www.mysite.com

• Name of resource: /specials/saw-blade.gif

• HTTP commands are called methods

• Requests a representation of the specified resource

• POST

• Submit processed data for id with request body

• PUT* uploading a resource.

• DELETE* Delete name from a server.

• JavaScript Object Notation

  • easy way to store or transport data as strings.

• Converting JavaScript object to JSON and javascript to JSON (continued) JSON strings

  • From internet will default allows post requests long it's string format -JSON is perfect it represent things in strings.

• JSON converting from strings:

  var stoogejson =JSON.Stringify (stooge) // as assuming stooge json object

var stooge =JSON.parse(stoogejson);

• JSON Asynchronous JavaScript

• AJAX

  • Asynchronous JavaScript And XML
  • provides client browser code, to web severs data.
  • Not normally any more XML format from the browser
  • Assynchronous browser free after sent, most ajax calls take less then 1min

• can* do can simple AJAX calls from any browser using something called XmlHttpRequest, every browser it http usually get, posting a website. XML expect to get data back its usually isondata.

• ECMAScript(ECMA)

• European computer manufacturing script language spec international writing

• Version summary

• Browser Differences

• support using shim, a new feature, example google.

“String”, “Number”, null,” true,”,”false,”,”({“[“, you you extra comma,”something”

• Block Cope is a JavaScript function.

• ECMAScript(6)

• support constants Block Scope

• functions object, new classes

"true” = if

if (Type of != under fine); alert = (“underfined”); alert = ();

• Function. (points>8” (5>) New Block

ECMAScript 5 summary

use strict

• string.trim functions, filter right, stringify
• New Object
• Sets Collections
• Contains no duplicates
• Existeral languages Java C#.python
• Es6sets the matter ES6. Set. Map Classes
• Historically, developers used constructors In JavaScript (introduced with ES6) do can not often
• Syntax for sugar
• Protypes and inheritance are cleaner and more elegant Because programs new classes is more state get Type { //( return this. this.Type } setType *in this .
• Inevitably in Concepts at higher level are model journal. A vehicle model to bike model
• Concepts of the lower level are more specific. A vehicle model to bike model
  • Arrow Functions
• Shorther way of creating a Simple functions Lambdas for C#

using New, has a function next the arrow

• Optional Parenthese

var myobj=() {name

console .

let count(()counter}++;console.log

Test your knowledge of strings and numbers in JavaScript. Questions cover string immutability, NaN, type coercion, and string methods. Evaluate expressions and predict outcomes.