Introduction to Java Script 1 B RAMAMURTHY 1152022
Introduction to Java. Script 1 B. RAMAMURTHY 1/15/2022
Overview 2 �We will begin with simple exercises on HTML (UI)+JS (control/action)+CSS (style) �We will focus on separation of the various components. �Then we will drop the style (css) and focus on a few popular js libraries/frameworks such as jquery and angularjs (later) 1/15/2022
Structure – Style -- Interaction 3 �HTML provides structure �CSS provides style; CSS provides style attributes for the HTML selector tags �Javascript (JS) provides control for interaction and operations �JS provides functions that can be called to perform operations 1/15/2022
Exercise with all three components 4 <!DOCTYPE html> <head> <title> My first Java. Script </title> <style> h 1{color: blue} </style> </head> Head Style/css <body> <h 1> <script> document. write("Hello World!") </script> Body </h 1> </body> Script/js </html> 1/15/2022
Separate files for style and scripts 5 <!DOCTYPE html> <head> <title> My first Java. Script </title> </head> Head. css file Style/css <style> h 1{color: blue} </style> <body> <h 1> js function outside </h 1> Body </body> </html> <script src="myscripts. js"></script>. js file function mywrite() {document. write("Hello World!"); } 1/15/2022
Moving CSS, JS to an external files 6 �We can separate style elements in css file, behavioral elements can be moved to an external js file. �This separation of concerns has resulted in explosion of javascript libraries (framework) and css style libraries. �Large collection of superior and highly useful js libraries are available 1/15/2022
JS functions 7 �Javascript “script” consists of functions. �A function consists of function followed by the name of the function �The statement that make up the function go next within curly brackets �Example: function say. Something() { alert(“ We are learning basics of JS”); } 1/15/2022
Putting all together 8 Ja Li vasc br ri ar pt ies . html file image and audio files . css file . js file Web browser Firefox/ Safari interprets application displays ) ss c. ( es yle rari t S ib L Prepare/edit files 1/15/2022
Visualizations 9 �Great visualizations are not just informative but initiate conversations, explosion of free social media communications/messaging/instagramming etc. result in valuable free marketing to target customer segment �Great visualization tells a story instantly �Excel is de facto standard but it is designed as a data entry application and optimized for graphs/plots: not good for unstructured and social media data; look beyond excel tables and graphs �Interactive visualization provides new modes of engagement previously impossible �Opens up previously invisible aspects of data 1/15/2022
HTML 5+DOM 10 �No matter what the backend, HTML and Java. Script are the technologies for all web developers for front end. 1/15/2022
Programming Concepts �This chapter introduces the following programming concepts: Names, values, and variables Declarations Data types, numbers, string literals, and Booleans Assignment Expressions Conditionals
Identifiers and Their Rules �The letter sequence that makes up a variable’s name is called the identifier �Identifiers have a particular form �Identifiers must begin with a letter, followed by any sequence of letters, numerals, or the underscore symbol �Identifiers are not allowed to contain spaces
Identifiers and Their Rules �Note two features of identifiers: The underscore symbol can be used as a word separator � It makes identifiers more readable � There is a “no spaces” rule Identifiers are case sensitive � UPPERCASE and lowercase letters are different
Variable Declaration Statement var area, radius; �This command declares that two identifiers (area, radius) will be used as variables
Rules for Declaring Variables �Every variable used must be declared �Java. Script allows declaration statements anywhere in the list of statements �Variable declarations announce what variables will be used in the program �Declare variables first
Initializing a Declaration �Sometimes there is an initial value for identifiers Java. Script allows setting the initial value as part of the declaration This is called initializing the variable �Declaring variables with initial values is written as: var tax. Rate =. 088; var balance. Due = 0;
Strings �Strings are a common kind of data �Strings are “sequences of keyboard characters” �Notice that a string is always surrounded by single (') or double (") quotes �Strings can initialize a declaration �Strings are needed when manipulating text
Rules for Writing Strings in Java. Script �There are rules for writing strings in Java. Script: Strings must be surrounded by quotes, either single (') or double ("), which are not curly Most characters are allowed within quotes except: � the return character ( ), backspace character, tab character, , and two little used others Double quoted strings can contain single quotes, and vice versa
Rules for Writing Strings in Java. Script �There are rules for writing strings in Java. Script: The apostrophe (') is the same as the single quote Any number of characters is allowed in a string. The minimum number of characters in a string is zero (""), which is called the empty string
Strings �To use double quotes in a string, enclose the string in single quotes: var answer = 'He said, "No!“ ‘ �If our string contains single quotes, enclose it in double quotes: var book = "Guide to B&B's" �Since the apostrophe is commonly used in possessives and contractions, use double quotes as the default
Escape Mechanisms �For Java. Script, the escape symbol is the backslash () �The escape sequences are converted to the single characters they represent when stored in the computer’s memory
Boolean Values �Another kind of value is the Boolean value (Booleans) �There are only two Boolean values: true and false �Boolean values are written as letter sequences, they are values, not identifiers or strings �Booleans are used implicitly throughout the programming process
Relational Operators �Relational operators make comparisons between numerical values �The relationship between two numbers is tested �The outcome of the comparison is a Boolean value of true or false �The “equal to” relational operator (==) is a double equal sign �The “not equal to” operator uses the !
Operator Overload �Operator overload is a technical term meaning the “use of an operator with different data types” Strings to numbers or to Booleans �Operators usually apply to a single data type 4 + 5 produces the numerical result of 9 �If operands are strings, what does the + mean?
Concatenation �When we use + with strings, it joins the strings by the operation of concatenation �It just means that the two strings are placed together if we want them joined �The meaning of + is overloaded: + to mean addition when operands are numeric + means concatenation when the operands are strings
if Statements and Their Flow of Control if (water. Temp < 32) water. State = "Frozen"; �The <Boolean expression> is called a predicate �It is evaluated, resulting in a true or false outcome �If the outcome is true, the <then-statement> is performed �If the outcome is false, the <then-statement> is skipped
if/else Statements �The if/else statement contain statements that will be executed when the condition’s outcome is false if (<Boolean expression>) <then-statement>; else <else-statement>;
Summary 28 �We looked at basic elements of Java. Script language. �These were introduced to illustrate the common constructs that JS has with many of the high level languages that you are familiar with. 1/15/2022
- Slides: 28