Introduction to JavaScript



JSNotes 1 - Introduction to JavaScript version 5This is to be read after you have read/seen one of the tutorials in Assignment 0.It is intended to pull together what you have read and (starting with the material on Strings) add a some deeper knowledge.Then read this summary of some important points:Until now our pages have all been staticNo input requested from usersNo output to the userNo calculations or variability based on user inputThe answer to all this is to have a scripting language which hasProvision for input and outputVariables Functions to make the code manageableControl structures – loops, if-then constructs etc.Data structures (beyond simple variables) to hold values – arrays, strings, objectsThe language for browsers is JavaScriptJavaScript is Not really related to Java although its syntax is similar to that of Java and C++Loosely typed – which means that you do not need to declare the type of a variable before you use itHas objects, but newbie users may not even be aware of thatHas prototype objects, which we will discuss later onHas both arrays and associative arrays (to be discussed) which are important for manipulating what you see in the windowHas built in objects and functions which are designed for rendering pages in a browserAll JavaScript code is between <script …> </script> tags.Please read the note “Where the JavaScript Goes” in this ments: In HTML and XHTML they are <!--?? -->In JS they are // for rest of line and /*?? */ for multi-lineIn CSS they are /* */JavaScript in a separate file is linked to by: <script language=’JavaScript’ type= ‘text/javascript’ src=’’myCode.js’ > </script>The code itself goes into a file myCode.js without the script tags.When your script is in an external file, best practices is to put the linksat the bottom of the body so that retrieving your script with not delay loading your page. I admit to not always doing this.Unlike HTHML, javascript is case sensitive – for reserved words, variable and function names, etc.The easiest input is myVar=prompt(‘message to prompt user’) Any input from the prompt function is a string – so you need to turn it into an integer or floating point number with the parseInt() or parseFloat() function: name = prompt(‘What is your name?’) age = parseInt(prompt(‘How old are you?))The easiest output is alert(‘message to print’) Any output (other than alert and confirm messages and console.log ()) is through the document.write function: document.write(‘Hi there ‘) document.write(name) That is, the parameter to a document.write function is either a variable (such as name) or a string (enclosed in single or double quotes or an expression (such as 2*x+3). Strings may be combined through string concatenation – for which the operator is + document.write(“Hi there “+name+”!”) Optional: ES6 introduced a way to simplify some of this code. You could have let fn = prompt("Name?"); let prnn = prompt("Pronouns?"); alert(`Hi, ${fn} who uses ${prnn}!`); The string inside the alert statement is called a template literal and please notice that it is inside back-ticks (the character just below the ESC button.) Semi-colons at the end of a line of code are optional –but semi-colons should always be included except when you have statements enclosed in braces because in certain complex coding the semi-colons prevent parsing errors.Semi-colons may also be used to separate statements when more than one statement is on the same line.Functions are defined in the head, (inside a script) or in a script at the end of the body.A function definition begins with the word function: function myFunc(parameter list) { //code }Functions are called in the body with: myFunc(2,7,name)Strings have many methods, most of which it's not worth memorizing. When you need them you can find them at w3schools or MDN ( or )The ones you are most likely to use are length, charAt(), pos() and slice():Strings in JavaScript (like those in Python) are indexed starting at 0!!!Supppose that var myString = "abcdefghijklmnopqrstuvwxyz"; NOTE: Length is a property – not found with a method. myString.length //26 myString.atChar(2) //c - remember atChar(0) is 'a' myString.pos('c') //2 myString.slice(4, 6) //ef count from 0, and e is at index 4: // the slice is up to but not including index 6Other than the length property, I expect you to look these methods up as needed.I know atChar by heart (naturally) from looking at the answers to yes/no questions to see if the first letter was a "Y" or a "y". Notice that you must check for both possibilities ( and that II is the or operator ): ans = prompt("Do you wish to continue?") if ( ans.atChar(0)=="Y" II ans.atChar(0) == "y") A more sophisticated discussion of the data types and structures in JavaScript and ES6.JavaScript comes with the following primitive data types:Number This is used to store both integers and floating point numbers The values may be between -(253???1) and 253???1)BigInt This is used to store numbers beyond the range of the Number type. We will not need BigInt.Boolean The only allowable values are true and false (all lower case; and no quotes).undefined The only possible value is undefined.Symbol New in ES6, this is a unique identifier, analgous to a surrogate key in databases. We will not be using this .String A string in JavaScript is just like one in Python, but it is immutable; that is you can't change its values with code like myStr[0]='a'; On the other hand, you may write code like myStr =myStr + '!'; This seems odd and makes it look as though you are changing myStr, but what you are really doing is defining a new string, and then reusing the name myStr for the new string. Another way to say this is to say that the original string wasn't changed, but the value of the variable myStr points to was changed. A single character is a string of length 1.In addition to these types, JS has the constant values for true, false, and null.JavaScript makes more complex data structures usingObject This is like a dictionary in Python – that is it is a list of name:value pairs, separated by commas and enclosed in { }Array This is the usual list of items, indexed by integers , starting at 0. An array is actually a type of object that is built into the JS language. There are several other such, like Date. Array is listed here separately b/c it is so common and comes with useful properties (e.g. myArray.length) and methods.It is permissable to make very complicated data structures by using objects and arrays multiple times – e.g. an array of objects or an object some of whose properties have an array as a value.Function MDN lists a function as a data structure, but strictly speaking each function is an object. Don't worry about that at this point.References: is clear, although it calls null a data type; has all the details.Type coersion and == versus ===JavaScript, like most languages, will try to coerce types. (Type coercion is what allows you to add an integer and a real in python.)== evaluates equality allowing for type conversion, while === does not allow type conversion.For example false is represented as a 0, so the statements false ==0 // returns true. false === 0 // returns false as 0 is a Number and false is a Boolean.At some point (not now) you will learn about truthy and falsy values. While you will see a lot of code with == and !=, it is safer to use === and !==. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download