Homework answers / question archive / Lab 1 Learning Objectives After completing this lab you will be able to: Understand the basic concepts of JavaScript Variables Data Structures (Arrays, Objects) Control Structures & Loops Functions Dynamic typing Include and run JavaScript code in your websites Debug your JavaScript code using the Web Console Manipulate the DOM with JavaScript code Understand and create JSON Prerequisites Update your starter code repository: Open a command line prompt Navigate to the lab directory, for example cd /my_folder/Spring-2023-Labs Run command git pull (Optional) You have read Chapter 3 in D3 - Interactive Data Visualization for the Web by Scott Murray (only the JavaScript section) Recommended Reading JavaScript For Cats: An introduction for new programmers by M

Lab 1 Learning Objectives After completing this lab you will be able to: Understand the basic concepts of JavaScript Variables Data Structures (Arrays, Objects) Control Structures & Loops Functions Dynamic typing Include and run JavaScript code in your websites Debug your JavaScript code using the Web Console Manipulate the DOM with JavaScript code Understand and create JSON Prerequisites Update your starter code repository: Open a command line prompt Navigate to the lab directory, for example cd /my_folder/Spring-2023-Labs Run command git pull (Optional) You have read Chapter 3 in D3 - Interactive Data Visualization for the Web by Scott Murray (only the JavaScript section) Recommended Reading JavaScript For Cats: An introduction for new programmers by M

Computer Science

Share With

