Download
1 / 23
230 likes | 232 Views
Learn about JavaScript, a dynamically-typed language widely used for web development. Explore its history, type system, and where to use it in your code. Get started with JavaScript today!
E N D
"JavaScript" CS/COE 1520 Jarrett Billingsley
Today: • add/drop ends today so if you don't like this class GO GO GO • welcome to a REAL programming language • well a Turing-complete language, anyway • it's like CS0007 in one lecture but in a different language
Where'd it come from? • waaaaaay back in 1996… • Netscape Navigator 2.0 introduced it • was gonna be called LiveScript • but Java was Hot Shit so… • formally specified by the ECMA in 1997 • "ECMAScript" is an alternative name* • the standard versions are named ES5, ES6 etc. • JavaScript (JS for short) has become one of the most widely-used programming languages in the world • if you have a browser, you have a VM for it!
I mean, it kinda looks like Java… functiongcd(a, b) { while(b != 0) { var temp = b b = a % b a = temp } return a } alert("The gcd of 54 and 24 is " + gcd(54, 24)) ; ; ; ; ; looks fine… feels like something's missing… where's all the types?? by the way semicolons are optional and people fight about it but I'm undecided and will be very inconsistent about using them
Oh, there they are • JS is a dynamically typed language. statically typed languages associate types with variables. dynamically typed languages associate types with values. int a = 10; a = 20; // ok a = "hello"; // bad var a = 10; a = 20; // ok a = "hello"; // ok! a = a / 2; // bad static = at compile time dynamic = at run time in dynamically typed languages, type errors cannot be found until you run the program.
Where do we put the CSS JavaScript? • there are two places: in a separate file… <head> </head> <scriptsrc="myscript.js"></script> <script> alert("hi!"); </script> they can appear anywhere. …or in a script element. • <body> • <script> • alert("bye!"); • </script> • </body>
JS's System.out.println • for examples and debugging, there are: • alert(), which pops up a message box; and • document.write(), which adds HTML to the <body> element. alert() is how those shady websites pop up endless dialogs that make your browser freeze.
Scripting, Interpreted, and Compiled Languagesaw yeah PL theory tangent time
They're all sequences of instructions… • the only difference is who is fetching and executing those instructions. #include <stdio.h> int main() { printf("hello!"); return 0; } gcc 0010100011100000011101101110100110010100010010010100111 CPU compiled languages are compiled from source into machine code, which is executed by the CPU. PUBLIC STATIC VOID MAIN(STRING[] ARGS) { SYSTEM.OUT.PRINTLN("JAVA IS WAY TOO VERBOSE FOR SLIDES"); } javac java 0010100011100000011101101110100110010100010010010100111 CPU "interpreted" languages are compiled into machine code for a fake CPU,which is executed by a program: the interpreter.
Blurred lines • of course, it's not that simple. not anymore. 0010100011100000011101101110100110010100010010010100111 just-in-time (JIT) compilation turns virtual machine code into real machine code, at runtime. PUBLIC STATIC VOID MAIN(STRING[] ARGS) { SYSTEM.OUT.PRINTLN("JAVA IS WAY TOO VERBOSE FOR SLIDES"); } javac java 0010100011100000011101101110100110010100010010010100111 CPU so is it compiled or interpreted?? it's an implementation detail, not really an aspect of the programming language.
And then there's "scripting languages" • historically, scripting languages were small special-purpose languages • they were never meant for writing large programs • their interpreters were very simplistic: read a line of source code, interpret it, repeat • but over time, all languages tend to get more complex • and people will try to write "real" software in them • so today, "scripting" and "interpreted" are somewhat interchangeable • but "scripting" is usually applied to dynamically-typed languages • it's kind of used as a pejorative… which is sad • EVERYTHING IS TURING COMPLETE OKAY
So… as a warning. • do not let JS sour your opinion of dynamic typing. • guess what: there's another aspect of type systems: strong typing means few/no implicit conversionsoccur. weak typingtries to be helpful and converts between types automatically in some cases. # Python x = 45 y = x + "hi" var x = 45 var y = x + "hi" TypeError: unsupported operand type(s) for +: 'int' and 'str' y now contains the string "45hi" weak typing is often what gives dynamically typed languages a bad name.
MOST OF THE PROBLEM IS THESE------ • two operators in JS are… really, really "helpful" == + equality concatenation…addition… concatenaddition this tries it's damndest to turn things into numbers this can't decide whether it wants to do string concatenation or addition the other mathematical operators are also complicit but none of them do string stuff so they're less guilty
wat.js • if you go into your browser's inspector… • you can type JS directly into the console. • super helpful for trying things out! • let's see what these evaluate to! ok, these are somewhat contrived, but… 4 + 5 4 + "hi" "hi" + "bye" 4 == "4" 4 + "5" 4 – "5" [] [] == [] -[] [] + [] 4 + [] [] – [] [] / [] [] + {} {} + [] don't assume these operators will do the "right thing" in all cases. uhh ????? WHAT
Strict equality • there's a second kind of equality in JS, strict equality. a === b this is true only if a and b are the same type and the same value. 4 === 4 4 === "4" => true => false really there's not much downside to using it… but it's just… one more equals sign to type…………..
Primitive types and typeof • typeof() gives you a value's type's name as a string. • let's try it on some values: typeof(4) typeof(4.5) typeof(NaN) typeof('h') typeof("hello") typeof('hello') typeof(true) typeof(undefined) typeof(null) number covers both ints and floats. string covers strings and chars. boolean works as you expect. undefined is a special type… null actually is its own type, but for historical reasons, it says "object" here.
undefined and functions • undefined is a placeholder value for uninitialized variables var x // not setting it... alert(x) // shows 'undefined' • we saw how to make a function, but here's something new: in JS, you can give functions more or fewer arguments than they expect. function f(x) { alert(x) } f(5) // shows '5' f() // shows 'undefined' f(1, 2) // shows '1' extra arguments are ignored. unpassed arguments are undefined.
They're easy! • since there are no variable types, arrays can hold anything, and can hold any mix of types too. vararr = [1, 2, 'hi', null, []] alert(arr) // shows 1,2,hi,, alert(arr.length) // shows 5 alert(arr[0]) // shows 1 alert(arr[1000]) // shows undefined??? there is no array bounds checking. you just get 'undefined'.
Arrays are resizable • just like in Java, arrays have a .length property… • but unlike in Java, you can also write to that property! vararr = [] arr.length = 10 // now it's 10 slots long arr.length-- // now it's 9... alert(arr[0]) // shows undefined because of this, arrays even have methods to treat them as stacks/queues: arr = [] arr.push(10) arr.push(20) alert(arr.join(", ")) // shows 10, 20
for-in loops • JS has regular C-style loops… for(var i = 0; i < arr.length; i++) { // ugh alert(arr[i]) } • it also has for-in loops, but they don't work like in Java: for(var i inarr) { // shorter, but gives INDICES. alert(arr[i]) // NOT values! alert(typeof(i)) // AND IT'S A STRING??!?!? } • fortunately, ES6 adds for-of loops (see the example).