Lab 1 Learning Objectives After completing this lab you will be able to: Understand the basic concepts of JavaScript Variables Data Structures (Arrays, Objects) Control Structures & Loops Functions Dynamic typing Include and run JavaScript code in your websites Debug your JavaScript code using the Web Console Manipulate the DOM with JavaScript code Understand and create JSON Prerequisites Update your starter code repository: Open a command line prompt Navigate to the lab directory, for example cd /my_folder/Spring-2023-Labs Run command git pull (Optional) You have read Chapter 3 in D3 - Interactive Data Visualization for the Web by Scott Murray (only the JavaScript section) Recommended Reading JavaScript For Cats: An introduction for new programmers by M. Ogden JavaScript, The Very Basics by C. Scheidegger from U of Arizona Additional Reading JavaScript Fundamentals by A. Lex from U of Utah MDN JavaScript Guide w3 schools JavaScript tutorials JavaScript: The Good Parts (book) by D. Crockford Helpful Videos Introduction to JavaScript from CodeAcademy JavaScript Basics from Udacity Tutorial 1: Introduction to JavaScript This week, we learn the basics of JavaScript, and start by making simple programs that animate simple things with it. Later in the course, we?ll use D3 because of its power and expressivity. But all that D3 does is use these APIs for you, and it is important that you understand at some level how D3 works. The introduction below is not meant to give you a comprehensive description of JavaScript, but rather a foothold. Once you become proficient in the language, then you can start worrying about best practices and special cases, especially as they related to performance and portability across browsers. It?s easier for you simply not to worry about that kind of stuff right now. JavaScript is the most important programming language of the web, and the only programming language that can be used on most web-browsers without any plugins. JavaScript is mostly used on the client-side of a client-server application, other languages such as Java and Python are popular on the server, but JavaScript is nowadays also used on the server e.g., using Node.js . We will be focusing on the client-side in this class. JavaScript can be used with imperative/procedural, object-oriented, and functional programming styles. It is a dynamically typed language, which can be strange for developers who mainly work with strongly typed languages such as C/C++ and Java . Also, Javascript uses prototypical inheritance instead of a classbased model for it?s object oriented purposes. That means that there is no Class that is defined centrally, instead you rely on objects? prototypes for inheritance that can be extended at runtime. If this doesn?t mean much to you now, don?t worry - we?ll go through it slowly. 2/4/23, 8:45 PM https://gitlab.cs.umd.edu/leozcliu/cmsc471-2023-labs/-/wikis/Lab-1 2/11 A short rundown of the basic concepts of JavaScript Variables The first thing to notice is that JavaScript?s variables are dynamically typed: you don?t need to declare their types before using them, and they can refer to values of different types at different times in the program execution. (This is convenient but quite error-prone: it?s usually a bad idea to make too much use of this feature.) You also do not need to declare a variable ahead of time. If you don?t, then JavaScript either assumes you?re referring to an already existing variable, or it creates a new global variable. Again, this is convenient but very error-prone (this is a theme, as you?ll see). One common source of confusion is that typos in variable assignments are not caught: they just become global variables. To create a local variable, use the keyword var: Data structures The above described basic data types and variables are the foundation for all other data structures. A JavaScript variable is quite flexible as we have just seen, but very often we need to store a sequence of values or more complex forms of data. Arrays Array literals are declared and addressed by using bracket notation [] Each value is separated by a comma. Arrays can contain any type of data, just like simple variables. Objects Objects are the second type of compound values in JavaScript. There are two ways to access elements in an object. For example, to retrieve the first element in the above object, we can use obj.key1 or obj["key1"] . So, both obj.key1 + obj.key2 and obj["key1"] + obj["key2"] will give you the same result which is 7. // -- global variables -- a = 0; // an integer stored as number b = "1"; // a string c = [1, 2, "3", [4]]; // an array f = false; // a boolean f = 34.56; // redefining f as a float stored as a number // -- "local" variables -- var name = "Tom"; var age = 21; var x = 0; var c = [0,1,2]; var e = []; // empty array declaration // you can but should not use arrays of different type var multiTypeArray = [0, "This", "is", true, "unfortunately"]; // you can access the length of the array using the length attribute var myLength = multiTypeArray.length; // you can nest arrays var nested = [[1, 2], [3, 4], [5, 6]]; // extend arrays c.push(3); var newLength = c.push(4); // remove last element from array var lastElement = c.pop(); // find index of entry: var pos = c.indexOf(2); obj = { key1: 3, key2: 4 }; 2/4/23, 8:45 PM 3/11 Furthermore, you can extend objects dynamically. After running the above line, newKey will be added to obj : JSON (JavaScript Object Notation) JSON is a specific syntax for storing and exchanging data. It is a popular data-interchange format for APIs (application program interfaces) and therefore very important for our future tasks. It is basically a JavaScript object, with the only difference being that the property names are surrounded by double quotation marks. Activity 1: Using the Web Console in Chrome The Web Console in Chrome is extremely useful for debugging. Using console.log() , you can output the values of variables to the Web Console. In this activity, you will learn how to use it. 1. Design a data structure Find a proper compound JavaScript data structure to store the following information and make sure that its values are simple and efficient: We want to create data for 4 of your favorite Game of Thrones characters. If you don't know what Game of Thrones is, then you are missing out! Create a data structure and use it to populate data for four characters, each with these attributes: name status (dead / alive) house (principal house associated with) list of house_affiliations probability_of_survival current_location Which JavaScript data structure would you use (basic data types, arrays, objects, etc.)? Which data types (string, boolean, etc.) would you use to represent the data? Once you know how you want to implement it, continue to step (2). 2. Implement data structure in JavaScript Scripts can be included directly in HTML or in a separate file with .js suffix and then referenced. We have already created lab1/activity_1/main.js and referenced it in lab1/activity_1/index.html . Referencing a javascript file is done by including the following in the html document: In this exercise, open lab1/activity_1/main.js with your code editor. Create an array of the example data (4 Game of Thrones characters as objects , with the above described attributes) and implement it in main.js . If you have no idea about what characters you like, you can add the following array that stores my favorite characters to main.js obj.newKey = 5; obj = { key1: 3, key2: 4, newKey: 5 }; // JSON object var student = { "id": "1", "name": "Matt Ryan", "courses": ["CS 4460", "CS 3220", "PSYC 1010", "CS 3780"], "active": true } ... // Referenced (below of the

tag)