title
JavaScript Full Course for free 🌐

description
#JavaScript #tutorial #beginners JavaScript tutorial for beginners full course ⭐️Time Stamps⭐️ #1 (00:00:00) JavaScript tutorial for beginners 🌐 #2 (00:08:02) variables ❎ #3 (00:16:32) arithmetic expressions 🧮 #4 (00:21:14) user input 🧮 #5 (00:25:41) type conversion 💱 #6 (00:30:11) const ⛔ #7 (00:33:13) Math 🔣 #8 (00:36:52) hypotenuse calc practice program 📐 #9 (00:43:12) counter program #️⃣ #10 (00:46:52) random number generator 🎲 #11 (00:50:53) useful string methods 🧵 #12 (00:55:13) string slicing ✂️ #13 (00:59:08) method chaining ⛓️ #14 (01:01:03) if statements ❔ #15 (01:05:24) checked property ✔️ #16 (01:12:39) switches 🔀 #17 (01:16:26) AND OR logical operators && || #18 (01:20:29) NOT logical operator ❕ #19 (01:23:26) while loops 🔁 #20 (01:26:14) do while loops 🔂 #21 (01:28:36) for loops 🔃 #22 (01:32:05) break and continue statements 💔 #23 (01:33:34) nested loops ➿ #24 (01:38:05) functions ☎️ #25 (01:42:43) return statement 🔙 #26 (01:45:36) ternary operator ❔ #27 (01:48:58) var vs let 🥊 #28 (01:53:25) template literals 💬 #29 (01:57:47) format currency 💲 #30 (02:02:47) number guessing game 🔢 #31 (02:06:55) temperature conversion program 🌡️ #32 (02:15:49) arrays 🍎 #33 (02:20:33) loop through an array ➰ #34 (02:23:16) sort an array of strings 🗃️ #35 (02:24:50) 2D arrays 🛒 #36 (02:29:14) spread operator 🖐️ #37 (02:33:32) rest parameters 💤 #38 (02:37:09) callbacks 🤙 #39 (02:41:58) array.forEach() 🔚 #40 (02:45:19) array.map() ⚙️ #41 (02:48:10) array.filter() 🗑️ #42 (02:50:21) array.reduce() 🔁 #43 (02:52:33) sort an array of numbers 📋 #44 (02:54:41) function expressions 🤫 #45 (02:59:55) arrow function expressions 🏹 #46 (03:05:42) shuffle an array 🃏 #47 (03:09:30) nested functions 🐣 #48 (03:12:47) maps 🗺️ #49 (03:17:07) objects 🚗 #50 (03:21:09) this keyword 🔝 #51 (03:24:08) classes 👨‍🏫 #52 (03:27:15) constructors 👷 #53 (03:30:48) static keyword ⚡ #54 (03:34:22) inheritance 👪 #55 (03:40:23) super keyword 🦸‍♂️ #56 (03:44:59) getters & setters 🏎️ #57 (03:51:17) objects as arguments 📫 #58 (03:53:44) array of objects 📮 #59 (03:56:52) anonymous objects 🎭 #60 (04:02:44) error handling 🏤 #61 (04:07:27) setTimeout() ⏰ #62 (04:12:16) setInterval() ⏲️ #63 (04:14:48) Date objects 📅 #64 (04:24:08) clock program 🕧 #65 (04:28:56) asynchronous ⏳ #66 (04:31:17) console.time() ⌚ #67 (04:33:46) promises 🤞 #68 (04:40:23) async 📥 #69 (04:43:12) await ✋ #70 (04:46:44) ES6 Modules 🚢 #71 (04:51:21) DOM intro ✨ #72 (04:54:50) element selectors 👇 #73 (05:03:35) DOM traversal 🌳 #74 (05:09:01) add/change HTML elements 🌎 #75 (05:14:01) add/change CSS properties 🎨 #76 (05:18:26) events 🎟️ #77 (05:24:32) addEventListener() 👂 #78 (05:30:28) show/hide HTML elements 💡 #79 (05:35:28) detect key presses 🛎️ #80 (05:40:21) animations 🎞️ #81 (05:49:40) canvas API 🖌️ #82 (06:02:34) window 🗔 #83 (06:08:43) cookies 🍪 #84 (06:22:57) stopwatch program ⏱️ #85 (06:35:11) rock paper scissors game ✊ #86 (06:46:46) tictactoe game ⭕ #87 (07:05:43) snake game 🐍 #88 (07:34:32) pong game 🏓 Copyright Disclaimer: This video is the intellectual property of Bro Code. All rights reserved. No part of this video may be reproduced, distributed, or transmitted in any form or by any means, including but not limited to recording, uploading, or other electronic or mechanical methods, without my written permission, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law.

detail
{'title': 'JavaScript Full Course for free 🌐', 'heatmap': [{'end': 1732.342, 'start': 861.104, 'weight': 0.801}, {'end': 2882.266, 'start': 2300.911, 'weight': 0.833}, {'end': 6050.377, 'start': 5760.709, 'weight': 0.904}, {'end': 7776.53, 'start': 7199.699, 'weight': 0.842}, {'end': 8356.584, 'start': 8063.305, 'weight': 0.701}, {'end': 10082.108, 'start': 9502.223, 'weight': 0.877}, {'end': 10955.418, 'start': 10653.542, 'weight': 0.866}, {'end': 11809.631, 'start': 11520.751, 'weight': 0.723}, {'end': 12961.385, 'start': 12668.837, 'weight': 0.704}, {'end': 14117.307, 'start': 13535.613, 'weight': 0.728}, {'end': 15268.103, 'start': 14975.37, 'weight': 0.985}, {'end': 16129.082, 'start': 15838.933, 'weight': 0.787}, {'end': 16710.08, 'start': 16414.604, 'weight': 0.782}, {'end': 18721.643, 'start': 16994.193, 'weight': 0.709}, {'end': 19584.172, 'start': 19005.5, 'weight': 0.881}, {'end': 20163.93, 'start': 19870.764, 'weight': 0.767}], 'summary': 'A comprehensive javascript full course covering basics, fundamentals, arrays, object-oriented programming, dom manipulation, html/css manipulation, canvas animations, web development, game development, and creating games in javascript, with practical examples and instructions for creating various programs and games.', 'chapters': [{'end': 1250.985, 'segs': [{'end': 168.92, 'src': 'embed', 'start': 141.118, 'weight': 11, 'content': [{'end': 145.94, 'text': 'Within VS Code, the first thing I recommend doing is downloading the Live Server extension.', 'start': 141.118, 'duration': 4.822}, {'end': 153.664, 'text': "Let's go over to the left navigation bar, go to Extensions, then look up Live Server.", 'start': 147.001, 'duration': 6.663}, {'end': 157.826, 'text': "Then we're gonna click on this.", 'start': 156.685, 'duration': 1.141}, {'end': 160.507, 'text': "Let's pretend that this wasn't already installed.", 'start': 158.686, 'duration': 1.821}, {'end': 162.848, 'text': 'Then click Install.', 'start': 161.907, 'duration': 0.941}, {'end': 168.92, 'text': 'What Live Server does is that every time that you save your JavaScript file,', 'start': 164.298, 'duration': 4.622}], 'summary': 'Recommend downloading live server extension within vs code for live preview of javascript files.', 'duration': 27.802, 'max_score': 141.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw141118.jpg'}, {'end': 429.717, 'src': 'embed', 'start': 398.039, 'weight': 6, 'content': [{'end': 401.962, 'text': 'Then within either single quotes or double quotes, I can say something else.', 'start': 398.039, 'duration': 3.923}, {'end': 405.485, 'text': "It's really good.", 'start': 403.303, 'duration': 2.182}, {'end': 407.868, 'text': 'I like pizza.', 'start': 407.068, 'duration': 0.8}, {'end': 409.089, 'text': "It's really good.", 'start': 408.349, 'duration': 0.74}, {'end': 417.872, 'text': 'You can also create an alert box by typing window dot alert within the parentheses within a set of quotes.', 'start': 409.529, 'duration': 8.343}, {'end': 423.154, 'text': 'What would we like to say? I really love pizza.', 'start': 418.452, 'duration': 4.702}, {'end': 426.436, 'text': 'Alert will create a pop-up.', 'start': 424.095, 'duration': 2.341}, {'end': 427.976, 'text': 'I really love pizza.', 'start': 426.456, 'duration': 1.52}, {'end': 429.717, 'text': "There's also comments.", 'start': 428.656, 'duration': 1.061}], 'summary': 'Transcript discusses creating an alert box and expressing love for pizza.', 'duration': 31.678, 'max_score': 398.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw398039.jpg'}, {'end': 790.15, 'src': 'embed', 'start': 768.362, 'weight': 7, 'content': [{'end': 778.707, 'text': "But if this was a string, I'll put this within quotes, string, well, when we add 1 to age, it's going to concatenate 1 to the end of the string.", 'start': 768.362, 'duration': 10.345}, {'end': 780.027, 'text': 'I am not 211 years old.', 'start': 779.227, 'duration': 0.8}, {'end': 786.709, 'text': "It's treating age as a series of characters, and we're adding an additional character to age.", 'start': 781.408, 'duration': 5.301}, {'end': 790.15, 'text': 'So as a beginner, you really have to pay attention to data types.', 'start': 787.05, 'duration': 3.1}], 'summary': 'Adding 1 to age treats it as string, not numerical. attention to data types is crucial for beginners.', 'duration': 21.788, 'max_score': 768.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw768362.jpg'}, {'end': 1027.08, 'src': 'embed', 'start': 961.416, 'weight': 0, 'content': [{'end': 969.721, 'text': 'Three that we discussed are strings, which are a series of characters, numbers, and booleans, which are either true or false.', 'start': 961.416, 'duration': 8.305}, {'end': 973.163, 'text': 'You can display variables along with text within your console,', 'start': 969.881, 'duration': 3.282}, {'end': 979.331, 'text': "Or you could use string concatenation to display a variable's value along with some text in your DOM.", 'start': 973.323, 'duration': 6.008}, {'end': 981.153, 'text': 'So yeah, those are variables, everybody.', 'start': 979.351, 'duration': 1.802}, {'end': 985.198, 'text': "If you would like a copy of all this code, I'll post this in the comments section down below.", 'start': 981.313, 'duration': 3.885}, {'end': 988.222, 'text': 'If you enjoyed this video, let me know by smashing that like button.', 'start': 985.238, 'duration': 2.984}, {'end': 991.907, 'text': "leave a random comment down below and subscribe if you'd like to become a fellow bro.", 'start': 988.222, 'duration': 3.685}, {'end': 997.87, 'text': 'Hey everybody, I have a super quick video on arithmetic expressions.', 'start': 994.448, 'duration': 3.422}, {'end': 1002.772, 'text': 'An arithmetic expression is a combination of operands and operators.', 'start': 998.03, 'duration': 4.742}, {'end': 1006.134, 'text': 'Operands are values, variables, etc.', 'start': 1003.132, 'duration': 3.002}, {'end': 1013.757, 'text': "Operators are, well, the addition sign, subtraction, multiplication, division, and modulus, which we'll talk about a little bit later.", 'start': 1006.474, 'duration': 7.283}, {'end': 1017.539, 'text': 'An arithmetic expression can be evaluated to a value.', 'start': 1014.017, 'duration': 3.522}, {'end': 1020.66, 'text': 'For example, y equals x plus five.', 'start': 1017.779, 'duration': 2.881}, {'end': 1025.121, 'text': 'X and five would be operands and the addition sign would be the operator.', 'start': 1020.96, 'duration': 4.161}, {'end': 1027.08, 'text': "Just really quick, let's cover a few.", 'start': 1025.34, 'duration': 1.74}], 'summary': 'The transcript covers variables, string concatenation, and arithmetic expressions in programming.', 'duration': 65.664, 'max_score': 961.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw961416.jpg'}], 'start': 0.189, 'title': 'Javascript basics and live server setup', 'summary': 'Introduces javascript as a versatile programming language for web and mobile applications, and covers setting up live server in vs code, javascript variables, and arithmetic expressions basics, presenting practical examples and use cases for better understanding.', 'chapters': [{'end': 137.977, 'start': 0.189, 'title': 'Javascript basics: getting started', 'summary': 'Introduces javascript as a web-based interpreted programming language used for adding interactive behavior to web pages, building web and mobile applications, creating command line tools, and game development, and provides recommendations for web browser and text editor preferences.', 'duration': 137.788, 'highlights': ['JavaScript is a web-based interpreted programming language used to add interactive behavior to web pages, build web and mobile applications, create command line tools, and for game development. JavaScript is used for adding interactive behavior to web pages, building web and mobile applications, creating command line tools, and game development.', 'JavaScript is not the same as Java, and both languages were developed around the same time. JavaScript is distinct from Java and both languages were developed around the same time.', 'Recommended web browser options include the latest version of Chrome, Firefox, Safari, and Opera, while it is advised not to use Internet Explorer. Recommended web browser options include the latest version of Chrome, Firefox, Safari, and Opera, with a caution against using Internet Explorer.', 'Visual Studio Code is recommended as a text editor, with instructions provided for downloading and installation. Visual Studio Code is recommended as a text editor, with instructions provided for downloading and installation.']}, {'end': 462.8, 'start': 141.118, 'title': 'Setting up live server in vs code', 'summary': 'Covers the process of setting up live server extension in vs code, creating new files and linking them, and utilizing console.log and alert functions to display output and create pop-ups for better web development.', 'duration': 321.682, 'highlights': ['Live Server extension updates the web browser every time a JavaScript file is saved, providing real-time reflection of changes. The Live Server extension updates the web browser every time a JavaScript file is saved, ensuring real-time reflection of changes.', 'The process of creating a new folder, new JavaScript file, HTML file, and CSS style sheet is explained. The process of creating a new folder, new JavaScript file, HTML file, and CSS style sheet is explained in detail, providing a comprehensive guide for file creation.', 'The tutorial demonstrates the linking of CSS style sheet to HTML file and JavaScript file to HTML file. The tutorial demonstrates the linking of CSS style sheet to HTML file and JavaScript file to HTML file, emphasizing the importance of linking files for web development.', 'The usage of console.log to display output and window.alert to create pop-ups is illustrated, providing practical examples of displaying information and creating alerts. The usage of console.log to display output and window.alert to create pop-ups is illustrated, providing practical examples of displaying information and creating alerts for better web development.', 'The concept of comments in JavaScript, including single-line and multi-line comments, is explained. The concept of comments in JavaScript, including single-line and multi-line comments, is explained, highlighting the importance of comments for adding notes and improving code readability.']}, {'end': 981.153, 'start': 464.107, 'title': 'Introduction to javascript variables', 'summary': 'Covers a quick introduction to javascript variables, including their definition, declaration, assignment, and data types such as strings, numbers, and booleans, along with examples of displaying variables in the console and the dom.', 'duration': 517.046, 'highlights': ['Variables are containers for storing data and behave as if they were the value they contain. Variables act as containers for data and behave as if they were the value they contain, demonstrating the fundamental purpose of variables in programming.', 'The two steps to creating a variable are declaration and assignment, and they can be done together or separately. The process of creating a variable involves two steps: declaration and assignment. These steps can be combined or performed separately based on the specific requirements of the program.', 'The discussed data types for variables include strings, numbers, and booleans, each serving different purposes in programming. The chapter explores three common data types for variables: strings, numbers, and booleans, providing an overview of their distinct characteristics and applications in programming.', 'Examples of displaying variables in the console and the DOM are provided, including the usage of string concatenation to display variable values along with text. Practical examples are demonstrated for displaying variables in both the console and the DOM, showcasing the use of string concatenation to present variable values alongside text in the HTML document.']}, {'end': 1250.985, 'start': 981.313, 'title': 'Arithmetic expressions basics', 'summary': 'Discusses arithmetic expressions, covering addition, subtraction, multiplication, division, modulus, augmented assignment operators, and operator precedence, illustrating examples and use cases.', 'duration': 269.672, 'highlights': ['The chapter discusses arithmetic expressions, covering addition, subtraction, multiplication, division, and modulus, which are evaluated to a value.', "It demonstrates examples of using arithmetic expressions, such as incrementing, decrementing, multiplying, dividing, and finding the modulus of variables, providing quantifiable data like 'students' being incremented from 20 to 21 and then decremented from 21 to 19.", "The chapter also explains the augmented assignment operators, providing examples like 'students plus equals 1' and 'students times equals 2' to show a shortcut in reassigning the same variable.", "It explains operator precedence in arithmetic expressions, demonstrating an example equation 'result equals 1 plus 2 times 3 plus 4' and the order of solving it, resulting in 'result' being 15."]}], 'duration': 1250.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw189.jpg', 'highlights': ['JavaScript is a versatile programming language for web and mobile applications, command line tools, and game development.', 'Visual Studio Code is recommended as a text editor for JavaScript development.', 'Live Server extension updates the web browser in real-time when a JavaScript file is saved.', 'The tutorial provides a comprehensive guide for creating new folders, JavaScript files, HTML files, and CSS style sheets.', 'The tutorial emphasizes the importance of linking CSS and JavaScript files to HTML for web development.', 'Practical examples are provided for using console.log to display output and window.alert to create pop-ups.', 'The concept of comments in JavaScript, including single-line and multi-line comments, is explained for code readability.', 'Variables act as containers for data and behave as if they were the value they contain.', 'The chapter explores three common data types for variables: strings, numbers, and booleans.', 'Practical examples are demonstrated for displaying variables in both the console and the DOM.', 'The chapter covers arithmetic expressions, including addition, subtraction, multiplication, division, and modulus.', 'Examples of using arithmetic expressions, incrementing, decrementing, multiplying, and dividing variables are provided.', 'The chapter explains augmented assignment operators and operator precedence in arithmetic expressions.']}, {'end': 4324.221, 'segs': [{'end': 1321.691, 'src': 'embed', 'start': 1290.598, 'weight': 7, 'content': [{'end': 1295.459, 'text': "I'm going to create a variable named username, and the user will type in a name for themselves.", 'start': 1290.598, 'duration': 4.861}, {'end': 1307.666, 'text': 'Let username equals, and to create a window prompt, we type window.prompt parentheses, and within the parentheses we can add a message.', 'start': 1296.059, 'duration': 11.607}, {'end': 1316.058, 'text': "What's your name? After a user types in some user input, we will assign whatever they type into a variable.", 'start': 1308.747, 'duration': 7.311}, {'end': 1317.74, 'text': "So I'm going to display this.", 'start': 1316.498, 'duration': 1.242}, {'end': 1321.691, 'text': 'Console.log username.', 'start': 1318.789, 'duration': 2.902}], 'summary': "Creating a variable 'username' to prompt user for their name and displaying the input using console.log.", 'duration': 31.093, 'max_score': 1290.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw1290598.jpg'}, {'end': 1638.646, 'src': 'embed', 'start': 1610.691, 'weight': 0, 'content': [{'end': 1613.252, 'text': 'because a string is just a series of characters.', 'start': 1610.691, 'duration': 2.561}, {'end': 1620.155, 'text': "If I need to take some user input and use it with some sort of arithmetic expression, I'll want to convert that string to a number.", 'start': 1613.452, 'duration': 6.703}, {'end': 1623.676, 'text': 'And one way I can do that is to use the number constructor.', 'start': 1620.355, 'duration': 3.321}, {'end': 1633.201, 'text': "So I'm going to set age equal to then type number, make sure it's capital parentheses and then pass in age.", 'start': 1623.936, 'duration': 9.265}, {'end': 1635.483, 'text': 'this will convert a string to a number.', 'start': 1633.201, 'duration': 2.282}, {'end': 1637.065, 'text': 'how old are you 21?', 'start': 1635.483, 'duration': 1.582}, {'end': 1638.646, 'text': 'press. ok, happy birthday.', 'start': 1637.065, 'duration': 1.581}], 'summary': 'Converting user input string to number using number constructor for arithmetic expression.', 'duration': 27.955, 'max_score': 1610.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw1610691.jpg'}, {'end': 1686.337, 'src': 'embed', 'start': 1657.003, 'weight': 6, 'content': [{'end': 1662.345, 'text': "At first it's a string, we convert it and now it's a number and then we can use it in arithmetic expressions.", 'start': 1657.003, 'duration': 5.342}, {'end': 1664.105, 'text': "Here's a few other examples.", 'start': 1662.685, 'duration': 1.42}, {'end': 1668.387, 'text': 'We have three variables, x, y, and z.', 'start': 1664.586, 'duration': 3.801}, {'end': 1675.649, 'text': "I'm going to set x to equal, and we will use the number constructor, and we will convert the string 3.14 into a number.", 'start': 1668.387, 'duration': 7.262}, {'end': 1686.337, 'text': 'then i will display whatever x is, as well as the data type, type of x.', 'start': 1679.076, 'duration': 7.261}], 'summary': 'Convert string to number for arithmetic operations, e.g., 3.14 to number.', 'duration': 29.334, 'max_score': 1657.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw1657003.jpg'}, {'end': 2882.266, 'src': 'heatmap', 'start': 2300.911, 'weight': 0.833, 'content': [{'end': 2306.835, 'text': 'So in the next step, we could set C equal to math.square root.', 'start': 2300.911, 'duration': 5.924}, {'end': 2310.037, 'text': 'And pass in C.', 'start': 2308.216, 'duration': 1.821}, {'end': 2312.919, 'text': 'If you would like to do this in less steps, you could copy all of this.', 'start': 2310.037, 'duration': 2.882}, {'end': 2317.167, 'text': 'cut this line, and paste what we just copied.', 'start': 2314.366, 'duration': 2.801}, {'end': 2319.028, 'text': 'So this would only take one line of code.', 'start': 2317.248, 'duration': 1.78}, {'end': 2322.39, 'text': 'Then at the end, we will display side C.', 'start': 2319.369, 'duration': 3.021}, {'end': 2325.212, 'text': 'Side C.', 'start': 2322.39, 'duration': 2.822}, {'end': 2326.872, 'text': "C Okay, let's run this.", 'start': 2325.212, 'duration': 1.66}, {'end': 2329.274, 'text': 'Enter side A.', 'start': 2328.393, 'duration': 0.881}, {'end': 2332.23, 'text': 'A is 3.', 'start': 2329.274, 'duration': 2.956}, {'end': 2333.571, 'text': 'B is 4.', 'start': 2332.23, 'duration': 1.341}, {'end': 2335.732, 'text': 'Side C equals 5.', 'start': 2333.571, 'duration': 2.161}, {'end': 2338.294, 'text': "Okay, now let's make a more advanced version of this program.", 'start': 2335.732, 'duration': 2.562}, {'end': 2341.996, 'text': "We'll accept some user input via some HTML text boxes.", 'start': 2338.494, 'duration': 3.502}, {'end': 2345.899, 'text': "So let's head to our HTML file and add a couple elements.", 'start': 2342.597, 'duration': 3.302}, {'end': 2347.64, 'text': "We'll create three labels.", 'start': 2346.479, 'duration': 1.161}, {'end': 2354.925, 'text': 'Label The first will have an ID equal to maybe a label.', 'start': 2349.301, 'duration': 5.624}, {'end': 2357.867, 'text': "Then close this tag and I'll add a line break.", 'start': 2355.465, 'duration': 2.402}, {'end': 2360.53, 'text': "Then I'll copy this, paste it.", 'start': 2359.07, 'duration': 1.46}, {'end': 2364.191, 'text': "We'll have a B label and a C label.", 'start': 2361.211, 'duration': 2.98}, {'end': 2372.793, 'text': "I'll change the text to side A, colon, side B, and side C.", 'start': 2364.551, 'duration': 8.242}, {'end': 2375.074, 'text': 'Okay, and this is what we have so far.', 'start': 2372.793, 'duration': 2.281}, {'end': 2380.475, 'text': "I'll add two text boxes right underneath A and B, and then a button later.", 'start': 2375.554, 'duration': 4.921}, {'end': 2383.476, 'text': "We'll create a self-closing input tag.", 'start': 2380.976, 'duration': 2.5}, {'end': 2386.357, 'text': "Then I'll add a line break at the end before I forget.", 'start': 2384.156, 'duration': 2.201}, {'end': 2392.25, 'text': "Set the type equal to text because it's a text box.", 'start': 2387.228, 'duration': 5.022}, {'end': 2397.652, 'text': 'And I will give this a unique ID of a text box.', 'start': 2393.01, 'duration': 4.642}, {'end': 2400.413, 'text': "Okay, let's copy this.", 'start': 2399.353, 'duration': 1.06}, {'end': 2406.135, 'text': 'Then underneath B label and give this text box an ID of B text box.', 'start': 2401.554, 'duration': 4.581}, {'end': 2408.056, 'text': 'Okay, this is what we have so far.', 'start': 2406.596, 'duration': 1.46}, {'end': 2411.818, 'text': "Then I'll create a button underneath this second text box.", 'start': 2408.736, 'duration': 3.082}, {'end': 2412.678, 'text': 'So right here.', 'start': 2412.058, 'duration': 0.62}, {'end': 2418.414, 'text': "So we'll create a pair of button tags and a line break.", 'start': 2414.87, 'duration': 3.544}, {'end': 2426.282, 'text': "I'll set the type equal to button and an ID of what about submit button.", 'start': 2418.794, 'duration': 7.488}, {'end': 2429.186, 'text': 'Then I should probably add some text.', 'start': 2427.245, 'duration': 1.941}, {'end': 2432.228, 'text': 'So between the button tags, submit.', 'start': 2429.886, 'duration': 2.342}, {'end': 2436.71, 'text': "So let's save, then heading back to our JavaScript file, this is what we have to type.", 'start': 2432.548, 'duration': 4.162}, {'end': 2440.812, 'text': "This will be a little bit advanced for us because we haven't discussed functions yet.", 'start': 2437.11, 'duration': 3.702}, {'end': 2443.514, 'text': 'When we click on this button, we need to do something.', 'start': 2441.172, 'duration': 2.342}, {'end': 2451.098, 'text': 'To select this button, we will type document.getElementById.', 'start': 2443.894, 'duration': 7.204}, {'end': 2455.06, 'text': 'Within the parentheses, we will list a unique ID.', 'start': 2452.438, 'duration': 2.622}, {'end': 2458.773, 'text': 'I would like the ID of my submit button.', 'start': 2456.772, 'duration': 2.001}, {'end': 2463.717, 'text': 'Then follow this with dot on click.', 'start': 2460.455, 'duration': 3.262}, {'end': 2466.558, 'text': 'When we click on this button, we would like to do something.', 'start': 2464.097, 'duration': 2.461}, {'end': 2468.359, 'text': 'We would like to perform a function.', 'start': 2466.598, 'duration': 1.761}, {'end': 2471.561, 'text': 'Function, parentheses, curly braces.', 'start': 2468.84, 'duration': 2.721}, {'end': 2474.603, 'text': 'Within the curly braces, we will execute some code.', 'start': 2472.041, 'duration': 2.562}, {'end': 2477.084, 'text': 'And actually, we can copy a lot of what we have here.', 'start': 2475.023, 'duration': 2.061}, {'end': 2480.426, 'text': "So let's copy our previous code and paste it.", 'start': 2477.644, 'duration': 2.782}, {'end': 2482.347, 'text': 'But we need to change a couple things around.', 'start': 2480.726, 'duration': 1.621}, {'end': 2483.728, 'text': 'We would not like window prompts.', 'start': 2482.407, 'duration': 1.321}, {'end': 2489.291, 'text': "So let's change this line to a equals document.", 'start': 2484.348, 'duration': 4.943}, {'end': 2502.073, 'text': 'dot get element by id, and I would like to get the value of this text box, which has a unique id of a text box.', 'start': 2490.646, 'duration': 11.427}, {'end': 2506.155, 'text': 'Follow this with dot value.', 'start': 2504.214, 'duration': 1.941}, {'end': 2510.798, 'text': "We're taking the value of this text box and assigning it to variable a.", 'start': 2506.715, 'duration': 4.083}, {'end': 2514.8, 'text': "When we accept user input, it's normally a string, we're going to convert it to a number.", 'start': 2510.798, 'duration': 4.002}, {'end': 2517.702, 'text': "Let's do the same thing with b.", 'start': 2515.761, 'duration': 1.941}, {'end': 2527.268, 'text': 'so copy that line, paste it, change a to b here and here as well, then convert it to a number.', 'start': 2517.702, 'duration': 9.566}, {'end': 2528.588, 'text': 'we can keep this line of code.', 'start': 2527.268, 'duration': 1.32}, {'end': 2530.349, 'text': 'the logic is still the same.', 'start': 2528.588, 'duration': 1.761}, {'end': 2532.63, 'text': 'and lastly, we can update this label.', 'start': 2530.349, 'duration': 2.281}, {'end': 2535.251, 'text': "i'm going to change this around real quick.", 'start': 2532.63, 'duration': 2.621}, {'end': 2538.052, 'text': "i don't want to display anything, but we'll still keep the label.", 'start': 2535.251, 'duration': 2.801}, {'end': 2541.474, 'text': "i'm going to change the inner html of this label.", 'start': 2538.052, 'duration': 3.422}, {'end': 2548.797, 'text': 'c label, document dot, get element by id.', 'start': 2541.474, 'duration': 7.323}, {'end': 2555.746, 'text': "We are selecting C label and I'm going to change the inner HTML.", 'start': 2550.421, 'duration': 5.325}, {'end': 2562.953, 'text': 'And set this equal to side C colon space plus C.', 'start': 2556.527, 'duration': 6.426}, {'end': 2568.599, 'text': "Okay, so make sure you save both your HTML document and your JavaScript file, and let's run this.", 'start': 2562.953, 'duration': 5.646}, {'end': 2572.596, 'text': 'So side A is 3, side B is 4.', 'start': 2569.915, 'duration': 2.681}, {'end': 2575.718, 'text': "Let's press submit, and side C is 5.", 'start': 2572.596, 'duration': 3.122}, {'end': 2581.34, 'text': 'So yeah, everybody, that is a practice program to find the hypotenuse of a right-angled triangle.', 'start': 2575.718, 'duration': 5.622}, {'end': 2585.282, 'text': "If you would like a copy of all this code, I'll post this in the comments section down below.", 'start': 2581.44, 'duration': 3.842}, {'end': 2589.324, 'text': 'If this video helped you out, feel free to help me out by smashing that like button.', 'start': 2585.442, 'duration': 3.882}, {'end': 2592.646, 'text': "leave random comments down below and subscribe if you'd like to become a fellow bro.", 'start': 2589.324, 'duration': 3.322}, {'end': 2593.907, 'text': 'Hey everybody.', 'start': 2593.086, 'duration': 0.821}, {'end': 2598.11, 'text': "In this video we're going to create a simple counter program using JavaScript.", 'start': 2594.167, 'duration': 3.943}, {'end': 2601.012, 'text': 'So sit back, relax, and enjoy the show.', 'start': 2598.39, 'duration': 2.622}, {'end': 2603.234, 'text': "Let's begin everybody.", 'start': 2602.233, 'duration': 1.001}, {'end': 2605.375, 'text': 'So head to your HTML document.', 'start': 2603.434, 'duration': 1.941}, {'end': 2607.797, 'text': 'We will create one label and three buttons.', 'start': 2605.595, 'duration': 2.202}, {'end': 2611.44, 'text': 'Label Use a closing tag.', 'start': 2609.598, 'duration': 1.842}, {'end': 2612.821, 'text': 'Add a line break.', 'start': 2612.14, 'duration': 0.681}, {'end': 2615.983, 'text': 'The ID of this label will be countLabel.', 'start': 2613.181, 'duration': 2.802}, {'end': 2617.965, 'text': 'Count Label.', 'start': 2616.664, 'duration': 1.301}, {'end': 2620.767, 'text': 'The text will set to be 0 to begin with.', 'start': 2618.565, 'duration': 2.202}, {'end': 2623.194, 'text': "We'll need three buttons.", 'start': 2622.193, 'duration': 1.001}, {'end': 2627.737, 'text': 'Button, close it.', 'start': 2625.195, 'duration': 2.542}, {'end': 2631, 'text': 'The first button will have an ID of decrease button.', 'start': 2628.198, 'duration': 2.802}, {'end': 2636.985, 'text': 'Decrease button, and the text will be decrease.', 'start': 2632.341, 'duration': 4.644}, {'end': 2642.129, 'text': "Okay, let's copy this button, paste it two additional times.", 'start': 2637.005, 'duration': 5.124}, {'end': 2645.815, 'text': 'The second button will be a reset button.', 'start': 2643.834, 'duration': 1.981}, {'end': 2647.355, 'text': 'Text Reset.', 'start': 2646.235, 'duration': 1.12}, {'end': 2649.816, 'text': 'And the third button will be increase.', 'start': 2647.935, 'duration': 1.881}, {'end': 2651.596, 'text': 'Increase button.', 'start': 2650.536, 'duration': 1.06}, {'end': 2658.199, 'text': 'Increase I would like to change the font size as well as the positioning of my account label.', 'start': 2652.677, 'duration': 5.522}, {'end': 2660.839, 'text': "I'll link an external CSS style sheet.", 'start': 2658.559, 'duration': 2.28}, {'end': 2662.78, 'text': 'So I will create a new file.', 'start': 2661.44, 'duration': 1.34}, {'end': 2670.322, 'text': 'Style.css Within the head of my HTML document, I need to link the style sheet.', 'start': 2663.8, 'duration': 6.522}, {'end': 2671.723, 'text': 'Use the link tag.', 'start': 2670.722, 'duration': 1.001}, {'end': 2674.723, 'text': "We'll set the relationship attribute.", 'start': 2672.563, 'duration': 2.16}, {'end': 2677.264, 'text': 'Set this equal to style sheet.', 'start': 2674.964, 'duration': 2.3}, {'end': 2681.585, 'text': 'And set the href attribute to the name of your style sheet.', 'start': 2677.744, 'duration': 3.841}, {'end': 2685.546, 'text': "style.css We'll need this count label ID.", 'start': 2682.065, 'duration': 3.481}, {'end': 2689.807, 'text': 'I would like to change the CSS properties of my count label.', 'start': 2686.346, 'duration': 3.461}, {'end': 2691.727, 'text': 'So add a set of curly braces.', 'start': 2690.267, 'duration': 1.46}, {'end': 2694.688, 'text': "We'll center this label and increase the font size.", 'start': 2692.087, 'duration': 2.601}, {'end': 2703.023, 'text': 'display block text align Center.', 'start': 2696.228, 'duration': 6.795}, {'end': 2706.846, 'text': 'Font size 50 should be fine.', 'start': 2704.304, 'duration': 2.542}, {'end': 2707.707, 'text': '50 pixels.', 'start': 2707.267, 'duration': 0.44}, {'end': 2709.929, 'text': 'Save your style sheet.', 'start': 2708.968, 'duration': 0.961}, {'end': 2712.011, 'text': 'Save your HTML file.', 'start': 2710.71, 'duration': 1.301}, {'end': 2714.472, 'text': 'And head to your JavaScript file.', 'start': 2713.051, 'duration': 1.421}, {'end': 2717.175, 'text': "We'll declare and assign a count variable.", 'start': 2714.913, 'duration': 2.262}, {'end': 2719.577, 'text': 'Let count equal 0.', 'start': 2717.455, 'duration': 2.122}, {'end': 2723.279, 'text': 'When we click on one of these three buttons, we would like to perform some function.', 'start': 2719.577, 'duration': 3.702}, {'end': 2726.302, 'text': "Let's select the decrease button.", 'start': 2724.641, 'duration': 1.661}, {'end': 2738.093, 'text': 'Document.getElementById. decreaseButton.onClick.', 'start': 2726.802, 'duration': 11.291}, {'end': 2738.874, 'text': 'let me close out of.', 'start': 2738.093, 'duration': 0.781}, {'end': 2741.335, 'text': 'this equals a function.', 'start': 2738.874, 'duration': 2.461}, {'end': 2743.916, 'text': 'parentheses curly braces.', 'start': 2741.335, 'duration': 2.581}, {'end': 2745.577, 'text': 'so copy this.', 'start': 2743.916, 'duration': 1.661}, {'end': 2747.018, 'text': 'paste it two additional times.', 'start': 2745.577, 'duration': 1.441}, {'end': 2751.947, 'text': 'We have reset button and increase button.', 'start': 2748.646, 'duration': 3.301}, {'end': 2756.049, 'text': 'When I select the decrease button, I will take our count variable.', 'start': 2752.327, 'duration': 3.722}, {'end': 2758.71, 'text': 'Minus equals 1.', 'start': 2756.389, 'duration': 2.321}, {'end': 2761.451, 'text': 'And we will change the inner HTML of this label.', 'start': 2758.71, 'duration': 2.741}, {'end': 2771.734, 'text': 'Document.getElementById CountLabel.innerHTML.', 'start': 2762.691, 'duration': 9.043}, {'end': 2773.635, 'text': 'Set this equal to our count.', 'start': 2772.054, 'duration': 1.581}, {'end': 2776.356, 'text': 'Copy these two lines of code.', 'start': 2774.975, 'duration': 1.381}, {'end': 2779.833, 'text': 'Paste it within each of these functions.', 'start': 2778.131, 'duration': 1.702}, {'end': 2784.14, 'text': 'For the reset button, we will set count to equal 0.', 'start': 2780.555, 'duration': 3.585}, {'end': 2788.086, 'text': 'And the increase button, count plus equals 1.', 'start': 2784.14, 'duration': 3.946}, {'end': 2788.606, 'text': "Let's save.", 'start': 2788.086, 'duration': 0.52}, {'end': 2792.69, 'text': 'When I click the Increase button, it increases my label.', 'start': 2789.568, 'duration': 3.122}, {'end': 2795.091, 'text': 'Decrease decreases my label.', 'start': 2793.15, 'duration': 1.941}, {'end': 2797.933, 'text': 'And the Reset button resets my label.', 'start': 2795.892, 'duration': 2.041}, {'end': 2802.075, 'text': 'So yeah, everybody, that is a simple counter program in JavaScript.', 'start': 2798.273, 'duration': 3.802}, {'end': 2805.477, 'text': "I'll post the code for this program in the comments section down below.", 'start': 2802.415, 'duration': 3.062}, {'end': 2809.159, 'text': 'Hey, if this video helped you out, help me out by smashing that Like button.', 'start': 2805.817, 'duration': 3.342}, {'end': 2812.501, 'text': "leave random comments down below and subscribe if you'd like to become a fellow bro.", 'start': 2809.159, 'duration': 3.342}, {'end': 2818.106, 'text': 'Hey everybody, just so you know that this topic is completely optional.', 'start': 2814.244, 'duration': 3.862}, {'end': 2822.868, 'text': "If you're ever interested in making any sort of games with JavaScript, then this video is a must.", 'start': 2818.246, 'duration': 4.622}, {'end': 2824.308, 'text': "Let's begin to create a random number.", 'start': 2822.968, 'duration': 1.34}, {'end': 2830.951, 'text': "Let's declare a variable and we will set this equal to type math dot and there is a random method.", 'start': 2824.348, 'duration': 6.603}, {'end': 2834.833, 'text': "Then let's display whatever x is console dot log x.", 'start': 2831.351, 'duration': 3.482}, {'end': 2840.815, 'text': 'the random method of math will generate a random decimal number between 0 and 1.', 'start': 2835.373, 'duration': 5.442}, {'end': 2842.035, 'text': 'But we can actually use that.', 'start': 2840.815, 'duration': 1.22}, {'end': 2843.496, 'text': "Maybe we're rolling a dice.", 'start': 2842.295, 'duration': 1.201}, {'end': 2853.579, 'text': "How do I generate a random number between 1 and 6? So to do this, I'm going to take math.random and multiply this by 6.", 'start': 2843.676, 'duration': 9.903}, {'end': 2857.92, 'text': 'This gives us a random decimal number between 0 and 5 technically.', 'start': 2853.579, 'duration': 4.341}, {'end': 2860.781, 'text': 'To truncate the decimal portion, we can round down.', 'start': 2858.28, 'duration': 2.501}, {'end': 2862.622, 'text': 'I will surround this with a set of parentheses.', 'start': 2860.981, 'duration': 1.641}, {'end': 2866.126, 'text': 'And we will use math.floor.', 'start': 2863.442, 'duration': 2.684}, {'end': 2868.108, 'text': 'And this will round down.', 'start': 2867.167, 'duration': 0.941}, {'end': 2873.795, 'text': 'This generates a random number between 0 and 5, because computers always start with 0.', 'start': 2868.589, 'duration': 5.206}, {'end': 2876.298, 'text': 'If I need 1 through 6, I can add an offset.', 'start': 2873.795, 'duration': 2.503}, {'end': 2877.82, 'text': "I'll just add plus 1.", 'start': 2876.559, 'duration': 1.261}, {'end': 2882.266, 'text': 'This generates a random number between 1 and 6, as if we were rolling a dice.', 'start': 2877.82, 'duration': 4.446}], 'summary': 'Programs demonstrate finding hypotenuse, creating counter, and generating random numbers using javascript.', 'duration': 581.355, 'max_score': 2300.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw2300911.jpg'}, {'end': 2834.833, 'src': 'embed', 'start': 2805.817, 'weight': 4, 'content': [{'end': 2809.159, 'text': 'Hey, if this video helped you out, help me out by smashing that Like button.', 'start': 2805.817, 'duration': 3.342}, {'end': 2812.501, 'text': "leave random comments down below and subscribe if you'd like to become a fellow bro.", 'start': 2809.159, 'duration': 3.342}, {'end': 2818.106, 'text': 'Hey everybody, just so you know that this topic is completely optional.', 'start': 2814.244, 'duration': 3.862}, {'end': 2822.868, 'text': "If you're ever interested in making any sort of games with JavaScript, then this video is a must.", 'start': 2818.246, 'duration': 4.622}, {'end': 2824.308, 'text': "Let's begin to create a random number.", 'start': 2822.968, 'duration': 1.34}, {'end': 2830.951, 'text': "Let's declare a variable and we will set this equal to type math dot and there is a random method.", 'start': 2824.348, 'duration': 6.603}, {'end': 2834.833, 'text': "Then let's display whatever x is console dot log x.", 'start': 2831.351, 'duration': 3.482}], 'summary': 'Javascript tutorial video on generating random numbers using math.random method.', 'duration': 29.016, 'max_score': 2805.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw2805817.jpg'}, {'end': 3197.49, 'src': 'embed', 'start': 3166.007, 'weight': 8, 'content': [{'end': 3170.971, 'text': 'The index of the first occurrence of the character O is at index 2, 0, 1, 2.', 'start': 3166.007, 'duration': 4.964}, {'end': 3172.374, 'text': "There's also last index of.", 'start': 3170.972, 'duration': 1.402}, {'end': 3183.407, 'text': "Last index of, and we'll keep that as o the last occurrence of.", 'start': 3172.394, 'duration': 11.013}, {'end': 3189.328, 'text': 'o has an index of five, zero, one, two, three, four, five.', 'start': 3183.407, 'duration': 5.921}, {'end': 3193.129, 'text': 'we can also trim spaces before and after a string.', 'start': 3189.328, 'duration': 3.801}, {'end': 3197.49, 'text': "so i'm going to display this as it is and i'll turn these into comments.", 'start': 3193.129, 'duration': 4.361}], 'summary': "Index of first 'o' at 2, 0, 1, 2 and last 'o' at index 5, zero, one, two, three, four, five. trim spaces before and after a string.", 'duration': 31.483, 'max_score': 3166.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw3166007.jpg'}, {'end': 4228.936, 'src': 'embed', 'start': 4188.055, 'weight': 1, 'content': [{'end': 4189.435, 'text': 'The text will be Visa.', 'start': 4188.055, 'duration': 1.38}, {'end': 4192.216, 'text': 'Then MasterCard.', 'start': 4191.417, 'duration': 0.799}, {'end': 4200.542, 'text': 'MasterCard Lastly, PayPal.', 'start': 4195.739, 'duration': 4.803}, {'end': 4209.178, 'text': 'PayPal Okay, we have our three payment options.', 'start': 4205.094, 'duration': 4.084}, {'end': 4214.162, 'text': 'Since these three radio buttons are within the same group, we can only select one.', 'start': 4210.139, 'duration': 4.023}, {'end': 4215.443, 'text': 'Be sure to save everything.', 'start': 4214.362, 'duration': 1.081}, {'end': 4220.868, 'text': "Heading back to our JavaScript file, let's get all of the buttons and store them within a variable.", 'start': 4216.004, 'duration': 4.864}, {'end': 4228.936, 'text': 'const visaButton equals document.getElementById.', 'start': 4222.169, 'duration': 6.767}], 'summary': 'Three payment options: visa, mastercard, paypal. select one within same group.', 'duration': 40.881, 'max_score': 4188.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw4188055.jpg'}], 'start': 1250.985, 'title': 'Javascript fundamentals', 'summary': 'Covers javascript input methods, type conversion, math basics, string properties and methods, and if statements with practical examples and instructions for creating simple programs, including use of constants and user input.', 'chapters': [{'end': 1986.415, 'start': 1250.985, 'title': 'Javascript input methods & type conversion', 'summary': 'Covers arithmetic expressions, two methods of accepting user input in javascript, type conversion for strings, numbers, and booleans, and the usage and benefits of constants in javascript programs.', 'duration': 735.43, 'highlights': ['Two methods of accepting user input in JavaScript The video demonstrates two ways of accepting user input in JavaScript: the easy way using a simple window prompt and the difficult way using an HTML text box.', "Type conversion for strings, numbers, and booleans The chapter explains how to convert user input from a string to a number using the number constructor, demonstrating the conversion of string '21' to the number 21 and also covers the conversion of numbers to strings and booleans.", 'Usage and benefits of constants in JavaScript programs The concept of constants in JavaScript is explained, highlighting the security they add to code and the prevention of variable changes. The example of calculating the circumference of a circle is used to demonstrate the importance of constants in preventing variable changes.']}, {'end': 2589.324, 'start': 1986.615, 'title': 'Javascript math basics', 'summary': 'Covers javascript math basics including functions and constants, such as rounding, finding maximum and minimum values, and using built-in constants like pi, as well as creating a practice program to find the hypotenuse of a right-angled triangle with user input via prompts and html text boxes.', 'duration': 602.709, 'highlights': ['The chapter covers JavaScript math basics including functions and constants, such as rounding, finding maximum and minimum values, and using built-in constants like pi. The transcript covers the basics of JavaScript math, including rounding, finding maximum and minimum values, and using built-in constants like pi.', 'Creating a practice program to find the hypotenuse of a right-angled triangle with user input via prompts and HTML text boxes. The chapter discusses creating a practice program to find the hypotenuse of a right-angled triangle with user input via prompts and HTML text boxes.']}, {'end': 3045.312, 'start': 2589.324, 'title': 'Creating a simple javascript counter program', 'summary': 'Covers creating a simple counter program using javascript, with instructions to create buttons and labels, link an external css style sheet, and execute functions to increase, decrease, and reset the counter, as well as generating random numbers between 1 and 6 using the math.random method and updating labels on button click.', 'duration': 455.988, 'highlights': ['Instructions to create buttons and labels The chapter provides instructions to create one label and three buttons in an HTML document, with specific IDs and text for each element.', 'Instructions to link an external CSS style sheet and modify CSS properties The chapter explains how to link an external CSS style sheet, create a new file, and change the CSS properties of the count label to center it and increase the font size to 50 pixels.', "Instructions to declare and assign a count variable, and execute functions to increase, decrease, and reset the counter The chapter demonstrates declaring and assigning a count variable in JavaScript, and provides code to execute functions for the decrease button (decrease count by 1), reset button (set count to 0), and increase button (increase count by 1) with corresponding changes to the label's inner HTML.", 'Instructions to generate random numbers between 1 and 6 using the Math.random method The chapter explains how to generate random numbers between 1 and 6 using the Math.random method and rounding down the decimal portion using Math.floor, as well as simulating rolling multiple dice by updating labels in the DOM.']}, {'end': 3655.785, 'start': 3045.792, 'title': 'String properties and methods', 'summary': 'Covers useful string properties and methods, such as length, charat, indexof, lastindexof, trim, touppercase, tolowercase, and replaceall, with practical examples and explanations.', 'duration': 609.993, 'highlights': ['The slice method extracts a section of a string and returns it as a new string without modifying the original string, demonstrated by creating first name and last name variables from a full name. The slice method is demonstrated by creating first name and last name variables from a full name string, using the slice method to extract specific portions, and displaying the results.', 'Method chaining is explained as a programming technique where one method is called after another in one continuous line of code, making the code cleaner and more readable. Method chaining is explained as a programming technique where one method is called after another in one continuous line of code, making the code cleaner and more readable, with practical examples and explanation.', 'Useful string properties and methods are demonstrated, including length, charAt, indexOf, lastIndexOf, trim, toUpperCase, toLowerCase, and replaceAll, with practical examples and explanations. The chapter covers useful string properties and methods, such as length, charAt, indexOf, lastIndexOf, trim, toUpperCase, toLowerCase, and replaceAll, with practical examples and explanations.']}, {'end': 4324.221, 'start': 3656.025, 'title': 'Understanding if statements and checked property', 'summary': 'Explains if statements, showcasing examples of checking conditions and using if-else statements to give different outputs based on the conditions. it also demonstrates the checked property of checkboxes and radio buttons, providing a clear understanding of how to use if-else statements to determine the selected radio button and display the corresponding message.', 'duration': 668.196, 'highlights': ['The chapter explains if statements, showcasing examples of checking conditions and using if-else statements to give different outputs based on the conditions. It provides examples of using if statements to check conditions, such as age being over 18, and using if-else statements to give different outputs based on these conditions.', 'It demonstrates the checked property of checkboxes and radio buttons, providing a clear understanding of how to use if-else statements to determine the selected radio button and display the corresponding message. The chapter demonstrates how to use the checked property of checkboxes and radio buttons to determine if they are selected or not, and then uses if-else statements to display messages based on the selected radio button.']}], 'duration': 3073.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw1250985.jpg', 'highlights': ['Covers javascript input methods, type conversion, math basics, string properties, and if statements with practical examples and instructions for creating simple programs, including use of constants and user input.', 'The chapter explains how to generate random numbers between 1 and 6 using the Math.random method and rounding down the decimal portion using Math.floor, as well as simulating rolling multiple dice by updating labels in the DOM.', 'The concept of constants in JavaScript is explained, highlighting the security they add to code and the prevention of variable changes. The example of calculating the circumference of a circle is used to demonstrate the importance of constants in preventing variable changes.', 'The chapter covers JavaScript math basics including functions and constants, such as rounding, finding maximum and minimum values, and using built-in constants like pi. The transcript covers the basics of JavaScript math, including rounding, finding maximum and minimum values, and using built-in constants like pi.', 'The chapter provides instructions to create one label and three buttons in an HTML document, with specific IDs and text for each element.', "The chapter demonstrates declaring and assigning a count variable in JavaScript, and provides code to execute functions for the decrease button (decrease count by 1), reset button (set count to 0), and increase button (increase count by 1) with corresponding changes to the label's inner HTML.", 'The chapter explains if statements, showcasing examples of checking conditions and using if-else statements to give different outputs based on the conditions.', 'The slice method is demonstrated by creating first name and last name variables from a full name string, using the slice method to extract specific portions, and displaying the results.', 'Method chaining is explained as a programming technique where one method is called after another in one continuous line of code, making the code cleaner and more readable, with practical examples and explanation.']}, {'end': 5863.11, 'segs': [{'end': 4790.068, 'src': 'embed', 'start': 4760.617, 'weight': 1, 'content': [{'end': 4763.138, 'text': "If one is false and the other is true, that's completely fine.", 'start': 4760.617, 'duration': 2.521}, {'end': 4765.84, 'text': "Now you can't add more than one logical operator.", 'start': 4763.658, 'duration': 2.182}, {'end': 4768.061, 'text': "Let's head back to our previous example.", 'start': 4766.36, 'duration': 1.701}, {'end': 4769.682, 'text': "I'm just going to undo everything.", 'start': 4768.401, 'duration': 1.281}, {'end': 4773.68, 'text': "Let's throw in another variable, let sunny.", 'start': 4770.919, 'duration': 2.761}, {'end': 4775.441, 'text': 'Sunny will be a boolean value.', 'start': 4773.92, 'duration': 1.521}, {'end': 4778.442, 'text': "Sunny will equal true if it's sunny outside.", 'start': 4776.081, 'duration': 2.361}, {'end': 4781.184, 'text': "If it's cloudy outside, well then sunny will be false.", 'start': 4778.683, 'duration': 2.501}, {'end': 4790.068, 'text': 'So in order for the weather to be good, the temperature needs to be above zero and under 30, and sunny needs to be equal to true.', 'start': 4781.644, 'duration': 8.424}], 'summary': 'Example of using logical operators with boolean variables.', 'duration': 29.451, 'max_score': 4760.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw4760617.jpg'}, {'end': 5125.541, 'src': 'embed', 'start': 5097.149, 'weight': 0, 'content': [{'end': 5099.21, 'text': "that means there's no value to exit.", 'start': 5097.149, 'duration': 2.061}, {'end': 5102.531, 'text': "i simply can't press ok or cancel.", 'start': 5099.21, 'duration': 3.321}, {'end': 5105.753, 'text': "i need to type in something because we're stuck in a while loop.", 'start': 5102.531, 'duration': 3.222}, {'end': 5108.714, 'text': "i'll type in my first name again and then we can exit.", 'start': 5105.753, 'duration': 2.961}, {'end': 5113.836, 'text': 'once i typed in something for my username, both of these conditions were no longer true.', 'start': 5108.714, 'duration': 5.122}, {'end': 5117.137, 'text': 'then we could escape the while loop and continue on with the rest of the program.', 'start': 5113.836, 'duration': 3.301}, {'end': 5122.139, 'text': 'Now, when you create a while loop, you should write some sort of way to escape the while loop from within it.', 'start': 5117.697, 'duration': 4.442}, {'end': 5124.84, 'text': "Otherwise, you'll encounter what's called an infinite loop.", 'start': 5122.519, 'duration': 2.321}, {'end': 5125.541, 'text': 'Like this.', 'start': 5125.16, 'duration': 0.381}], 'summary': 'To exit the while loop, a value needs to be typed in, preventing an infinite loop.', 'duration': 28.392, 'max_score': 5097.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw5097149.jpg'}, {'end': 5263.552, 'src': 'embed', 'start': 5238.632, 'weight': 3, 'content': [{'end': 5244.597, 'text': 'What if I would like to run this code at least once and then prompt again if the username is equal to an empty string?', 'start': 5238.632, 'duration': 5.965}, {'end': 5250.561, 'text': "One way, although I wouldn't recommend it, is that we can copy this line of code and paste it before the while loop.", 'start': 5244.877, 'duration': 5.684}, {'end': 5256.686, 'text': "That prompt comes up, I'll skip it, and then we enter the while loop, and we're stuck within it until we type in something.", 'start': 5250.701, 'duration': 5.985}, {'end': 5260.609, 'text': "I don't like to repeat code if I don't have to, so there's a better way of writing this.", 'start': 5256.946, 'duration': 3.663}, {'end': 5263.552, 'text': "Let's convert this while loop to a do while loop.", 'start': 5260.929, 'duration': 2.623}], 'summary': 'Refactor code to use do-while loop for prompting username input.', 'duration': 24.92, 'max_score': 5238.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw5238632.jpg'}, {'end': 5431.283, 'src': 'embed', 'start': 5402.367, 'weight': 2, 'content': [{'end': 5405.209, 'text': 'Counter is less than or equal to 100.', 'start': 5402.367, 'duration': 2.842}, {'end': 5408.111, 'text': 'And we have counted from 1 to 100.', 'start': 5405.209, 'duration': 2.902}, {'end': 5411.833, 'text': 'If I need to begin at a different number, I can just set my counter to a different number.', 'start': 5408.111, 'duration': 3.722}, {'end': 5412.714, 'text': "Like, I don't know.", 'start': 5412.033, 'duration': 0.681}, {'end': 5417.076, 'text': '50. now we have begun at 50 and counted to 100.', 'start': 5413.614, 'duration': 3.462}, {'end': 5420.738, 'text': "so this variable counter, it's known as a local variable.", 'start': 5417.076, 'duration': 3.662}, {'end': 5423.019, 'text': "it doesn't exist outside of this for loop.", 'start': 5420.738, 'duration': 2.281}, {'end': 5424.299, 'text': 'what a lot of programmers do.', 'start': 5423.019, 'duration': 1.28}, {'end': 5431.283, 'text': "if they need some sort of temporary variable within a for loop to keep track of what iteration they're on, they'll simply just use i.", 'start': 5424.299, 'duration': 6.984}], 'summary': 'Counted from 1 to 100, demonstrated use of counter variable in a for loop.', 'duration': 28.916, 'max_score': 5402.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw5402367.jpg'}], 'start': 4324.781, 'title': 'Javascript fundamentals', 'summary': 'Covers javascript switch statement, logical operators (and, or, not), javascript loops, break and continue statements, emphasizing their efficiencies, usage, and distinctions, with examples demonstrating their impact on decision-making and potential iterations.', 'chapters': [{'end': 4593.364, 'start': 4324.781, 'title': 'Javascript switch statement', 'summary': 'Explains the javascript switch statement, highlighting its efficiency over using else if statements and its ability to compare a value against multiple case clauses, with an example of comparing letter grades and number grades.', 'duration': 268.583, 'highlights': ['The switch statement in JavaScript examines a value against many case clauses and is more efficient than using many else if statements, providing a better alternative when dealing with multiple conditions.', "An example of using a switch statement to compare letter grades efficiently: A - 'You did great', B - 'You did good', C - 'You did okay', D - 'You passed', F - 'You failed', and a default case for non-matching grades.", 'Demonstration of an alternative way of writing a switch statement to compare number grades against conditions: grade >= 90 - A, grade >= 80 - B, grade >= 70 - C, grade >= 60 - D, and grade < 60 - F.']}, {'end': 4999.345, 'start': 4593.804, 'title': 'Logical operators: and, or, not', 'summary': 'Explains the usage of logical operators including and, or, and not to check multiple conditions concurrently in programming, such as checking temperature ranges and boolean values, with examples demonstrating the impact of these operators on decision-making.', 'duration': 405.541, 'highlights': ['Logical operators allow checking multiple conditions concurrently, enhancing decision-making in programming. The chapter emphasizes the utility of logical operators in programming for concurrently evaluating multiple conditions, enabling efficient decision-making.', 'AND logical operator requires all conditions to be true for the if statement to execute, demonstrated through temperature range checks. The usage of the AND logical operator is illustrated through examples where all specified conditions, such as temperature being within a range, must be true for the if statement to execute.', 'OR logical operator enables execution of if statement if at least one condition is true, exemplified through temperature checks. The chapter demonstrates the functionality of the OR logical operator by showcasing that if at least one specified condition, such as temperature meeting a criterion, is true, the if statement gets executed.', "NOT logical operator reverses the Boolean value of a condition, offering versatility in conditional checks. The NOT logical operator's versatility is highlighted as it allows reversing the Boolean value of a condition, providing alternative ways to write code for conditional checks."]}, {'end': 5522.169, 'start': 4999.525, 'title': 'Javascript loops explained', 'summary': 'Explains the concepts of while loops and for loops in javascript, highlighting the functionality, examples, and distinctions between the two types of loops, emphasizing the potential for infinite iterations in while loops and the specific iterations in for loops.', 'duration': 522.644, 'highlights': ['A while loop repeats some code while a condition is true, potentially leading to infinite iterations. A while loop repeats code while a condition is true, potentially leading to infinite iterations, as demonstrated by prompting for user input until a valid response is received.', 'The concept of an infinite loop is illustrated, emphasizing the need for an escape mechanism within while loops to prevent indefinite repetition of code. The concept of an infinite loop is illustrated, emphasizing the need for an escape mechanism within while loops to prevent indefinite repetition of code, demonstrated by a code snippet with an infinite loop and the resulting frozen web browser.', 'A do while loop is introduced as a variation of the while loop, ensuring that the code is executed at least once before the condition is checked. A do while loop is introduced as a variation of the while loop, ensuring that the code is executed at least once before the condition is checked, exemplified by prompting for user input and ensuring a prompt is displayed at least once.', 'The functionality and flexibility of for loops are explained, emphasizing their suitability for executing a specific number of iterations and the capability to specify the start, end, and increment values. The functionality and flexibility of for loops are explained, emphasizing their suitability for executing a specific number of iterations and the capability to specify the start, end, and increment values, demonstrated by counting from 1 to 10 and then from 10 to 1 with appropriate adjustments in the loop conditions.']}, {'end': 5863.11, 'start': 5522.169, 'title': 'Break and continue statements', 'summary': 'Explains the break and continue statements, highlighting their differences and providing examples of nested loops, including drawing a rectangle within the dom and accepting user input for rows and columns.', 'duration': 340.941, 'highlights': ['The break statement breaks out of a loop entirely, illustrated by stopping a for loop counting numbers 1 through 20 when it reaches 13.', 'The continue statement skips an iteration of a loop, exemplified by skipping the iteration for the number 13 in a for loop counting from 1 to 20.', 'Nested loops are explained through examples, including a nested loop counting numbers up to 3 and a demonstration of drawing a rectangle within the DOM based on user-input rows and columns.']}], 'duration': 1538.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw4324781.jpg', 'highlights': ['The switch statement in JavaScript is more efficient than using many else if statements, providing a better alternative when dealing with multiple conditions.', 'Logical operators allow checking multiple conditions concurrently, enhancing decision-making in programming.', 'A while loop repeats code while a condition is true, potentially leading to infinite iterations, as demonstrated by prompting for user input until a valid response is received.', 'The break statement breaks out of a loop entirely, illustrated by stopping a for loop counting numbers 1 through 20 when it reaches 13.']}, {'end': 8131.085, 'segs': [{'end': 5894.7, 'src': 'embed', 'start': 5864.542, 'weight': 4, 'content': [{'end': 5867.305, 'text': "Sweet So yeah, everybody, that's a nested loop.", 'start': 5864.542, 'duration': 2.763}, {'end': 5869.387, 'text': "It's a loop inside of another loop.", 'start': 5867.505, 'duration': 1.882}, {'end': 5871.849, 'text': "When you encounter them, it's kind of situational.", 'start': 5869.547, 'duration': 2.302}, {'end': 5875.433, 'text': 'In this video, we used a nested loop to help us print a rectangle.', 'start': 5872.169, 'duration': 3.264}, {'end': 5877.434, 'text': "So yeah, that's a nested loop, everybody.", 'start': 5875.613, 'duration': 1.821}, {'end': 5881.679, 'text': 'Hey, if you found this video helpful, be sure to help me out by smashing that like button.', 'start': 5877.635, 'duration': 4.044}, {'end': 5884.982, 'text': "leave random comments down below and subscribe if you'd like to become a fellow bro.", 'start': 5881.679, 'duration': 3.303}, {'end': 5889.635, 'text': 'Hey everybody, we are moving on to functions.', 'start': 5886.932, 'duration': 2.703}, {'end': 5894.7, 'text': 'With a function, you define code once and then use it many times, whenever you need.', 'start': 5889.795, 'duration': 4.905}], 'summary': 'Nested loops are used to print a rectangle; moving on to functions.', 'duration': 30.158, 'max_score': 5864.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw5864542.jpg'}, {'end': 6030.287, 'src': 'embed', 'start': 6003.484, 'weight': 5, 'content': [{'end': 6007.967, 'text': 'So within my happy birthday song, we have my username and my age.', 'start': 6003.484, 'duration': 4.483}, {'end': 6010.509, 'text': 'Functions have access to global variables.', 'start': 6008.247, 'duration': 2.262}, {'end': 6017.153, 'text': "A global variable is basically a variable that's declared outside of any functions or any set of curly braces.", 'start': 6010.969, 'duration': 6.184}, {'end': 6021.376, 'text': 'For example, we may have a function to start our program.', 'start': 6017.494, 'duration': 3.882}, {'end': 6025.019, 'text': 'And we will place this code within here.', 'start': 6023.278, 'duration': 1.741}, {'end': 6030.287, 'text': 'I will call the start program function to begin my program.', 'start': 6027.185, 'duration': 3.102}], 'summary': 'Functions access global variables. a global variable is declared outside functions or curly braces.', 'duration': 26.803, 'max_score': 6003.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw6003484.jpg'}, {'end': 6227.764, 'src': 'embed', 'start': 6203.46, 'weight': 1, 'content': [{'end': 6211.33, 'text': 'copy this line, paste it, change width to height Here and here at the bottom of our program.', 'start': 6203.46, 'duration': 7.87}, {'end': 6214.973, 'text': "Let's create a function to calculate the area of a rectangle.", 'start': 6211.391, 'duration': 3.582}, {'end': 6222.159, 'text': "So to create a function type function, let's name this get area parentheses curly braces.", 'start': 6214.973, 'duration': 7.186}, {'end': 6227.764, 'text': "When we use this function to calculate the area of a rectangle, we'll need to set up some parameters.", 'start': 6222.159, 'duration': 5.605}], 'summary': 'Creating a function to calculate rectangle area with specified parameters.', 'duration': 24.304, 'max_score': 6203.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw6203460.jpg'}, {'end': 6467.795, 'src': 'embed', 'start': 6441.51, 'weight': 10, 'content': [{'end': 6447.959, 'text': 'and the second expression if that condition is false, after a colon, write some expression or some value False.', 'start': 6441.51, 'duration': 6.449}, {'end': 6449.42, 'text': 'So this will do the same thing.', 'start': 6448.42, 'duration': 1}, {'end': 6451.342, 'text': "Currently I'm 12, this returns false.", 'start': 6449.641, 'duration': 1.701}, {'end': 6453.644, 'text': "If I'm 21, well then it's true.", 'start': 6451.582, 'duration': 2.062}, {'end': 6454.665, 'text': 'We have three parts.', 'start': 6453.944, 'duration': 0.721}, {'end': 6462.191, 'text': 'A condition with a question mark, an expression if that condition is true, colon, an expression if that condition is false.', 'start': 6455.205, 'duration': 6.986}, {'end': 6463.732, 'text': "Here's another example.", 'start': 6462.751, 'duration': 0.981}, {'end': 6467.795, 'text': "Maybe we're playing a game, and we have to check to see if somebody won the game.", 'start': 6464.252, 'duration': 3.543}], 'summary': 'Using conditional expressions for true and false conditions, with examples of age and a game.', 'duration': 26.285, 'max_score': 6441.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw6441510.jpg'}, {'end': 6672.177, 'src': 'embed', 'start': 6644.891, 'weight': 0, 'content': [{'end': 6650.518, 'text': "Now when I display i, after it's been declared with the var keyword, we have that uncaught reference error.", 'start': 6644.891, 'duration': 5.627}, {'end': 6651.959, 'text': 'i is not defined.', 'start': 6651.078, 'duration': 0.881}, {'end': 6659.527, 'text': "A variable declared with the var keyword can't escape a set of curly braces, but it can't escape a function if it's contained within one.", 'start': 6652.299, 'duration': 7.228}, {'end': 6662.069, 'text': "And that's where we need to discuss global variables.", 'start': 6659.787, 'duration': 2.282}, {'end': 6665.692, 'text': 'A global variable is declared outside of any functions.', 'start': 6662.509, 'duration': 3.183}, {'end': 6667.074, 'text': 'So we have our function.', 'start': 6666.093, 'duration': 0.981}, {'end': 6672.177, 'text': 'If I was to declare let name equal some name.', 'start': 6667.454, 'duration': 4.723}], 'summary': 'Var keyword creates variables within functions, let allows global scope.', 'duration': 27.286, 'max_score': 6644.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw6644891.jpg'}, {'end': 6904.551, 'src': 'embed', 'start': 6837.142, 'weight': 3, 'content': [{'end': 6846.99, 'text': 'so normally, if i would like to display these variables along with some strings with console.log, i would write something like this hello username,', 'start': 6837.142, 'duration': 9.848}, {'end': 6853.943, 'text': 'You have items.', 'start': 6850.979, 'duration': 2.964}, {'end': 6859.33, 'text': 'Items in your cart.', 'start': 6856.446, 'duration': 2.884}, {'end': 6867.719, 'text': 'Your total is $total.', 'start': 6862.395, 'duration': 5.324}, {'end': 6870.341, 'text': 'Hello bro, you have three items in your cart.', 'start': 6868.379, 'duration': 1.962}, {'end': 6872.982, 'text': 'Your total is $75.', 'start': 6870.541, 'duration': 2.441}, {'end': 6876.965, 'text': 'Another way of writing this, which I like to use, is to use template literals.', 'start': 6872.982, 'duration': 3.983}, {'end': 6881.628, 'text': 'In place of single or double quotes for strings, we will use these backticks.', 'start': 6877.385, 'duration': 4.243}, {'end': 6885.391, 'text': "So I'm going to copy these three lines of code, turn these into comments.", 'start': 6882.129, 'duration': 3.262}, {'end': 6895.526, 'text': 'So when using backticks we can embed a variable or expression within a string.', 'start': 6891.243, 'duration': 4.283}, {'end': 6904.551, 'text': "For this first string let's type hello and to embed a variable or expression use a dollar sign followed by a set of curly braces.", 'start': 6895.906, 'duration': 8.645}], 'summary': 'Using template literals to embed variables in strings for console logging.', 'duration': 67.409, 'max_score': 6837.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw6837142.jpg'}, {'end': 7776.53, 'src': 'heatmap', 'start': 7199.699, 'weight': 0.842, 'content': [{'end': 7210.845, 'text': 'Set the style to currency, then currency, colon, then a unit.', 'start': 7199.699, 'duration': 11.146}, {'end': 7213.047, 'text': 'USD is US dollars.', 'start': 7211.686, 'duration': 1.361}, {'end': 7215.968, 'text': 'So this number is now in US dollars.', 'start': 7213.767, 'duration': 2.201}, {'end': 7219.751, 'text': 'And you can see too that this number is rounded to dollars and cents.', 'start': 7216.489, 'duration': 3.262}, {'end': 7222.332, 'text': 'Originally we had three decimal places.', 'start': 7220.471, 'duration': 1.861}, {'end': 7223.853, 'text': "Okay, let's try another.", 'start': 7222.352, 'duration': 1.501}, {'end': 7228.918, 'text': "What about rupees? Let's copy this, paste it.", 'start': 7224.473, 'duration': 4.445}, {'end': 7232.72, 'text': 'H-I-I-N Currency.', 'start': 7229.758, 'duration': 2.962}, {'end': 7236.282, 'text': 'Rupees have a currency code of I-N-R.', 'start': 7233.521, 'duration': 2.761}, {'end': 7238.984, 'text': "There Then let's try Euros.", 'start': 7237.383, 'duration': 1.601}, {'end': 7241.825, 'text': "Let's set the language to German.", 'start': 7240.064, 'duration': 1.761}, {'end': 7244.027, 'text': 'D-E dash D-E.', 'start': 7242.146, 'duration': 1.881}, {'end': 7247.109, 'text': 'The currency code is E-U-R for Euros.', 'start': 7244.507, 'duration': 2.602}, {'end': 7250.11, 'text': "Now there's other styles besides currency.", 'start': 7247.989, 'duration': 2.121}, {'end': 7251.811, 'text': "This time let's try a percent.", 'start': 7250.17, 'duration': 1.641}, {'end': 7255.554, 'text': 'MyNum equals MyNum.', 'start': 7252.852, 'duration': 2.702}, {'end': 7259.031, 'text': 'to locale string.', 'start': 7256.71, 'duration': 2.321}, {'end': 7265.332, 'text': 'This time I will set the first argument in place of a language to be undefined.', 'start': 7261.131, 'duration': 4.201}, {'end': 7272.654, 'text': 'But I will set the style to be percent.', 'start': 7268.773, 'duration': 3.881}, {'end': 7277.635, 'text': 'This number as a percent is 12 million percent.', 'start': 7273.814, 'duration': 3.821}, {'end': 7279.016, 'text': "So let's change that.", 'start': 7278.196, 'duration': 0.82}, {'end': 7281.364, 'text': '100 would be 10, 000%.', 'start': 7280.723, 'duration': 0.641}, {'end': 7286.067, 'text': '0.5 is 50%.', 'start': 7281.364, 'duration': 4.703}, {'end': 7287.047, 'text': '0.01 is 1%.', 'start': 7286.067, 'duration': 0.98}, {'end': 7289.469, 'text': "That's how to format your number as a percent.", 'start': 7287.047, 'duration': 2.422}, {'end': 7291.89, 'text': "Then let's go to units.", 'start': 7290.95, 'duration': 0.94}, {'end': 7298.074, 'text': 'mynum equals mynum.toLocaleString.', 'start': 7293.011, 'duration': 5.063}, {'end': 7301.196, 'text': 'We can set the first argument to be undefined.', 'start': 7298.994, 'duration': 2.202}, {'end': 7308.82, 'text': 'Then under options, set the style to be unit, a unit of measurement.', 'start': 7303.356, 'duration': 5.464}, {'end': 7315.126, 'text': 'What kind of unit would we like? I will separate that with a comma, unit, colon, space.', 'start': 7309.341, 'duration': 5.785}, {'end': 7318.468, 'text': 'What about Celsius? Celsius.', 'start': 7315.726, 'duration': 2.742}, {'end': 7324.073, 'text': 'So currently my number is 100.', 'start': 7320.75, 'duration': 3.323}, {'end': 7325.114, 'text': "Make sure it's lowercase.", 'start': 7324.073, 'duration': 1.041}, {'end': 7327.69, 'text': 'There, 100 degrees Celsius.', 'start': 7326.069, 'duration': 1.621}, {'end': 7330.091, 'text': 'You have a couple different units to choose from.', 'start': 7328.39, 'duration': 1.701}, {'end': 7334.554, 'text': 'Celsius, kilometers, miles, kilograms, whatever you need.', 'start': 7330.511, 'duration': 4.043}, {'end': 7339.759, 'text': 'Well okay then everybody, that is an introduction to the toLocaleString method.', 'start': 7335.538, 'duration': 4.221}, {'end': 7344.86, 'text': 'It returns a string with a language-sensitive representation of a number.', 'start': 7340.319, 'duration': 4.541}, {'end': 7347.98, 'text': 'You can set the locale, which specifies the language.', 'start': 7345.26, 'duration': 2.72}, {'end': 7352.761, 'text': 'By passing in undefined as an argument, that will use the default set in the browser.', 'start': 7348.46, 'duration': 4.301}, {'end': 7354.821, 'text': 'Then you can pass in formatting options.', 'start': 7353.161, 'duration': 1.66}, {'end': 7360.322, 'text': 'Would you like to set the style to currency, percent, a unit of measurement, etc.', 'start': 7355.261, 'duration': 5.061}, {'end': 7364.823, 'text': 'So yeah everybody, that is the toLocaleString method in JavaScript.', 'start': 7360.722, 'duration': 4.101}, {'end': 7373.42, 'text': "Hey guys, in this video we're going to create a very basic number guessing game in JavaScript.", 'start': 7368.937, 'duration': 4.483}, {'end': 7376.922, 'text': "So heading to our HTML file, let's create some HTML elements.", 'start': 7373.76, 'duration': 3.162}, {'end': 7379.564, 'text': "I'll need a title for this game, I'll use an h1 tag.", 'start': 7377.142, 'duration': 2.422}, {'end': 7383.867, 'text': "We'll add some text, number guessing game.", 'start': 7379.904, 'duration': 3.963}, {'end': 7384.987, 'text': "Let's save that.", 'start': 7384.227, 'duration': 0.76}, {'end': 7386.809, 'text': "I'll add a paragraph right underneath.", 'start': 7385.228, 'duration': 1.581}, {'end': 7393.413, 'text': 'Pick a number between 1 through 10.', 'start': 7387.209, 'duration': 6.204}, {'end': 7394.253, 'text': "And I'll add a label.", 'start': 7393.413, 'duration': 0.84}, {'end': 7398.256, 'text': 'Label Close it.', 'start': 7396.935, 'duration': 1.321}, {'end': 7401.919, 'text': 'Enter a guess.', 'start': 7400.658, 'duration': 1.261}, {'end': 7404.3, 'text': "We'll need some input.", 'start': 7403.439, 'duration': 0.861}, {'end': 7415.564, 'text': 'This will be a text box input id equals guess field and a submit button.', 'start': 7405.58, 'duration': 9.984}, {'end': 7421.227, 'text': 'Input type equals submit.', 'start': 7416.665, 'duration': 4.562}, {'end': 7425.769, 'text': 'The id will be submit button.', 'start': 7422.507, 'duration': 3.262}, {'end': 7429.823, 'text': "And those are the HTML elements that we'll need.", 'start': 7427.762, 'duration': 2.061}, {'end': 7433.445, 'text': "Now heading back to our JavaScript file, we'll need a random number.", 'start': 7430.243, 'duration': 3.202}, {'end': 7435.566, 'text': "I'll make this a constant.", 'start': 7434.525, 'duration': 1.041}, {'end': 7437.947, 'text': 'And it will be answer.', 'start': 7436.846, 'duration': 1.101}, {'end': 7442.529, 'text': 'Answer will be a random number between 1 and 10.', 'start': 7438.727, 'duration': 3.802}, {'end': 7449.152, 'text': 'So we will use math.random times 10.', 'start': 7442.529, 'duration': 6.623}, {'end': 7455.816, 'text': "This will give us a random number between 0 and 9, so let's add 1 for numbers 1 through 10.", 'start': 7449.152, 'duration': 6.664}, {'end': 7458.938, 'text': 'Then we will surround this with math.floor to round it.', 'start': 7455.816, 'duration': 3.122}, {'end': 7464.341, 'text': 'Math.floor And I will surround this code with math.floor.', 'start': 7460.119, 'duration': 4.222}, {'end': 7469.945, 'text': "Math.floor We'll keep track of our guesses.", 'start': 7466.863, 'duration': 3.082}, {'end': 7474.808, 'text': 'Let guesses equal zero.', 'start': 7471.586, 'duration': 3.222}, {'end': 7479.011, 'text': 'So when we click on this button, we would like to do something.', 'start': 7476.409, 'duration': 2.602}, {'end': 7480.892, 'text': 'But we need to select this button.', 'start': 7479.591, 'duration': 1.301}, {'end': 7483.534, 'text': 'And the ID was submit button.', 'start': 7482.033, 'duration': 1.501}, {'end': 7493.279, 'text': 'document.getElementById The ID is submitButton.', 'start': 7485.097, 'duration': 8.182}, {'end': 7497.76, 'text': 'And set the onClickEventAttribute equal to a function.', 'start': 7493.999, 'duration': 3.761}, {'end': 7502.481, 'text': "What would we like to do? Well, there's a lot of stuff we have to do.", 'start': 7499.7, 'duration': 2.781}, {'end': 7505.001, 'text': "We'll need to get the value from this text box.", 'start': 7502.501, 'duration': 2.5}, {'end': 7508.542, 'text': 'So document.getElementById.', 'start': 7505.941, 'duration': 2.601}, {'end': 7513.563, 'text': 'The ID is guestField.', 'start': 7509.842, 'duration': 3.721}, {'end': 7520.275, 'text': 'And we will assign this to guess.', 'start': 7518.554, 'duration': 1.721}, {'end': 7522.157, 'text': "So let's declare that and assign it.", 'start': 7520.515, 'duration': 1.642}, {'end': 7526.22, 'text': 'Whenever we make a guess, we should increment guesses by one to keep track of it.', 'start': 7522.777, 'duration': 3.443}, {'end': 7528.061, 'text': 'Guesses plus equals one.', 'start': 7526.56, 'duration': 1.501}, {'end': 7532.104, 'text': "We'll first check to see if our guess is equal to our answer.", 'start': 7529.102, 'duration': 3.002}, {'end': 7538.129, 'text': "If guess is equal to our answer, let's create an alert message.", 'start': 7533.345, 'duration': 4.784}, {'end': 7543.773, 'text': "Alert I'll use a template literal.", 'start': 7539.53, 'duration': 4.243}, {'end': 7549.855, 'text': 'Answer is the number.', 'start': 7546.934, 'duration': 2.921}, {'end': 7560.681, 'text': 'It took you guesses, guesses.', 'start': 7553.297, 'duration': 7.384}, {'end': 7575.648, 'text': 'Else if our guess is less than answer, we will alert the user to small.', 'start': 7562.782, 'duration': 12.866}, {'end': 7584.149, 'text': 'Else alert too large.', 'start': 7578.706, 'duration': 5.443}, {'end': 7588.632, 'text': "Okay, make sure you save everything and let's run it.", 'start': 7586.13, 'duration': 2.502}, {'end': 7590.012, 'text': 'Enter a number.', 'start': 7589.292, 'duration': 0.72}, {'end': 7591.393, 'text': "I'll pick something right in the middle.", 'start': 7590.213, 'duration': 1.18}, {'end': 7593.454, 'text': 'Five Too small.', 'start': 7591.793, 'duration': 1.661}, {'end': 7597.116, 'text': 'What about seven? Too small.', 'start': 7594.395, 'duration': 2.721}, {'end': 7600.638, 'text': 'Nine Nine is the number.', 'start': 7598.057, 'duration': 2.581}, {'end': 7601.899, 'text': 'It took you three guesses.', 'start': 7600.678, 'duration': 1.221}, {'end': 7606.502, 'text': 'So yeah, that is a very basic number guessing game everybody.', 'start': 7603.18, 'duration': 3.322}, {'end': 7610.997, 'text': "If you would like a copy of this code, I'll post this in the comment section down below.", 'start': 7607.415, 'duration': 3.582}, {'end': 7615.358, 'text': "And well, yeah, that's a very basic number guessing game in JavaScript.", 'start': 7611.177, 'duration': 4.181}, {'end': 7623.582, 'text': "Hey everybody, in this video we're going to create a practice program in JavaScript to convert some temperatures using some HTML elements.", 'start': 7616.119, 'duration': 7.463}, {'end': 7626.423, 'text': 'So sit back, relax, and enjoy the show.', 'start': 7623.962, 'duration': 2.461}, {'end': 7629.96, 'text': "Okay, let's begin everybody.", 'start': 7628.38, 'duration': 1.58}, {'end': 7635.001, 'text': "Before we add HTML elements to our DOM, let's work on the logic behind the functions.", 'start': 7630.08, 'duration': 4.921}, {'end': 7640.483, 'text': "Let's declare and assign variable temperature and set this equal to some temperature.", 'start': 7635.602, 'duration': 4.881}, {'end': 7642.763, 'text': "Doesn't matter if it's Fahrenheit or Celsius yet.", 'start': 7640.543, 'duration': 2.22}, {'end': 7645.544, 'text': "And at the end of our program, let's declare two functions.", 'start': 7642.943, 'duration': 2.601}, {'end': 7649.765, 'text': 'Function to Celsius.', 'start': 7646.324, 'duration': 3.441}, {'end': 7654.345, 'text': 'And there will be one parameter, temperature.', 'start': 7651.825, 'duration': 2.52}, {'end': 7656.246, 'text': 'And function to Celsius.', 'start': 7654.746, 'duration': 1.5}, {'end': 7670.797, 'text': 'Fahrenheit The formula to convert a temperature in Fahrenheit to Celsius is our temperature minus 32 times 5 divided by 9.', 'start': 7657.725, 'duration': 13.072}, {'end': 7681.698, 'text': 'The formula to convert Celsius to Fahrenheit is return temp times 9 divided by 5 plus 32.', 'start': 7670.797, 'duration': 10.901}, {'end': 7687.04, 'text': "let's say that our temperature is currently in fahrenheit and i need to convert this to celsius.", 'start': 7681.698, 'duration': 5.342}, {'end': 7694.762, 'text': 'i will reassign temp equal to, and i will invoke the 2 celsius function and pass in my temperature.', 'start': 7687.04, 'duration': 7.722}, {'end': 7697.743, 'text': 'Then at the end we will display whatever our temperature is.', 'start': 7695.342, 'duration': 2.401}, {'end': 7700.083, 'text': 'Console.log temp.', 'start': 7698.183, 'duration': 1.9}, {'end': 7702.384, 'text': 'So the temperature should be zero.', 'start': 7700.603, 'duration': 1.781}, {'end': 7703.664, 'text': 'Zero degrees Celsius.', 'start': 7702.624, 'duration': 1.04}, {'end': 7711.425, 'text': "If we're converting this to Fahrenheit, then 32 degrees Celsius converted to Fahrenheit is 89.6 degrees.", 'start': 7704.164, 'duration': 7.261}, {'end': 7716.566, 'text': "Now that we have the logic behind these functions completed, let's add some HTML elements.", 'start': 7711.825, 'duration': 4.741}, {'end': 7721.227, 'text': 'Heading to our HTML file within the body tags, we will create a label.', 'start': 7717.026, 'duration': 4.201}, {'end': 7724.921, 'text': 'Then close it.', 'start': 7724.281, 'duration': 0.64}, {'end': 7726.782, 'text': "And I'll add a line break.", 'start': 7725.481, 'duration': 1.301}, {'end': 7732.544, 'text': "For some text, let's add enter a temperature.", 'start': 7727.182, 'duration': 5.362}, {'end': 7736.346, 'text': "Then we'll create a text box.", 'start': 7734.885, 'duration': 1.461}, {'end': 7739.367, 'text': 'So use a self-closing input tag.', 'start': 7737.226, 'duration': 2.141}, {'end': 7740.868, 'text': "I'll create a line break.", 'start': 7739.847, 'duration': 1.021}, {'end': 7746.27, 'text': 'The type is text.', 'start': 7743.909, 'duration': 2.361}, {'end': 7751.392, 'text': "The ID, let's say, is text box.", 'start': 7747.69, 'duration': 3.702}, {'end': 7753.753, 'text': "Let's create a second label.", 'start': 7752.612, 'duration': 1.141}, {'end': 7760.283, 'text': 'label, close it, add a line break.', 'start': 7755.02, 'duration': 5.263}, {'end': 7764.104, 'text': 'we will add the text convert to colon.', 'start': 7760.283, 'duration': 3.821}, {'end': 7766.846, 'text': "we'll create two radio buttons.", 'start': 7764.104, 'duration': 2.742}, {'end': 7772.308, 'text': 'input type equals radio, so with a radio button.', 'start': 7766.846, 'duration': 5.462}, {'end': 7776.53, 'text': "if they're in the same group, you can only select one.", 'start': 7772.308, 'duration': 4.222}], 'summary': 'The transcript covers formatting numbers as currency, percent, and units, creating a basic number guessing game in javascript, and converting temperatures between celsius and fahrenheit.', 'duration': 576.831, 'max_score': 7199.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw7199699.jpg'}, {'end': 7301.196, 'src': 'embed', 'start': 7261.131, 'weight': 6, 'content': [{'end': 7265.332, 'text': 'This time I will set the first argument in place of a language to be undefined.', 'start': 7261.131, 'duration': 4.201}, {'end': 7272.654, 'text': 'But I will set the style to be percent.', 'start': 7268.773, 'duration': 3.881}, {'end': 7277.635, 'text': 'This number as a percent is 12 million percent.', 'start': 7273.814, 'duration': 3.821}, {'end': 7279.016, 'text': "So let's change that.", 'start': 7278.196, 'duration': 0.82}, {'end': 7281.364, 'text': '100 would be 10, 000%.', 'start': 7280.723, 'duration': 0.641}, {'end': 7286.067, 'text': '0.5 is 50%.', 'start': 7281.364, 'duration': 4.703}, {'end': 7287.047, 'text': '0.01 is 1%.', 'start': 7286.067, 'duration': 0.98}, {'end': 7289.469, 'text': "That's how to format your number as a percent.", 'start': 7287.047, 'duration': 2.422}, {'end': 7291.89, 'text': "Then let's go to units.", 'start': 7290.95, 'duration': 0.94}, {'end': 7298.074, 'text': 'mynum equals mynum.toLocaleString.', 'start': 7293.011, 'duration': 5.063}, {'end': 7301.196, 'text': 'We can set the first argument to be undefined.', 'start': 7298.994, 'duration': 2.202}], 'summary': 'Demonstrating formatting numbers as percent and using tolocalestring method', 'duration': 40.065, 'max_score': 7261.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw7261131.jpg'}, {'end': 7963.501, 'src': 'embed', 'start': 7926.744, 'weight': 2, 'content': [{'end': 7936.913, 'text': 'If document.getElementById, and the ID of this Celsius button is cbutton.', 'start': 7926.744, 'duration': 10.169}, {'end': 7945.023, 'text': 'We need to check to see if this radio button is checked or not, so add .', 'start': 7939.817, 'duration': 5.206}, {'end': 7953.553, 'text': "checked If this equals true, but since this is a boolean value, you don't need to necessarily add equals true.", 'start': 7945.023, 'duration': 8.53}, {'end': 7959.938, 'text': "Document.getElementById.cButton.checked That's fine as a condition.", 'start': 7954.433, 'duration': 5.505}, {'end': 7963.501, 'text': 'If our Celsius button is selected, do something.', 'start': 7960.598, 'duration': 2.903}], 'summary': 'Using javascript, check if celsius button is selected to perform an action.', 'duration': 36.757, 'max_score': 7926.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw7926744.jpg'}], 'start': 5864.542, 'title': 'Javascript fundamentals', 'summary': 'Covers functions, nested loops, return statements, ternary operator, variable scope, tolocalestring method, and creating javascript programs for a number guessing game and temperature conversion. it includes examples and practical demonstrations for each concept.', 'chapters': [{'end': 6330, 'start': 5864.542, 'title': 'Functions and return statements', 'summary': 'Explains the concept of nested loops and introduces functions by illustrating how to define, call, and pass arguments to a function. it also covers the return statement within a function and demonstrates a program to calculate the area of a rectangle.', 'duration': 465.458, 'highlights': ['The chapter explains the concept of nested loops and introduces functions by illustrating how to define, call, and pass arguments to a function. The video introduces the concept of nested loops and functions, highlighting the use of a nested loop to print a rectangle and the benefits of defining code once and reusing it many times with functions.', 'It covers the return statement within a function and demonstrates a program to calculate the area of a rectangle. The chapter explains the use of the return statement within a function, demonstrating a program to calculate the area of a rectangle using a function and returning the calculated value back to the spot where the function was invoked.']}, {'end': 7029.868, 'start': 6330.161, 'title': 'Ternary operator & variable scope', 'summary': 'Explains the ternary operator as a shortcut for an if-else statement, with examples demonstrating its usage and simplification of code. it then delves into the differences between the let and var keywords for variable scope, highlighting the limitations and potential problems related to each. it also discusses the benefits of using template literals for string manipulation.', 'duration': 699.707, 'highlights': ["Ternary Operator It's a shortcut for an if-else statement, represented by a question mark, with three parts: a condition, an expression if true, and an expression if false, simplifying code and providing a concise way to handle conditional statements.", 'Variable Scope: let vs var Variables declared with let are limited to a block scope, while those declared with var are limited to a function scope, and using var for global variables can unintentionally change browser window properties, emphasizing the need to use let over var for avoiding such issues.', 'Template Literals Delimited by backticks, template literals allow for easy embedding of variables and expressions within strings, providing a more convenient and readable way to manipulate strings and update HTML elements.']}, {'end': 7615.358, 'start': 7030.708, 'title': 'Introduction to tolocalestring method and basic number guessing game', 'summary': 'Covers the usage of template literals in javascript for flexible output, tolocalestring method for formatting numbers with language-sensitive representation, including formatting options for currency, percent, and unit of measurement. additionally, a basic number guessing game is created in javascript allowing the user to guess a number between 1 through 10 with alerts for correct, too small, and too large guesses.', 'duration': 584.65, 'highlights': ['The toLocaleString method returns a string with a language-sensitive representation of a number, allowing formatting options such as currency, percent, and unit of measurement. The toLocaleString method allows for formatting numbers with language-sensitive representation, including options for currency, percent, and unit of measurement.', 'Template literals in JavaScript allow for embedded variables and expressions, providing a more flexible way to write output. Template literals in JavaScript enable embedded variables and expressions, offering a flexible way to write output.', 'The basic number guessing game in JavaScript prompts the user to guess a number between 1 through 10, with alerts for correct, too small, and too large guesses. A basic number guessing game is created in JavaScript, prompting the user to guess a number between 1 through 10 with alerts for correct, too small, and too large guesses.']}, {'end': 8131.085, 'start': 7616.119, 'title': 'Js temperature conversion program', 'summary': 'Covers creating a javascript program to convert temperatures using html elements, including creating logic for temperature conversion functions, adding html elements, and incorporating button functionality to convert temperatures between fahrenheit and celsius.', 'duration': 514.966, 'highlights': ['Creating logic for temperature conversion functions The chapter focuses on declaring and assigning a variable for temperature and creating two functions for temperature conversion, with the logic for converting Fahrenheit to Celsius and Celsius to Fahrenheit.', 'Adding HTML elements for user input and selection The process involves adding HTML elements such as labels, text boxes, and radio buttons for user input and selection of temperature units (Celsius or Fahrenheit).', 'Incorporating button functionality for temperature conversion The chapter demonstrates the use of JavaScript to incorporate button functionality for converting temperatures between Fahrenheit and Celsius based on user input and selection of temperature units.']}], 'duration': 2266.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw5864542.jpg', 'highlights': ['The chapter covers functions, nested loops, return statements, ternary operator, variable scope, toLocaleString method, and creating JavaScript programs for a number guessing game and temperature conversion.', 'The chapter explains the concept of nested loops and introduces functions by illustrating how to define, call, and pass arguments to a function.', 'The chapter explains the use of the return statement within a function, demonstrating a program to calculate the area of a rectangle using a function and returning the calculated value back to the spot where the function was invoked.', "Ternary Operator: It's a shortcut for an if-else statement, represented by a question mark, with three parts: a condition, an expression if true, and an expression if false, simplifying code and providing a concise way to handle conditional statements.", 'Variable Scope: let vs var Variables declared with let are limited to a block scope, while those declared with var are limited to a function scope, and using var for global variables can unintentionally change browser window properties, emphasizing the need to use let over var for avoiding such issues.', 'Template Literals: Delimited by backticks, template literals allow for easy embedding of variables and expressions within strings, providing a more convenient and readable way to manipulate strings and update HTML elements.', 'The toLocaleString method allows for formatting numbers with language-sensitive representation, including options for currency, percent, and unit of measurement.', 'Template literals in JavaScript enable embedded variables and expressions, offering a flexible way to write output.', 'A basic number guessing game is created in JavaScript, prompting the user to guess a number between 1 through 10 with alerts for correct, too small, and too large guesses.', 'The chapter focuses on declaring and assigning a variable for temperature and creating two functions for temperature conversion, with the logic for converting Fahrenheit to Celsius and Celsius to Fahrenheit.', 'The process involves adding HTML elements such as labels, text boxes, and radio buttons for user input and selection of temperature units (Celsius or Fahrenheit).', 'The chapter demonstrates the use of JavaScript to incorporate button functionality for converting temperatures between Fahrenheit and Celsius based on user input and selection of temperature units.']}, {'end': 9549.459, 'segs': [{'end': 8623.375, 'src': 'embed', 'start': 8592.963, 'weight': 12, 'content': [{'end': 8596.244, 'text': "leave a random comment down below and subscribe if you'd like to become a fellow bro.", 'start': 8592.963, 'duration': 3.281}, {'end': 8599.264, 'text': 'Heya everybody.', 'start': 8598.464, 'duration': 0.8}, {'end': 8603.466, 'text': "In this video I'm gonna show you how we can sort an array of strings in JavaScript.", 'start': 8599.484, 'duration': 3.982}, {'end': 8606.007, 'text': "Let's create an array of fruits.", 'start': 8603.906, 'duration': 2.101}, {'end': 8607.048, 'text': "Cuz I'm hungry.", 'start': 8606.347, 'duration': 0.701}, {'end': 8608.849, 'text': 'And add some various names of fruits.', 'start': 8607.288, 'duration': 1.561}, {'end': 8610.389, 'text': "Make sure that they're not in order.", 'start': 8609.289, 'duration': 1.1}, {'end': 8612.91, 'text': 'Banana Apple.', 'start': 8610.789, 'duration': 2.121}, {'end': 8619.193, 'text': 'Orange And a mango.', 'start': 8615.551, 'duration': 3.642}, {'end': 8623.375, 'text': 'To display my array of strings, I can use a FOR OF statement.', 'start': 8619.573, 'duration': 3.802}], 'summary': 'Demonstrates sorting an array of fruits in javascript using for of statement.', 'duration': 30.412, 'max_score': 8592.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw8592963.jpg'}, {'end': 8926.592, 'src': 'embed', 'start': 8867.452, 'weight': 0, 'content': [{'end': 8870.813, 'text': 'Picturing a grid, the first index would be the row.', 'start': 8867.452, 'duration': 3.361}, {'end': 8872.854, 'text': 'The second index is the column.', 'start': 8871.173, 'duration': 1.681}, {'end': 8875.675, 'text': 'I would like to replace apples with mangoes.', 'start': 8873.414, 'duration': 2.261}, {'end': 8878.356, 'text': 'I need to find the row number and the column number.', 'start': 8876.015, 'duration': 2.341}, {'end': 8880.497, 'text': 'So computers, they always start with zero.', 'start': 8878.936, 'duration': 1.561}, {'end': 8882.798, 'text': 'The first row would be row zero.', 'start': 8880.897, 'duration': 1.901}, {'end': 8887.374, 'text': 'And the first column would be column 0.', 'start': 8884.212, 'duration': 3.162}, {'end': 8889.854, 'text': 'So the indices are 0, 0.', 'start': 8887.374, 'duration': 2.48}, {'end': 8892.336, 'text': 'And I will set this equal to mangoes.', 'start': 8889.855, 'duration': 2.481}, {'end': 8894.137, 'text': "I think that's how you spell mangoes.", 'start': 8892.936, 'duration': 1.201}, {'end': 8898.819, 'text': 'Yeah After refreshing, we have mangoes, oranges, bananas.', 'start': 8895.437, 'duration': 3.382}, {'end': 8900.64, 'text': "Let's replace bananas.", 'start': 8899.619, 'duration': 1.021}, {'end': 8905.002, 'text': 'That is row 0, column 2.', 'start': 8901.42, 'duration': 3.582}, {'end': 8906.061, 'text': '0, 1, 2.', 'start': 8905.002, 'duration': 1.059}, {'end': 8909.944, 'text': 'So change the second index to 2.', 'start': 8906.062, 'duration': 3.882}, {'end': 8911.145, 'text': 'Apples, oranges, mangoes.', 'start': 8909.944, 'duration': 1.201}, {'end': 8913.246, 'text': "Let's replace eggs with steak.", 'start': 8911.625, 'duration': 1.621}, {'end': 8923.53, 'text': 'That would be row 0, 1, 2, column 0, steak, chicken, fish.', 'start': 8914.485, 'duration': 9.045}, {'end': 8926.592, 'text': "For my last example, let's replace fish with steak.", 'start': 8923.89, 'duration': 2.702}], 'summary': 'Using grid indices to replace items; e.g., 0,2 for bananas to mangoes.', 'duration': 59.14, 'max_score': 8867.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw8867452.jpg'}, {'end': 9396.413, 'src': 'embed', 'start': 9367.424, 'weight': 13, 'content': [{'end': 9371.066, 'text': 'And then at the end, return total.', 'start': 9367.424, 'duration': 3.642}, {'end': 9374.389, 'text': 'This time we can pass two arguments to this function.', 'start': 9371.807, 'duration': 2.582}, {'end': 9375.91, 'text': 'Or three.', 'start': 9375.51, 'duration': 0.4}, {'end': 9378.171, 'text': 'Or four.', 'start': 9375.93, 'duration': 2.241}, {'end': 9381.98, 'text': "Five Doesn't matter.", 'start': 9379.693, 'duration': 2.287}, {'end': 9384.462, 'text': "So that's the benefit of using rest parameters.", 'start': 9382.26, 'duration': 2.202}, {'end': 9387.525, 'text': 'They represent an indefinite number of parameters.', 'start': 9384.782, 'duration': 2.743}, {'end': 9393.19, 'text': 'When you call a function that has rest parameters, it will pack the individual arguments into an array.', 'start': 9387.985, 'duration': 5.205}, {'end': 9396.413, 'text': 'Then you would just need some way to access the elements of that array.', 'start': 9393.591, 'duration': 2.822}], 'summary': 'Rest parameters allow passing an indefinite number of arguments to a function, providing flexibility in the number of parameters.', 'duration': 28.989, 'max_score': 9367.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw9367424.jpg'}, {'end': 9515.305, 'src': 'embed', 'start': 9483.73, 'weight': 11, 'content': [{'end': 9497.562, 'text': "function display console I'll name this argument output console.log Output.", 'start': 9483.73, 'duration': 13.832}, {'end': 9501.663, 'text': 'After finding a total, we will invoke the display console function.', 'start': 9498.322, 'duration': 3.341}, {'end': 9504.343, 'text': 'We will pass our total as an argument.', 'start': 9502.223, 'duration': 2.12}, {'end': 9506.904, 'text': 'This displays the number 5 to the console.', 'start': 9504.843, 'duration': 2.061}, {'end': 9509.724, 'text': "Now let's create a function to display some output to the DOM.", 'start': 9507.424, 'duration': 2.3}, {'end': 9512.045, 'text': 'Function Display.', 'start': 9510.504, 'duration': 1.541}, {'end': 9515.305, 'text': "DOM We'll keep output as the argument.", 'start': 9512.785, 'duration': 2.52}], 'summary': 'Creating functions to display output to console and dom, passing total as argument.', 'duration': 31.575, 'max_score': 9483.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw9483730.jpg'}], 'start': 8132.326, 'title': 'Javascript arrays and operations', 'summary': 'Covers the basics of arrays in javascript, including accessing, updating, adding, removing elements, length property, and finding element index. it also demonstrates looping, sorting arrays, creating 2d arrays for grocery shopping, understanding the spread operator, and explaining rest parameters.', 'chapters': [{'end': 8426.32, 'start': 8132.326, 'title': 'Javascript arrays tutorial', 'summary': 'Covers the basics of arrays in javascript, explaining the concept, accessing elements, updating and changing elements, adding and removing elements, accessing the length property, and finding the index of an element.', 'duration': 293.994, 'highlights': ["Arrays are a variable that can store multiple values, demonstrated by storing multiple fruit names. The tutorial explains that an array in JavaScript can store multiple values, as demonstrated by storing multiple fruit names within the 'fruits' array.", 'Accessing elements in an array using index numbers is demonstrated, with the explanation that the first element has an index of 0. The tutorial demonstrates accessing elements in an array using index numbers, emphasizing that the first element has an index of 0.', 'The process of updating and changing elements in an array is illustrated, including changing the elements at specific index positions. The tutorial illustrates the process of updating and changing elements in an array, including changing the elements at specific index positions, and displaying the updated array.', 'The addition and removal of elements in an array using the push, pop, unshift, and shift methods are explained. The tutorial explains the addition and removal of elements in an array using the push, pop, unshift, and shift methods, with practical demonstrations of each method.', 'The tutorial covers accessing the length property of an array and finding the index of an element, showcasing practical use cases for both. The tutorial covers accessing the length property of an array and finding the index of an element, showcasing practical use cases for both and providing examples of their usage.']}, {'end': 8697.318, 'start': 8426.46, 'title': 'Looping and sorting arrays in javascript', 'summary': 'Demonstrates how to loop through and sort arrays in javascript, showcasing examples of using standard for loops, for of statements, and array sorting methods.', 'duration': 270.858, 'highlights': ['The chapter demonstrates how to loop through and sort arrays in JavaScript The video provides guidance on iterating through arrays and sorting them, offering practical examples and explanations.', 'Examples of using standard for loops and for of statements are shown The speaker showcases the usage of both standard for loops and for of statements to iterate through arrays, providing code examples and explanations for each method.', 'Sorting arrays using the built-in sort method and reversing the order with method chaining is explained The chapter explains the process of sorting arrays using the built-in sort method and demonstrates reversing the order using method chaining, offering code examples and highlighting the resulting changes in array order.']}, {'end': 8951.457, 'start': 8697.678, 'title': 'Creating 2d array for grocery shopping', 'summary': 'Explains the creation of a 2d array for a grocery shopping list, comprising arrays for fruits, vegetables, and meats, and demonstrates iterating over the elements, replacing elements within the array, and providing insights into the application of 2d arrays.', 'duration': 253.779, 'highlights': ['The chapter explains the creation of a 2D array for a grocery shopping list, comprising arrays for fruits, vegetables, and meats. The example demonstrates creating separate arrays for fruits, vegetables, and meats, and then combining them into a two-dimensional array named grocery list.', 'Demonstrates iterating over the elements of the 2D array and displaying details of each list. The chapter showcases the use of nested loops, specifically nested for-of loops, to iterate over the elements in the two-dimensional array, displaying details of each list.', 'Provides insights into replacing elements within the 2D array and the use of indices to access and modify specific elements. The explanation includes using two indices to access and modify specific elements within the two-dimensional array, demonstrating the process with examples of replacing fruit items with other items like mangoes and steak.']}, {'end': 9212.146, 'start': 8951.457, 'title': 'Understanding the spread operator', 'summary': 'Introduces the spread operator, which can be used with arrays and strings to unpack their elements into individual pieces, allowing for the passing of varying number of arguments to a function or method, and provides examples and demonstrations of its usage.', 'duration': 260.689, 'highlights': ['The spread operator can be used with arrays and strings to unpack their elements into individual pieces. It allows an iterable such as an array or string to be expanded in place where zero or more arguments are expected.', 'Using the spread operator with an array allows unpacking the elements into individual arguments, useful for passing a varying number of arguments to a function or method. When used with an array, it unpacks the elements into many individual pieces. It can be used to find the maximum value within an array using the math.max method, and to merge multiple arrays into one.', 'The spread operator can be used with strings to spread the string into individual characters. It can be used with a string to spread the string into individual characters, providing a useful way to work with individual characters of a string.']}, {'end': 9549.459, 'start': 9214.059, 'title': 'Explaining rest parameters', 'summary': 'Explains rest parameters, illustrating how it packs arguments into an array when passed to a function, the benefit of using rest parameters, and the flexibility it offers in accepting an indefinite number of parameters, eliminating the need for multiple functions to handle different numbers of arguments.', 'duration': 335.4, 'highlights': ['Rest parameters pack arguments into an array when passed to a function, offering flexibility in accepting an indefinite number of parameters. Rest parameters represent an indefinite number of parameters and pack arguments into an array when passed to a function, eliminating the need for multiple functions to handle different numbers of arguments.', 'Using rest parameters eliminates the need for multiple functions to handle different numbers of arguments. Using rest parameters eliminates the need for creating multiple functions to handle different numbers of arguments, as it allows a function to accept an indefinite number of parameters.', 'Callbacks are functions passed as arguments to another function, ensuring a function will not run before a task is completed. Callbacks are functions passed as arguments to another function, ensuring that a function is not going to run before a task is completed, and it is a popular programming technique.']}], 'duration': 1417.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw8132326.jpg', 'highlights': ['Arrays in JavaScript can store multiple values, demonstrated by storing multiple fruit names.', 'Accessing elements in an array using index numbers is demonstrated, with the explanation that the first element has an index of 0.', 'The addition and removal of elements in an array using the push, pop, unshift, and shift methods are explained.', 'The tutorial covers accessing the length property of an array and finding the index of an element, showcasing practical use cases for both.', 'The chapter demonstrates how to loop through and sort arrays in JavaScript.', 'Examples of using standard for loops and for of statements are shown.', 'Sorting arrays using the built-in sort method and reversing the order with method chaining is explained.', 'The chapter explains the creation of a 2D array for a grocery shopping list, comprising arrays for fruits, vegetables, and meats.', 'Demonstrates iterating over the elements of the 2D array and displaying details of each list.', 'The spread operator can be used with arrays and strings to unpack their elements into individual pieces.', 'Using the spread operator with an array allows unpacking the elements into individual arguments, useful for passing a varying number of arguments to a function or method.', 'Rest parameters pack arguments into an array when passed to a function, offering flexibility in accepting an indefinite number of parameters.', 'Using rest parameters eliminates the need for multiple functions to handle different numbers of arguments.', 'Callbacks are functions passed as arguments to another function, ensuring a function will not run before a task is completed.']}, {'end': 11551.765, 'segs': [{'end': 9774.968, 'src': 'embed', 'start': 9727.752, 'weight': 1, 'content': [{'end': 9729.334, 'text': 'once for each array element.', 'start': 9727.752, 'duration': 1.582}, {'end': 9731.075, 'text': 'we have an array of students.', 'start': 9729.334, 'duration': 1.741}, {'end': 9735.339, 'text': 'let students equals and make up some student names.', 'start': 9731.075, 'duration': 4.264}, {'end': 9738.082, 'text': "in this example, let's make all of the letters lowercase.", 'start': 9735.339, 'duration': 2.743}, {'end': 9741.865, 'text': "we'll create a function that will capitalize the first letter of each student name.", 'start': 9738.082, 'duration': 3.783}, {'end': 9747.915, 'text': "so i'm going to write spongebob all lowercase, Patrick and Squidward.", 'start': 9741.865, 'duration': 6.05}, {'end': 9752.757, 'text': "Let's define a function that will capitalize the first letter of each string.", 'start': 9748.795, 'duration': 3.962}, {'end': 9760.02, 'text': 'FunctionCapitalize Now with the ForEach method.', 'start': 9752.957, 'duration': 7.063}, {'end': 9765.302, 'text': "there's up to three arguments that are provided automatically behind the scenes that we have access to.", 'start': 9760.02, 'duration': 5.282}, {'end': 9770.746, 'text': 'An element, an index and the array.', 'start': 9766.363, 'duration': 4.383}, {'end': 9774.968, 'text': "we don't necessarily need to use any of these, but they're provided for us.", 'start': 9770.746, 'duration': 4.222}], 'summary': 'Using foreach method to capitalize first letter of student names.', 'duration': 47.216, 'max_score': 9727.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw9727752.jpg'}, {'end': 10099.79, 'src': 'embed', 'start': 10072.682, 'weight': 12, 'content': [{'end': 10079.705, 'text': 'It executes a provided callback function once for each array element, And it creates an entirely new array.', 'start': 10072.682, 'duration': 7.023}, {'end': 10082.108, 'text': "So yeah, that's the map method of arrays.", 'start': 10080.046, 'duration': 2.062}, {'end': 10085.751, 'text': "If you would like a copy of this code, I'll post this in the comments section down below.", 'start': 10082.428, 'duration': 3.323}, {'end': 10089.896, 'text': "And well, yeah, that's the map method of arrays in JavaScript.", 'start': 10086.012, 'duration': 3.884}, {'end': 10093.706, 'text': "Alright, let's talk about the filter method.", 'start': 10091.784, 'duration': 1.922}, {'end': 10099.79, 'text': 'The filter method creates a new array with all elements that pass a test provided by a function.', 'start': 10093.806, 'duration': 5.984}], 'summary': 'Javascript map method creates new array; filter method passes test for new array.', 'duration': 27.108, 'max_score': 10072.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw10072682.jpg'}, {'end': 10687.555, 'src': 'embed', 'start': 10653.542, 'weight': 5, 'content': [{'end': 10658.343, 'text': 'Document dot get element by ID.', 'start': 10653.542, 'duration': 4.801}, {'end': 10661.283, 'text': 'We are selecting my label.', 'start': 10659.543, 'duration': 1.74}, {'end': 10667.024, 'text': 'Change the inner HTML equal to count.', 'start': 10662.863, 'duration': 4.161}, {'end': 10670.105, 'text': 'Then we will create a decrease count function.', 'start': 10667.784, 'duration': 2.321}, {'end': 10672.945, 'text': 'Function decrease count.', 'start': 10670.945, 'duration': 2}, {'end': 10675.146, 'text': 'Count minus equals one.', 'start': 10673.366, 'duration': 1.78}, {'end': 10679.974, 'text': 'Lastly, we just need to link these buttons to these functions.', 'start': 10676.653, 'duration': 3.321}, {'end': 10682.654, 'text': 'There is an onClick event attribute.', 'start': 10680.494, 'duration': 2.16}, {'end': 10685.015, 'text': 'Beginning with the decrease button.', 'start': 10682.874, 'duration': 2.141}, {'end': 10687.555, 'text': 'take the onClick attribute.', 'start': 10685.015, 'duration': 2.54}], 'summary': 'Using javascript to update count and link buttons to functions', 'duration': 34.013, 'max_score': 10653.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw10653542.jpg'}, {'end': 10955.418, 'src': 'heatmap', 'start': 10653.542, 'weight': 0.866, 'content': [{'end': 10658.343, 'text': 'Document dot get element by ID.', 'start': 10653.542, 'duration': 4.801}, {'end': 10661.283, 'text': 'We are selecting my label.', 'start': 10659.543, 'duration': 1.74}, {'end': 10667.024, 'text': 'Change the inner HTML equal to count.', 'start': 10662.863, 'duration': 4.161}, {'end': 10670.105, 'text': 'Then we will create a decrease count function.', 'start': 10667.784, 'duration': 2.321}, {'end': 10672.945, 'text': 'Function decrease count.', 'start': 10670.945, 'duration': 2}, {'end': 10675.146, 'text': 'Count minus equals one.', 'start': 10673.366, 'duration': 1.78}, {'end': 10679.974, 'text': 'Lastly, we just need to link these buttons to these functions.', 'start': 10676.653, 'duration': 3.321}, {'end': 10682.654, 'text': 'There is an onClick event attribute.', 'start': 10680.494, 'duration': 2.16}, {'end': 10685.015, 'text': 'Beginning with the decrease button.', 'start': 10682.874, 'duration': 2.141}, {'end': 10687.555, 'text': 'take the onClick attribute.', 'start': 10685.015, 'duration': 2.54}, {'end': 10692.497, 'text': 'set this equal to the appropriate function, decreaseCount.', 'start': 10687.555, 'duration': 4.942}, {'end': 10700.358, 'text': 'add a set of parentheses, copy this, paste it for increaseButton and we will select the increaseCount function.', 'start': 10692.497, 'duration': 7.861}, {'end': 10702.619, 'text': "Let's save and run this.", 'start': 10700.978, 'duration': 1.641}, {'end': 10706.964, 'text': 'So with this label, we can increase it and decrease it.', 'start': 10703.502, 'duration': 3.462}, {'end': 10710.486, 'text': 'However, I think this would be better with function expressions.', 'start': 10707.544, 'duration': 2.942}, {'end': 10715.529, 'text': "We don't need to declare two functions, such as increaseCount and decreaseCount.", 'start': 10710.946, 'duration': 4.583}, {'end': 10719.911, 'text': 'We can assign some function expressions to these buttons and then simply forget about them.', 'start': 10715.649, 'duration': 4.262}, {'end': 10724.474, 'text': "I'm going to get rid of both of these functions, and we will create some function expressions.", 'start': 10720.271, 'duration': 4.203}, {'end': 10726.415, 'text': "Let's select this increase button.", 'start': 10724.934, 'duration': 1.481}, {'end': 10728.636, 'text': "I'll just copy what we have here.", 'start': 10726.435, 'duration': 2.201}, {'end': 10741.099, 'text': 'IncreaseButton.onClick Set this equal to a function expression.', 'start': 10732.276, 'duration': 8.823}, {'end': 10745, 'text': 'What would we like to do? These two lines of code.', 'start': 10742.099, 'duration': 2.901}, {'end': 10748.601, 'text': 'IncreaseCountBy1 and change our label.', 'start': 10746.12, 'duration': 2.481}, {'end': 10755.166, 'text': "Let's copy this function expression, paste it, do the same thing but with the decrease button.", 'start': 10749.639, 'duration': 5.527}, {'end': 10759.811, 'text': 'Decrease button, decrement count by one, and change our label.', 'start': 10755.646, 'duration': 4.165}, {'end': 10762.355, 'text': 'We can get rid of this previous code.', 'start': 10760.572, 'duration': 1.783}, {'end': 10763.296, 'text': "Let's save.", 'start': 10762.755, 'duration': 0.541}, {'end': 10768.162, 'text': 'Heading back to our HTML file, we can also get rid of these onClickEvent attributes.', 'start': 10763.536, 'duration': 4.626}, {'end': 10770.908, 'text': 'Okay, save everything.', 'start': 10769.787, 'duration': 1.121}, {'end': 10772.149, 'text': 'And this should work.', 'start': 10771.528, 'duration': 0.621}, {'end': 10774.991, 'text': 'We can increase our label and decrease it.', 'start': 10772.609, 'duration': 2.382}, {'end': 10778.394, 'text': 'And there is no need to create two unique function names.', 'start': 10775.411, 'duration': 2.983}, {'end': 10784.018, 'text': 'We were able to assign function expressions to the event attribute of an HTML element.', 'start': 10778.854, 'duration': 5.164}, {'end': 10785.919, 'text': 'So those are function expressions.', 'start': 10784.378, 'duration': 1.541}, {'end': 10789.702, 'text': "If you would like a copy of this code, I'll post this in the comment section down below.", 'start': 10786.34, 'duration': 3.362}, {'end': 10795.627, 'text': "Don't be afraid to smash that like button, leave a random comment down below, and subscribe if you'd like to become a fellow bro.", 'start': 10789.922, 'duration': 5.705}, {'end': 10803.366, 'text': "Hey guys, in this video I'm going to explain arrow function expressions, which are represented by, well, an arrow.", 'start': 10797.643, 'duration': 5.723}, {'end': 10807.929, 'text': "It's a compact alternative to a traditional function expression.", 'start': 10803.586, 'duration': 4.343}, {'end': 10810.89, 'text': "I'll give you a whole bunch of examples of where this could be useful.", 'start': 10807.969, 'duration': 2.921}, {'end': 10815.053, 'text': "Let's create a traditional function expression, which we learned about in the last topic.", 'start': 10811.03, 'duration': 4.023}, {'end': 10821.876, 'text': "I'll create a constant greeting, and I will set this equal to a function expression.", 'start': 10815.673, 'duration': 6.203}, {'end': 10826.259, 'text': 'Function, we have an argument, maybe username.', 'start': 10822.597, 'duration': 3.662}, {'end': 10831.682, 'text': 'console.log will display a message.', 'start': 10828.479, 'duration': 3.203}, {'end': 10839.349, 'text': "I'll use a template literal, hello, then my placeholder, username.", 'start': 10831.862, 'duration': 7.487}, {'end': 10847.015, 'text': 'So to invoke this function, I type the function name, a set of parentheses, and I have one argument, a username.', 'start': 10840.73, 'duration': 6.285}, {'end': 10852.88, 'text': "I'll type in my first name, run this, and this displays hello, whatever your username is.", 'start': 10847.316, 'duration': 5.564}, {'end': 10859.543, 'text': 'A compact alternative to this function expression is that we could convert it to an arrow function expression.', 'start': 10853.88, 'duration': 5.663}, {'end': 10861.504, 'text': 'We will eliminate these things.', 'start': 10860.144, 'duration': 1.36}, {'end': 10863.886, 'text': 'Eliminate the function keyword.', 'start': 10862.325, 'duration': 1.561}, {'end': 10866.687, 'text': 'After your arguments, add an arrow.', 'start': 10864.486, 'duration': 2.201}, {'end': 10869.429, 'text': 'And we can eliminate these curly braces.', 'start': 10867.648, 'duration': 1.781}, {'end': 10871.15, 'text': 'Looks good to me.', 'start': 10870.529, 'duration': 0.621}, {'end': 10874.051, 'text': 'Does this still work? Yes, it does.', 'start': 10871.61, 'duration': 2.441}, {'end': 10879.935, 'text': 'So depending on what arguments you have, if you have no arguments, you need just a set of parentheses.', 'start': 10874.992, 'duration': 4.943}, {'end': 10885.836, 'text': "If you have one argument, you don't necessarily need to enclose this in a set of parentheses.", 'start': 10880.973, 'duration': 4.863}, {'end': 10890.118, 'text': 'If you have two or more arguments, you do need a set of parentheses.', 'start': 10886.636, 'duration': 3.482}, {'end': 10892.959, 'text': 'That is one example of the arrow function.', 'start': 10890.778, 'duration': 2.181}, {'end': 10894.92, 'text': "Let's try a different example.", 'start': 10893.72, 'duration': 1.2}, {'end': 10897.562, 'text': 'The second example will have two arguments.', 'start': 10895.28, 'duration': 2.282}, {'end': 10899.703, 'text': 'It will calculate a percentage.', 'start': 10898.202, 'duration': 1.501}, {'end': 10902.024, 'text': "First let's write a function expression.", 'start': 10900.363, 'duration': 1.661}, {'end': 10907.714, 'text': 'percent equals a function expression.', 'start': 10904.872, 'duration': 2.842}, {'end': 10911.396, 'text': 'There are two arguments, x and y.', 'start': 10908.374, 'duration': 3.022}, {'end': 10920.301, 'text': 'x will be the nominator, y will be the denominator, and I would like to return x divided by y times 100.', 'start': 10911.396, 'duration': 8.905}, {'end': 10921.721, 'text': "Let's use console.log.", 'start': 10920.301, 'duration': 1.42}, {'end': 10925.123, 'text': "I'll use a template literal for this.", 'start': 10923.302, 'duration': 1.821}, {'end': 10935.429, 'text': "I would like to display, here's my placeholder, I'll invoke this function, percent, pass in two arguments, a nominator and a denominator.", 'start': 10925.563, 'duration': 9.866}, {'end': 10938.51, 'text': "What is 75 over 100? Then let's add percent to the end.", 'start': 10936.53, 'duration': 1.98}, {'end': 10939.59, 'text': 'So 75 over 100 is 75%.', 'start': 10938.53, 'duration': 1.06}, {'end': 10955.418, 'text': 'What about 80 over 150? 53.3 repeating percent.', 'start': 10939.59, 'duration': 15.828}], 'summary': 'The transcript covers creating function expressions and using arrow function expressions as a compact alternative to traditional function expressions. demonstrates practical examples and usage guidelines.', 'duration': 301.876, 'max_score': 10653.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw10653542.jpg'}, {'end': 11152.552, 'src': 'embed', 'start': 11124.695, 'weight': 9, 'content': [{'end': 11128.237, 'text': 'So yeah, those were a few examples of us using the arrow function.', 'start': 11124.695, 'duration': 3.542}, {'end': 11132.5, 'text': 'You have your arguments on one side, arrow, then some code you would like to perform.', 'start': 11128.477, 'duration': 4.023}, {'end': 11134.821, 'text': "So yeah, that's the arrow function, everybody.", 'start': 11133.18, 'duration': 1.641}, {'end': 11138.663, 'text': 'If you found this video helpful, please be sure to smash that like button,', 'start': 11135.341, 'duration': 3.322}, {'end': 11141.945, 'text': "leave a random comment down below and subscribe if you'd like to become a fellow bro.", 'start': 11138.663, 'duration': 3.282}, {'end': 11147.969, 'text': "Hey guys, in this video I'm going to show you how we can shuffle the elements of an array.", 'start': 11144.107, 'duration': 3.862}, {'end': 11150.23, 'text': 'This would work perfect for a card game.', 'start': 11148.249, 'duration': 1.981}, {'end': 11152.552, 'text': "Let's say we have an array of cards.", 'start': 11150.651, 'duration': 1.901}], 'summary': 'Demonstration of arrow function and shuffling array for card game.', 'duration': 27.857, 'max_score': 11124.695, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw11124695.jpg'}, {'end': 11375.999, 'src': 'embed', 'start': 11349.098, 'weight': 0, 'content': [{'end': 11353.5, 'text': 'Console.log This will deal all of the cards in my deck.', 'start': 11349.098, 'duration': 4.402}, {'end': 11356.935, 'text': "And every time I run it, it's shuffled.", 'start': 11354.974, 'duration': 1.961}, {'end': 11361.718, 'text': "So yeah everybody, that's one way in which we can shuffle the elements of an array.", 'start': 11358.076, 'duration': 3.642}, {'end': 11365.721, 'text': "If you would like a copy of this code, I'll post this in the comment section down below.", 'start': 11362.239, 'duration': 3.482}, {'end': 11370.124, 'text': "And well, yeah, that's how to shuffle the elements of an array in JavaScript.", 'start': 11366.221, 'duration': 3.903}, {'end': 11373.478, 'text': 'Hey yeah everybody.', 'start': 11372.697, 'duration': 0.781}, {'end': 11375.999, 'text': "In this video I'm going to explain nested functions.", 'start': 11373.678, 'duration': 2.321}], 'summary': 'Javascript code shuffles an array of cards and demonstrates nested functions.', 'duration': 26.901, 'max_score': 11349.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw11349098.jpg'}, {'end': 11539.719, 'src': 'embed', 'start': 11508.772, 'weight': 6, 'content': [{'end': 11513.898, 'text': 'So in order to access the display username function, I need to first log in.', 'start': 11508.772, 'duration': 5.126}, {'end': 11518.224, 'text': 'And the same thing goes with the display user inbox function.', 'start': 11515.34, 'duration': 2.884}, {'end': 11525.793, 'text': "If I attempt to invoke these functions when they're nested, I don't have access to them.", 'start': 11520.751, 'duration': 5.042}, {'end': 11526.994, 'text': 'It adds some security.', 'start': 11526.073, 'duration': 0.921}, {'end': 11530.895, 'text': 'In order to invoke these functions, I first need to log in.', 'start': 11527.354, 'duration': 3.541}, {'end': 11539.719, 'text': "So we'll invoke the login function, and then we have access to the display username function and the display user inbox function.", 'start': 11531.636, 'duration': 8.083}], 'summary': 'To access display username and user inbox functions, login is required for invocation.', 'duration': 30.947, 'max_score': 11508.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw11508772.jpg'}], 'start': 9550.02, 'title': 'Array methods and function expressions in javascript', 'summary': 'Covers callback functions, array methods like foreach, map, filter, and reduce, array reduction and sorting, function expressions, and arrow function expressions in javascript, with examples and practical applications, offering a comprehensive understanding of these concepts for developing efficient and readable code.', 'chapters': [{'end': 9705.888, 'start': 9550.02, 'title': 'Understanding callback functions', 'summary': 'Introduces callback functions as an additional way to write code, ensuring functions do not run before tasks are completed, helping to develop asynchronous code, and avoiding errors and potential problems, with examples of waiting for file loading and a promise of more practice in future videos.', 'duration': 155.868, 'highlights': ['Callback functions ensure that a function is not going to run before a task is completed, helping to develop asynchronous code (e.g. waiting for a file to load before executing a function).', "Using callbacks is an additional way to write code, avoiding errors and potential problems, with the flexibility to rename parameters (e.g. renaming the 'callback' parameter to 'doSomething' or 'myFunk').", 'Introducing callback functions as a way to pass a function as an argument to another function, illustrated by invoking the displayDom function and the SUM function with specific arguments.']}, {'end': 10236.22, 'start': 9706.188, 'title': 'Array methods in javascript', 'summary': 'Covers the foreach, map, filter, and reduce methods of arrays in javascript, demonstrating their usage and functionality with examples and explanations of how they execute provided callback functions and create new arrays, and how the reduce method reduces an array to a single value.', 'duration': 530.032, 'highlights': ["The forEach method of arrays executes a provided callback function once for each array element, as demonstrated by capitalizing the first letter of each student's name and printing each element using the forEach method. Executes a provided callback function once for each array element", 'The map method of arrays executes a provided callback function once for each array element and creates a new array, as shown by squaring and cubing elements of an array and displaying the new arrays. Executes a provided callback function once for each array element and creates a new array', 'The filter method of arrays creates a new array with elements that pass a test provided by a function, as demonstrated by filtering out elements based on a criteria and displaying the new array. Creates a new array with elements that pass a test provided by a function', 'The reduce method of arrays reduces an array to a single value, such as summing up all the values of an array. Reduces an array to a single value']}, {'end': 10477.535, 'start': 10236.48, 'title': 'Array reduction and sorting in javascript', 'summary': 'Demonstrates how to use the reduce method to sum up an array of prices in a shopping cart, reducing them to a total value, and how to sort an array of student grades in both ascending and descending order in javascript.', 'duration': 241.055, 'highlights': ['The reduce method is used to sum up an array of prices in a shopping cart, resulting in a total value of $105 after adding an item worth $30. By using the reduce method, the transcript illustrates how to sum up an array of prices in a shopping cart, resulting in a total value of $105 after adding an item worth $30. This demonstrates the practical application of the reduce method in JavaScript.', 'The transcript explains how to use the reduce method to accumulate the prices of items in a shopping cart, resulting in a total of $75 initially. The transcript provides a detailed example of using the reduce method to accumulate the prices of items in a shopping cart, resulting in a total of $75 initially. This showcases the process of reducing an array to a single value using the reduce method.', 'Demonstrates how to sort an array of student grades in descending order using a callback function, resulting in the grades being displayed from highest to lowest. The transcript demonstrates how to sort an array of student grades in descending order using a callback function, resulting in the grades being displayed from highest to lowest. This showcases the practical implementation of sorting arrays in JavaScript.', 'Explains the process of sorting an array of student grades in ascending order, with the lowest grade displayed first and the highest grade displayed last. The transcript explains the process of sorting an array of student grades in ascending order, with the lowest grade displayed first and the highest grade displayed last. This provides a comprehensive understanding of sorting arrays in JavaScript.']}, {'end': 10785.919, 'start': 10477.715, 'title': 'Function expressions in javascript', 'summary': 'Discusses function expressions in javascript, emphasizing the benefits of avoiding unique function names and demonstrating the usage of function expressions to simplify code and improve reusability, illustrated with examples of creating a greeting function and a counter.', 'duration': 308.204, 'highlights': ['Function expressions help avoid polluting the global scope with random function names, simplifying code and improving reusability.', 'Demonstrated the usage of function expressions to simplify code and improve reusability with examples of creating a greeting function and a counter.', 'Illustrated how function expressions can be assigned to the event attribute of an HTML element, eliminating the need for unique function names.']}, {'end': 11141.945, 'start': 10786.34, 'title': 'Arrow function expressions', 'summary': 'Explains arrow function expressions as a compact alternative to traditional function expressions, providing examples and guidelines for their usage, and their impact on code readability.', 'duration': 355.605, 'highlights': ['Arrow function expressions are a compact alternative to traditional function expressions. Arrow function expressions are presented as a compact alternative to traditional function expressions, making the code more readable and providing examples for usage.', 'Guidelines for using arrow function expressions based on the number of arguments are provided. The chapter provides guidelines for using arrow function expressions based on the number of arguments, such as using parentheses for two or more arguments and eliminating unnecessary syntax for fewer arguments.', 'Impact of arrow function expressions on code readability is emphasized. The impact of arrow function expressions on code readability is emphasized, highlighting their effectiveness in making the code more readable and providing examples to support this claim.']}, {'end': 11551.765, 'start': 11144.107, 'title': 'Shuffling array elements & nested functions', 'summary': 'Explains how to shuffle the elements of an array in javascript using a shuffling function, and it also delves into nested functions, illustrating data security and access control.', 'duration': 407.658, 'highlights': ['Shuffling Array Elements The chapter demonstrates a JavaScript function for shuffling array elements, using a while loop and math.random to swap elements, providing an example of shuffling an array of cards and displaying the shuffled array.', 'Nested Functions The chapter explains nested functions within JavaScript, showcasing how outer functions have access to inner functions, and how nesting functions enhances data security and access control.']}], 'duration': 2001.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw9550020.jpg', 'highlights': ['Callback functions ensure asynchronous code execution, avoiding errors and potential problems', 'Using callbacks provides flexibility to rename parameters, enhancing code readability', 'The forEach method executes a callback function for each array element, facilitating array manipulation', 'The map method creates a new array by executing a callback function for each array element', 'The filter method creates a new array based on a test provided by a function, enhancing data filtering', 'The reduce method reduces an array to a single value, facilitating array aggregation', 'Practical application of the reduce method in summing up prices in a shopping cart', 'Demonstration of sorting arrays in descending and ascending order using callback functions', 'Function expressions simplify code and improve reusability, avoiding global scope pollution', 'Illustration of function expressions assigned to HTML element attributes, enhancing code organization', 'Arrow function expressions provide a compact alternative to traditional function expressions, improving code readability', 'Guidelines for using arrow function expressions based on the number of arguments, enhancing code consistency', 'Demonstration of shuffling array elements and nested functions in JavaScript, showcasing practical applications']}, {'end': 12862.462, 'segs': [{'end': 11745.792, 'src': 'embed', 'start': 11713.403, 'weight': 0, 'content': [{'end': 11715.484, 'text': 'So I will get my t-shirt.', 'start': 11713.403, 'duration': 2.081}, {'end': 11717.306, 'text': "And let's display our shopping cart.", 'start': 11715.945, 'duration': 1.361}, {'end': 11719.986, 'text': 'Console.log Shopping cart.', 'start': 11717.446, 'duration': 2.54}, {'end': 11722.987, 'text': 'Currently our shopping cart is 20.', 'start': 11720.846, 'duration': 2.141}, {'end': 11724.567, 'text': 'We have to pay $20.', 'start': 11722.987, 'duration': 1.58}, {'end': 11725.667, 'text': 'I would like to add another item.', 'start': 11724.567, 'duration': 1.1}, {'end': 11728.248, 'text': 'I want some of that fancy underwear.', 'start': 11726.828, 'duration': 1.42}, {'end': 11733.549, 'text': 'Store.get My total is now $70.', 'start': 11728.588, 'duration': 4.961}, {'end': 11734.81, 'text': '$20 plus 50.', 'start': 11733.549, 'duration': 1.261}, {'end': 11736.19, 'text': 'So that is the get method.', 'start': 11734.81, 'duration': 1.38}, {'end': 11737.81, 'text': "Here's a few other methods.", 'start': 11736.61, 'duration': 1.2}, {'end': 11739.431, 'text': "There's a set method.", 'start': 11738.29, 'duration': 1.141}, {'end': 11740.991, 'text': 'We can add a pair to our map.', 'start': 11739.631, 'duration': 1.36}, {'end': 11745.792, 'text': 'Store.set I would like to add a hat.', 'start': 11742.449, 'duration': 3.343}], 'summary': 'Shopping cart contains 20 items, total cost $70.', 'duration': 32.389, 'max_score': 11713.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw11713403.jpg'}, {'end': 12331.166, 'src': 'embed', 'start': 12304.933, 'weight': 2, 'content': [{'end': 12313.722, 'text': 'keyword when a player pauses, we will display a message console.log, You paused the game.', 'start': 12304.933, 'duration': 8.789}, {'end': 12315.662, 'text': 'And maybe an exit method.', 'start': 12314.082, 'duration': 1.58}, {'end': 12321.564, 'text': 'Console.log, you exited the game.', 'start': 12317.243, 'duration': 4.321}, {'end': 12325.865, 'text': 'Now to utilize this class to create an object, we would need an object name.', 'start': 12321.844, 'duration': 4.021}, {'end': 12329.346, 'text': "Let's say constant player one.", 'start': 12326.325, 'duration': 3.021}, {'end': 12331.166, 'text': 'This will be the first player that joins.', 'start': 12329.706, 'duration': 1.46}], 'summary': 'Utilize a class to display messages and create a player object.', 'duration': 26.233, 'max_score': 12304.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw12304933.jpg'}, {'end': 12420.935, 'src': 'embed', 'start': 12389.295, 'weight': 3, 'content': [{'end': 12390.396, 'text': 'Player 1 has 1 point.', 'start': 12389.295, 'duration': 1.101}, {'end': 12391.657, 'text': 'Player 2 has 0 points.', 'start': 12390.496, 'duration': 1.161}, {'end': 12393.898, 'text': 'Player 1 invoked the pause method.', 'start': 12392.097, 'duration': 1.801}, {'end': 12396.12, 'text': 'Player 2 invoked the exited method.', 'start': 12394.038, 'duration': 2.082}, {'end': 12398.822, 'text': 'You can keep on reusing this class as much as you would like.', 'start': 12396.56, 'duration': 2.262}, {'end': 12400.943, 'text': 'This time I would like 4 players.', 'start': 12399.242, 'duration': 1.701}, {'end': 12402.904, 'text': 'So same process as before.', 'start': 12401.343, 'duration': 1.561}, {'end': 12404.986, 'text': 'Declare a unique object name.', 'start': 12403.485, 'duration': 1.501}, {'end': 12408.648, 'text': 'Set the sequel to Use the new keyword, the name of the class.', 'start': 12405.466, 'duration': 3.182}, {'end': 12409.769, 'text': "That's a class.", 'start': 12409.128, 'duration': 0.641}, {'end': 12412.39, 'text': "It's basically a blueprint for creating objects.", 'start': 12409.869, 'duration': 2.521}, {'end': 12414.692, 'text': 'We can create as many objects as we want.', 'start': 12412.951, 'duration': 1.741}, {'end': 12420.935, 'text': 'And within this class, we define what properties and methods that each object created from this class should have.', 'start': 12415.032, 'duration': 5.903}], 'summary': 'Player 1 has 1 point, player 2 has 0 points. 4 players required.', 'duration': 31.64, 'max_score': 12389.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw12389295.jpg'}], 'start': 11552.145, 'title': 'Javascript map object, oop, constructors, and static keyword', 'summary': "Explains javascript's map object, covering key-value pairs, methods like set, get, delete, has, and size, oop basics including objects, properties, methods, 'this' keyword, classes, and their usage, constructors in classes for creating unique objects, and the static keyword with examples of static properties and methods.", 'chapters': [{'end': 11804.429, 'start': 11552.145, 'title': 'Javascript map object explained', 'summary': 'Explains the map object in javascript, which holds key-value pairs and demonstrates methods like set, get, delete, has, and size, with examples and quantifiable data.', 'duration': 252.284, 'highlights': ['The map object in JavaScript holds key-value pairs of any data type, and the example demonstrates associating prices with items in an online store. Demonstrates the concept of the map object and its usage in associating prices with items in an online store.', 'The for each method is used to iterate over the key-value pairs in the map object, and an arrow function expression is employed to display each pair with the associated price. Utilizes the for each method and arrow function expression to iterate and display key-value pairs with associated prices in the map object.', 'The get method is used to access the value of a specific key in the map object, and examples show accessing the price of items like a t-shirt and underwear. Illustrates the usage of the get method to access the value of specific keys, such as retrieving the price of items like a t-shirt and underwear.', "The set method is demonstrated by adding a new key-value pair to the map object, and a quantifiable example of adding a 'hat' with a price of $40 is provided. Demonstrates the set method by adding a new key-value pair to the map object, exemplified by adding a 'hat' with a price of $40.", "The delete method is employed to remove a specific key-value pair from the map object, illustrated by deleting the 'hat' key-value pair. Utilizes the delete method to remove a specific key-value pair, demonstrated by deleting the 'hat' key-value pair.", "The has method is utilized to check if a specific key exists within the map object, with examples showing the presence of keys like 'hat' and 'underwear'. Demonstrates the usage of the has method to check for the presence of specific keys within the map object, exemplified by checking for the keys 'hat' and 'underwear'.", 'The size property of the map object is demonstrated by showing the total number of key-value pairs in the map, with a quantifiable example indicating the map contains 4 pairs. Illustrates the size property of the map object by showing the total number of key-value pairs, exemplified by indicating the map contains 4 pairs.']}, {'end': 12409.769, 'start': 11804.429, 'title': 'Object-oriented programming explained', 'summary': "Covers the basics of object-oriented programming, including the concept of objects, properties, methods, and the 'this' keyword, as well as the introduction of classes and their usage to create objects with specific properties and methods.", 'duration': 605.34, 'highlights': ['Objects are a group of properties and methods that have a name, and to access their properties and methods, a dot is used following the object name. Objects are a group of properties and methods that have a name. To access their properties and methods, a dot is used following the object name. (e.g., car.model, car.drive)', "The 'this' keyword is a reference to a particular object, and its usage depends on the immediate context, allowing access to object properties within a method. The 'this' keyword is a reference to a particular object, and its usage depends on the immediate context, allowing access to object properties within a method. (e.g., this.model)", 'Classes serve as blueprints for creating objects, defining their properties and methods, and can be utilized to create multiple objects with shared characteristics. Classes serve as blueprints for creating objects, defining their properties and methods, and can be utilized to create multiple objects with shared characteristics.']}, {'end': 12639.839, 'start': 12409.869, 'title': 'Understanding constructors in classes', 'summary': 'Introduces the concept of constructors in classes, which allows for the creation of multiple objects with unique properties and methods, demonstrated through the creation of student objects with specific names, ages, and gpas.', 'duration': 229.97, 'highlights': ['The chapter explains the concept of constructors in classes, allowing for the creation of multiple objects.', 'Demonstrates the use of constructors to create student objects with specific names, ages, and GPAs.', 'Each student object is instantiated with unique properties, such as name, age, and GPA, showcasing the functionality of constructors in assigning individual attributes.']}, {'end': 12862.462, 'start': 12640.139, 'title': 'Understanding the static keyword in javascript', 'summary': 'Explains the static keyword in javascript, demonstrating how to use static properties and methods, highlighting the concept that static members belong to the class, not to the objects, with an example of a race car class and its static property for tracking the number of cars created.', 'duration': 222.323, 'highlights': ['The static keyword in JavaScript is used to declare properties and methods that belong to the class itself, not to the objects created from that class, and it is demonstrated through a race car class example.', "A static property 'number of cars' is used to keep track of the total number of cars instantiated, with the logic to increment it within the constructor, ensuring it belongs to the class rather than individual objects.", "The concept of static methods is also explained, with the demonstration of a 'StartRace' method as a static utility function that can be invoked using the class name, emphasizing its association with the class rather than individual objects.", "The explanation compares the usage of static methods in the math class, highlighting that static methods like 'round' can be accessed directly through the class name without needing to create an instance of the class."]}], 'duration': 1310.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw11552145.jpg', 'highlights': ['The map object in JavaScript holds key-value pairs of any data type, and the example demonstrates associating prices with items in an online store.', 'Objects are a group of properties and methods that have a name, and to access their properties and methods, a dot is used following the object name.', 'The chapter explains the concept of constructors in classes, allowing for the creation of multiple objects.', 'The static keyword in JavaScript is used to declare properties and methods that belong to the class itself, not to the objects created from that class, and it is demonstrated through a race car class example.']}, {'end': 13842.905, 'segs': [{'end': 13160.985, 'src': 'embed', 'start': 13131.63, 'weight': 6, 'content': [{'end': 13134.273, 'text': 'fish.alive, fish.eat, fish.sleep.', 'start': 13131.63, 'duration': 2.643}, {'end': 13140.199, 'text': 'What would happen exactly if I attempt to invoke the run method of fish? fish.run is not a function.', 'start': 13134.533, 'duration': 5.666}, {'end': 13143.623, 'text': 'So this run method belongs to the rabbit class.', 'start': 13140.56, 'duration': 3.063}, {'end': 13145.145, 'text': "Fish don't have a run method.", 'start': 13143.903, 'duration': 1.242}, {'end': 13147.808, 'text': 'But what they have in common are those eat and sleep methods.', 'start': 13145.325, 'duration': 2.483}, {'end': 13150.257, 'text': 'Fish do have a swim method.', 'start': 13148.936, 'duration': 1.321}, {'end': 13153.219, 'text': 'So the fish is eating, the fish is sleeping, the fish is swimming.', 'start': 13150.677, 'duration': 2.542}, {'end': 13154.44, 'text': "And let's test hawk.", 'start': 13153.519, 'duration': 0.921}, {'end': 13160.985, 'text': 'hawk.alive hawk.eat hawk.sleep hawk.fly Okay, true.', 'start': 13155.101, 'duration': 5.884}], 'summary': 'Fish have eat, sleep, and swim methods, while hawk has eat, sleep, and fly methods.', 'duration': 29.355, 'max_score': 13131.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw13131630.jpg'}, {'end': 13445.317, 'src': 'embed', 'start': 13418.513, 'weight': 7, 'content': [{'end': 13425.176, 'text': 'We can eliminate these two lines, and when we construct a new Rabbit object, we will first invoke the super constructor.', 'start': 13418.513, 'duration': 6.663}, {'end': 13429.758, 'text': 'So you type super, then pass your arguments to the super constructor.', 'start': 13425.556, 'duration': 4.202}, {'end': 13434.18, 'text': 'We will pass our name and age, and we can do this with the other constructors.', 'start': 13430.078, 'duration': 4.102}, {'end': 13438.953, 'text': 'This eliminates some code repetition, and this should work.', 'start': 13435.871, 'duration': 3.082}, {'end': 13445.317, 'text': 'So we have our rabbit, we have our name, rabbit, age is one year old, and the speed is 40 kilometers per hour.', 'start': 13439.534, 'duration': 5.783}], 'summary': 'Refactored rabbit object constructors to eliminate code repetition, with a speed of 40 km/h.', 'duration': 26.804, 'max_score': 13418.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw13418513.jpg'}, {'end': 13721.969, 'src': 'embed', 'start': 13689.792, 'weight': 0, 'content': [{'end': 13692.693, 'text': 'It appears to be no different from accessing that property directly.', 'start': 13689.792, 'duration': 2.901}, {'end': 13695.234, 'text': "We don't need to invoke a power method.", 'start': 13693.293, 'duration': 1.941}, {'end': 13697.435, 'text': "You just type power as if it's a property.", 'start': 13695.615, 'duration': 1.82}, {'end': 13699.977, 'text': "Let's create a protected property for gas.", 'start': 13697.876, 'duration': 2.101}, {'end': 13707.176, 'text': "Within my constructor, I'll set this dot underscore gas to some amount of gas in liters.", 'start': 13700.831, 'duration': 6.345}, {'end': 13712.641, 'text': "Perhaps we're selling cars and each car will have 25 liters of gas to start with.", 'start': 13708.217, 'duration': 4.424}, {'end': 13715.143, 'text': 'Then to display my gas, I can use a getter.', 'start': 13713.001, 'duration': 2.142}, {'end': 13721.969, 'text': 'Get gas return this dot underscore gas.', 'start': 13716.684, 'duration': 5.285}], 'summary': 'Demonstrates accessing and setting a protected property for gas with 25 liters to start', 'duration': 32.177, 'max_score': 13689.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw13689792.jpg'}], 'start': 12864.625, 'title': 'Inheritance and constructors in javascript', 'summary': 'Explores inheritance in classes, demonstrating the creation of animal classes for rabbits, fish, and hawks, and discusses the inheritance of constructors in javascript for code reusability. it also covers the super keyword, getters, and setters, showcasing their usage and benefits for object-oriented programming.', 'chapters': [{'end': 13232.208, 'start': 12864.625, 'title': 'Understanding inheritance in classes', 'summary': 'Explains inheritance in classes, demonstrating the creation of animal classes for rabbits, fish, and hawks, and highlights the benefits of inheriting properties and methods from a parent class, reducing code repetition and enabling centralized updates.', 'duration': 367.583, 'highlights': ['Inheritance allows child classes to inherit all the properties and methods from a parent class, reducing code repetition and enabling centralized updates. Inheritance is demonstrated through the creation of animal classes for rabbits, fish, and hawks, showcasing the benefits of inheriting properties and methods from a parent class, reducing code repetition and enabling centralized updates.', "Creation of a parent class 'animal' and child classes 'rabbit', 'fish', and 'hawk' showcases the implementation of inheritance, reducing the need to repeat code for common properties and methods. The creation of a parent class 'animal' and child classes 'rabbit', 'fish', and 'hawk' demonstrates the implementation of inheritance, reducing the need to repeat code for common properties and methods.", 'Using inheritance eliminates repetition in coding and enables centralized updates, as changes made to a method in the parent class reflect across all child classes, demonstrating the efficiency of inheritance in managing code modifications. Inheritance eliminates repetition in coding and enables centralized updates, as changes made to a method in the parent class reflect across all child classes, demonstrating the efficiency of inheritance in managing code modifications.']}, {'end': 13463.826, 'start': 13232.669, 'title': 'Inheriting constructors for code reusability', 'summary': 'Discusses the inheritance of constructors in javascript, demonstrating how invoking the constructor of a parent class promotes code reusability by eliminating code repetition and assigning unique properties to child classes.', 'duration': 231.157, 'highlights': ['Invoking the constructor of a parent class promotes code reusability by eliminating code repetition and assigning unique properties to child classes. By invoking the constructor of a parent class, the transcript demonstrates the elimination of code repetition and the assignment of unique properties to child classes, promoting code reusability.', "Demonstration of invoking the super constructor using 'super' and passing arguments to eliminate code repetition and ensure proper functionality. The transcript provides a demonstration of invoking the super constructor using 'super' and passing arguments to eliminate code repetition and ensure proper functionality in the context of constructor inheritance.", 'Explanation of the need to invoke the constructor of a parent class in derived classes with constructors to avoid uncaught reference errors. The transcript explains the necessity to invoke the constructor of a parent class in derived classes with constructors to prevent uncaught reference errors, highlighting the importance of ensuring proper functionality in JavaScript.']}, {'end': 13842.905, 'start': 13464.606, 'title': 'Javascript: super keyword, getters, setters', 'summary': 'Covers the super keyword in javascript, its usage for invoking parent class constructors, followed by an explanation of getters and setters, including examples of how they increase data security and allow additional logic when accessing and assigning object properties.', 'duration': 378.299, 'highlights': ['The super keyword in JavaScript is used to invoke the constructor of a parent class, promoting code reusability. The super keyword allows invoking the constructor of a parent class, enabling code reusability.', 'Getters in JavaScript bind object properties to functions when accessed, increasing data security and allowing additional logic when accessing properties. Getters in JavaScript bind object properties to functions when accessed, increasing data security and allowing additional logic when accessing properties.', 'Setters in JavaScript bind object properties to functions when assigned a value, enabling control over property assignment and the ability to add restrictions or additional logic. Setters in JavaScript bind object properties to functions when assigned a value, enabling control over property assignment and the ability to add restrictions or additional logic.']}], 'duration': 978.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw12864625.jpg', 'highlights': ['Inheritance allows child classes to inherit all properties and methods from a parent class, reducing code repetition and enabling centralized updates.', "Creation of a parent class 'animal' and child classes 'rabbit', 'fish', and 'hawk' showcases the implementation of inheritance, reducing the need to repeat code for common properties and methods.", 'Using inheritance eliminates repetition in coding and enables centralized updates, as changes made to a method in the parent class reflect across all child classes, demonstrating the efficiency of inheritance in managing code modifications.', 'Invoking the constructor of a parent class promotes code reusability by eliminating code repetition and assigning unique properties to child classes.', "Demonstration of invoking the super constructor using 'super' and passing arguments to eliminate code repetition and ensure proper functionality.", 'Explanation of the need to invoke the constructor of a parent class in derived classes with constructors to avoid uncaught reference errors.', 'The super keyword in JavaScript is used to invoke the constructor of a parent class, promoting code reusability.', 'Getters in JavaScript bind object properties to functions when accessed, increasing data security and allowing additional logic when accessing properties.', 'Setters in JavaScript bind object properties to functions when assigned a value, enabling control over property assignment and the ability to add restrictions or additional logic.']}, {'end': 16431.223, 'segs': [{'end': 13895.451, 'src': 'embed', 'start': 13869.942, 'weight': 2, 'content': [{'end': 13877.468, 'text': "If you would like a copy of my code, I'll post this in the comment section down below, and well, yeah, those are getters and setters in JavaScript.", 'start': 13869.942, 'duration': 7.526}, {'end': 13884.247, 'text': "Hey guys, in this video I'm going to show you how we can pass objects to a function as an argument.", 'start': 13879.705, 'duration': 4.542}, {'end': 13886.708, 'text': 'I have a class car, and we have three car objects.', 'start': 13884.487, 'duration': 2.221}, {'end': 13889.269, 'text': 'Each car has a model, year, and color.', 'start': 13887.148, 'duration': 2.121}, {'end': 13895.451, 'text': 'How could passing objects to a function be useful? I need a function to display all of the information for each car.', 'start': 13889.529, 'duration': 5.922}], 'summary': 'Demonstrates passing objects to a function in javascript for displaying car information.', 'duration': 25.509, 'max_score': 13869.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw13869942.jpg'}, {'end': 14042.398, 'src': 'embed', 'start': 14014.001, 'weight': 3, 'content': [{'end': 14017.364, 'text': "If you would like a copy of this code, I'll post this in the comment section down below.", 'start': 14014.001, 'duration': 3.363}, {'end': 14020.447, 'text': "If you haven't already, please be sure to smash that like button.", 'start': 14017.644, 'duration': 2.803}, {'end': 14023.79, 'text': "leave a random comment down below and subscribe if you'd like to become a fellow bro.", 'start': 14020.447, 'duration': 3.343}, {'end': 14030.412, 'text': "Hey guys, in this video I'm going to show you how we can create an array of objects in JavaScript.", 'start': 14025.769, 'duration': 4.643}, {'end': 14033.053, 'text': 'I have a class Car, and we have three Car objects.', 'start': 14030.752, 'duration': 2.301}, {'end': 14034.954, 'text': 'Car1, Car2, Car3.', 'start': 14033.393, 'duration': 1.561}, {'end': 14039.417, 'text': 'Each Car has a model, year, and color, as well as a drive method.', 'start': 14035.214, 'duration': 4.203}, {'end': 14042.398, 'text': "Let's come up with a descriptive name of this array.", 'start': 14039.897, 'duration': 2.501}], 'summary': 'Demonstrating creation of array of 3 car objects in javascript with model, year, color, and drive method.', 'duration': 28.397, 'max_score': 14014.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw14014001.jpg'}, {'end': 14224.728, 'src': 'embed', 'start': 14192.153, 'weight': 1, 'content': [{'end': 14193.214, 'text': 'You drive the Ferrari.', 'start': 14192.153, 'duration': 1.061}, {'end': 14196.117, 'text': "So yeah, that's an example of an array of objects.", 'start': 14193.695, 'duration': 2.422}, {'end': 14200.962, 'text': "It's a useful programming technique because you can keep all objects organized within an array.", 'start': 14196.638, 'duration': 4.324}, {'end': 14202.523, 'text': "So that's an array of objects.", 'start': 14201.282, 'duration': 1.241}, {'end': 14205.887, 'text': "If you would like a copy of this code, I'll post this in the comment section down below.", 'start': 14202.684, 'duration': 3.203}, {'end': 14208.69, 'text': "If you haven't already, please be sure you smash that like button.", 'start': 14205.907, 'duration': 2.783}, {'end': 14211.793, 'text': "leave a random comment down below and subscribe if you'd like to become a fellow bro.", 'start': 14208.69, 'duration': 3.103}, {'end': 14216.842, 'text': "Hey guys, in this video I'm gonna explain anonymous objects.", 'start': 14213.96, 'duration': 2.882}, {'end': 14218.804, 'text': 'They are objects without a name.', 'start': 14217.182, 'duration': 1.622}, {'end': 14224.728, 'text': "A benefit is that using anonymous objects requires less syntax, and there's no need for unique names.", 'start': 14219.044, 'duration': 5.684}], 'summary': 'Array of objects organizes data efficiently for programming. anonymous objects reduce syntax and eliminate need for unique names.', 'duration': 32.575, 'max_score': 14192.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw14192153.jpg'}, {'end': 14728.419, 'src': 'embed', 'start': 14699.179, 'weight': 5, 'content': [{'end': 14704.443, 'text': "Using this throw keyword, I can execute a user defined error, but we'll need to know when to use it.", 'start': 14699.179, 'duration': 5.264}, {'end': 14705.824, 'text': "I'll add an if statement.", 'start': 14704.904, 'duration': 0.92}, {'end': 14712.71, 'text': 'If, and the condition is, is not a number, pass in x.', 'start': 14706.405, 'duration': 6.305}, {'end': 14718.871, 'text': 'If this is true, then we will throw an error, or an argument to be used as an error.', 'start': 14712.71, 'duration': 6.161}, {'end': 14721.193, 'text': "So we're just displaying a message in this example.", 'start': 14719.232, 'duration': 1.961}, {'end': 14724.316, 'text': "That wasn't a number.", 'start': 14721.954, 'duration': 2.362}, {'end': 14728.419, 'text': "So now when I run this again, I'll enter pizza in.", 'start': 14725.357, 'duration': 3.062}], 'summary': 'Demonstrating the use of throw keyword to execute user-defined error and handling non-numeric input.', 'duration': 29.24, 'max_score': 14699.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw14699179.jpg'}, {'end': 15268.103, 'src': 'heatmap', 'start': 14975.37, 'weight': 0.985, 'content': [{'end': 14982.215, 'text': 'If at any time you ever need to clear or cancel your set timeout method, you can use the clear timeout method.', 'start': 14975.37, 'duration': 6.845}, {'end': 14984.076, 'text': "But I'm going to link this to a button.", 'start': 14982.595, 'duration': 1.481}, {'end': 14986.758, 'text': "Let's create a button within our HTML document.", 'start': 14984.596, 'duration': 2.162}, {'end': 14992.962, 'text': 'Button ID of my button.', 'start': 14988.279, 'duration': 4.683}, {'end': 14995.484, 'text': 'And the text will be buy.', 'start': 14993.983, 'duration': 1.501}, {'end': 14998.686, 'text': "If we want to buy that fictional course that we're selling.", 'start': 14996.224, 'duration': 2.462}, {'end': 15001.528, 'text': 'I need to select this button by its ID.', 'start': 14999.426, 'duration': 2.102}, {'end': 15015.479, 'text': 'document.getElementById, the ID was myButton, set the onClick attribute equal to a function.', 'start': 15003.274, 'duration': 12.205}, {'end': 15023.342, 'text': 'I will invoke the clearTimeout method, but we need to pass in the ID of a timer.', 'start': 15017.28, 'duration': 6.062}, {'end': 15029.285, 'text': "When you invoke the setTimeout method, it will return an ID, so let's store that within a variable.", 'start': 15023.683, 'duration': 5.602}, {'end': 15035.193, 'text': 'Let timer one equal set timeout.', 'start': 15030.99, 'duration': 4.203}, {'end': 15039.837, 'text': "Then let's create timer two and timer three.", 'start': 15035.954, 'duration': 3.883}, {'end': 15045.862, 'text': 'So we will pass these variables as arguments to the clear timeout method.', 'start': 15041.118, 'duration': 4.744}, {'end': 15050.666, 'text': 'So copy and paste timers one, two, and three.', 'start': 15047.343, 'duration': 3.323}, {'end': 15052.307, 'text': "Let's alert the user.", 'start': 15051.267, 'duration': 1.04}, {'end': 15056.131, 'text': 'So if they click on this buy button, they buy our fictional course.', 'start': 15052.648, 'duration': 3.483}, {'end': 15058.913, 'text': 'Thanks for buying.', 'start': 15057.772, 'duration': 1.141}, {'end': 15062.378, 'text': 'Buy this course for $500.', 'start': 15061.377, 'duration': 1.001}, {'end': 15064.16, 'text': "I'll click buy.", 'start': 15062.378, 'duration': 1.782}, {'end': 15065.502, 'text': 'Thanks for buying.', 'start': 15064.761, 'duration': 0.741}, {'end': 15068.325, 'text': 'That will cancel and clear the setTimeout methods.', 'start': 15065.822, 'duration': 2.503}, {'end': 15073.811, 'text': 'If you need to pass arguments to a function, you can list those after the milliseconds argument.', 'start': 15069.266, 'duration': 4.545}, {'end': 15075.954, 'text': "Let's create variable item.", 'start': 15074.132, 'duration': 1.822}, {'end': 15082.021, 'text': 'We would like to sell, how about a crypto currency this time.', 'start': 15076.675, 'duration': 5.346}, {'end': 15084.866, 'text': 'We will list a price.', 'start': 15083.885, 'duration': 0.981}, {'end': 15089.75, 'text': 'Let price equals 420.69.', 'start': 15085.126, 'duration': 4.624}, {'end': 15092.252, 'text': "So I'm going to pass these two variables as arguments.", 'start': 15089.75, 'duration': 2.502}, {'end': 15096.696, 'text': 'Item and price when I invoke the first message function.', 'start': 15092.913, 'duration': 3.783}, {'end': 15099.359, 'text': 'But we need parameters item and price.', 'start': 15096.917, 'duration': 2.442}, {'end': 15101.461, 'text': "Let's actually use these.", 'start': 15100.42, 'duration': 1.041}, {'end': 15105.885, 'text': 'Buy this item for.', 'start': 15101.981, 'duration': 3.904}, {'end': 15110.716, 'text': 'Price Buy this cryptocurrency for $420.69.', 'start': 15108.134, 'duration': 2.582}, {'end': 15114.859, 'text': 'So yeah, everybody, that is the setTimeout method.', 'start': 15110.716, 'duration': 4.143}, {'end': 15118.442, 'text': 'It invokes a function after a number of milliseconds.', 'start': 15115.099, 'duration': 3.343}, {'end': 15120.103, 'text': "It's an asynchronous function.", 'start': 15118.802, 'duration': 1.301}, {'end': 15122.985, 'text': "It doesn't pause the execution of the rest of your program.", 'start': 15120.263, 'duration': 2.722}, {'end': 15128.709, 'text': 'If you need to perform a task after a given amount of time, you can invoke the setTimeout method.', 'start': 15123.405, 'duration': 5.304}, {'end': 15132.512, 'text': 'Hey, if you found this video helpful, please be sure to smash that like button.', 'start': 15128.99, 'duration': 3.522}, {'end': 15135.715, 'text': "leave a random comment down below and subscribe if you'd like to become a fellow bro.", 'start': 15132.512, 'duration': 3.203}, {'end': 15141.556, 'text': "Hey guys, in this video, I'm going to explain the setInterval method.", 'start': 15138.175, 'duration': 3.381}, {'end': 15149.079, 'text': 'The setInterval method, much like the setTimeout method, it invokes a function repeatedly after a number of milliseconds.', 'start': 15141.716, 'duration': 7.363}, {'end': 15150.759, 'text': "It's an asynchronous function.", 'start': 15149.459, 'duration': 1.3}, {'end': 15152.86, 'text': "It doesn't pause the execution of your program.", 'start': 15150.839, 'duration': 2.021}, {'end': 15154.68, 'text': "Let's create a count up timer.", 'start': 15152.96, 'duration': 1.72}, {'end': 15156.241, 'text': 'I will declare a counter.', 'start': 15155.06, 'duration': 1.181}, {'end': 15160.982, 'text': 'Let count set this equal to zero and we will accept some user input.', 'start': 15156.521, 'duration': 4.461}, {'end': 15165.684, 'text': 'Let max equals window dot prompt.', 'start': 15161.463, 'duration': 4.221}, {'end': 15176.853, 'text': "Count up to what number? I'll need to convert the user input to a number because it's normally of the string data type when we accept user input.", 'start': 15167.87, 'duration': 8.983}, {'end': 15179.253, 'text': "Now let's invoke the set interval method.", 'start': 15177.273, 'duration': 1.98}, {'end': 15181.534, 'text': 'Set interval.', 'start': 15180.014, 'duration': 1.52}, {'end': 15186.896, 'text': 'We can pass in a callback, a function expression, an arrow function expression.', 'start': 15182.214, 'duration': 4.682}, {'end': 15189.076, 'text': "Let's just pass a callback to keep things simple.", 'start': 15187.136, 'duration': 1.94}, {'end': 15190.537, 'text': 'Count up.', 'start': 15189.417, 'duration': 1.12}, {'end': 15195.898, 'text': 'After how many milliseconds would we like to repeat this function? Maybe 1000 for one second.', 'start': 15191.037, 'duration': 4.861}, {'end': 15197.239, 'text': "Let's declare this function.", 'start': 15196.179, 'duration': 1.06}, {'end': 15203.292, 'text': 'function count up, i will increment count by one.', 'start': 15198.749, 'duration': 4.543}, {'end': 15210.716, 'text': 'this will be our counter and we will display whatever count is console dot log count.', 'start': 15203.292, 'duration': 7.424}, {'end': 15219.942, 'text': "let's stop if count is greater than or equal to max the number that we enter in the user input.", 'start': 15210.716, 'duration': 9.226}, {'end': 15224.265, 'text': 'to stop the set interval method, we can use the clear interval method.', 'start': 15219.942, 'duration': 4.323}, {'end': 15230.243, 'text': 'However, as an argument, we need to pass in the ID of the setInterval method.', 'start': 15226.24, 'duration': 4.003}, {'end': 15231.664, 'text': 'So we can actually assign that.', 'start': 15230.523, 'duration': 1.141}, {'end': 15237.188, 'text': "Constant, let's name this myTimer, equals setInterval.", 'start': 15232.504, 'duration': 4.684}, {'end': 15240.77, 'text': 'MyTimer is storing the ID of the setInterval method.', 'start': 15237.468, 'duration': 3.302}, {'end': 15243.832, 'text': "I'll pass that as an argument to the clearInterval method.", 'start': 15241.231, 'duration': 2.601}, {'end': 15247.295, 'text': 'And when I run this, we should count up to a number that we set.', 'start': 15244.213, 'duration': 3.082}, {'end': 15250.177, 'text': "Count up to what? Let's count up to 10.", 'start': 15247.835, 'duration': 2.342}, {'end': 15250.797, 'text': 'Press OK.', 'start': 15250.177, 'duration': 0.62}, {'end': 15257.647, 'text': 'OK, we begin at 1, 2, 3, 4..', 'start': 15250.817, 'duration': 6.83}, {'end': 15261.499, 'text': 'And we should stop at 10.', 'start': 15257.649, 'duration': 3.85}, {'end': 15268.103, 'text': 'Yeah If you ever need to pass arguments to a function, a callback, maybe a lot of these variables are within a function.', 'start': 15261.499, 'duration': 6.604}], 'summary': 'The transcript covers the usage of settimeout and setinterval methods to invoke functions after a specified time and repeatedly, with examples of clearing timers and passing arguments to functions.', 'duration': 292.733, 'max_score': 14975.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw14975370.jpg'}, {'end': 15807.219, 'src': 'embed', 'start': 15780.579, 'weight': 4, 'content': [{'end': 15786.582, 'text': "Our condition is, we'll check if hours is greater than or equal to 12.", 'start': 15780.579, 'duration': 6.003}, {'end': 15787.202, 'text': 'Question mark.', 'start': 15786.582, 'duration': 0.62}, {'end': 15790.004, 'text': "If that's true, we will return PM.", 'start': 15787.603, 'duration': 2.401}, {'end': 15792.665, 'text': "If it's false, we'll return AM.", 'start': 15790.404, 'duration': 2.261}, {'end': 15794.526, 'text': 'And I will display.', 'start': 15793.605, 'duration': 0.921}, {'end': 15798.994, 'text': 'my variable am or pm.', 'start': 15796.072, 'duration': 2.922}, {'end': 15801.155, 'text': 'And it is currently am.', 'start': 15799.915, 'duration': 1.24}, {'end': 15803.837, 'text': 'The hours are still currently in military time.', 'start': 15801.376, 'duration': 2.461}, {'end': 15807.219, 'text': 'So to convert that to standard, this is one way in which we can do that.', 'start': 15804.057, 'duration': 3.162}], 'summary': 'Check if hours >= 12. return pm if true, am if false. convert military time to standard.', 'duration': 26.64, 'max_score': 15780.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw15780579.jpg'}, {'end': 16132.967, 'src': 'heatmap', 'start': 15835.072, 'weight': 0, 'content': [{'end': 15838.693, 'text': "So yeah everybody, that's a few things we can do with date objects.", 'start': 15835.072, 'duration': 3.621}, {'end': 15840.813, 'text': "They're used to work with dates and times.", 'start': 15838.933, 'duration': 1.88}, {'end': 15844.974, 'text': "If you would like a copy of this code, I'll post all of this in the comment section down below.", 'start': 15841.233, 'duration': 3.741}, {'end': 15848.295, 'text': 'And well, yeah, those are date objects in JavaScript.', 'start': 15845.174, 'duration': 3.121}, {'end': 15855.86, 'text': "Hey everybody, in this video we're going to create a practice program to create a clock that will update every second.", 'start': 15850.316, 'duration': 5.544}, {'end': 15859.623, 'text': "Let's begin by going to our HTML file, and I will add a label.", 'start': 15856.08, 'duration': 3.543}, {'end': 15866.407, 'text': "We'll use a pair of label tags, and I will set the ID equal to myLabel.", 'start': 15859.863, 'duration': 6.544}, {'end': 15868.909, 'text': 'Save, head back to your HTML document.', 'start': 15867.068, 'duration': 1.841}, {'end': 15884.576, 'text': "I'll assign that variable to a label, constant myLabel equals document.getElementById The ID was myLabel, and we'll create an update function.", 'start': 15869.209, 'duration': 15.367}, {'end': 15891.098, 'text': 'Function update, and we will get the current date and time.', 'start': 15885.657, 'duration': 5.441}, {'end': 15895.26, 'text': 'Let date equal new date.', 'start': 15891.738, 'duration': 3.522}, {'end': 15897.84, 'text': "Let's update this label just to test it.", 'start': 15895.98, 'duration': 1.86}, {'end': 15902.542, 'text': 'myLabel.innerHTML equals date.', 'start': 15898.281, 'duration': 4.261}, {'end': 15904.803, 'text': 'And then we should invoke this function.', 'start': 15903.322, 'duration': 1.481}, {'end': 15909.238, 'text': "Update So that's the current date and time.", 'start': 15905.743, 'duration': 3.495}, {'end': 15910.998, 'text': 'But I would like to format this.', 'start': 15909.838, 'duration': 1.16}, {'end': 15915.52, 'text': "Within our update function, let's create a nested function to format the time.", 'start': 15911.579, 'duration': 3.941}, {'end': 15918.581, 'text': 'Function Format.', 'start': 15916.901, 'duration': 1.68}, {'end': 15921.682, 'text': "Time Let's get the hours.", 'start': 15918.881, 'duration': 2.801}, {'end': 15926.244, 'text': 'Let hours equal date dot get hours.', 'start': 15922.123, 'duration': 4.121}, {'end': 15928.525, 'text': 'The minutes.', 'start': 15928.065, 'duration': 0.46}, {'end': 15933.747, 'text': 'Let minutes date dot get minutes.', 'start': 15930.886, 'duration': 2.861}, {'end': 15936.128, 'text': 'And seconds.', 'start': 15935.588, 'duration': 0.54}, {'end': 15942.009, 'text': 'seconds. date dot get seconds.', 'start': 15938.368, 'duration': 3.641}, {'end': 15957.233, 'text': "Let's return a template literal Hours, Minutes, Seconds.", 'start': 15942.009, 'duration': 15.224}, {'end': 15958.354, 'text': 'Make sure you spell return right?', 'start': 15957.233, 'duration': 1.121}, {'end': 15963.995, 'text': "Let's invoke the format time function and we should probably pass a date.", 'start': 15958.554, 'duration': 5.441}, {'end': 15969.176, 'text': 'so set up a date as an argument and a parameter, and This time is in military time.', 'start': 15963.995, 'duration': 5.181}, {'end': 15971.017, 'text': "so let's set this to standard.", 'start': 15969.176, 'duration': 1.841}, {'end': 15972.458, 'text': "We'll need am or pm.", 'start': 15971.297, 'duration': 1.161}, {'end': 15977.441, 'text': 'Let am or pm equal.', 'start': 15973.038, 'duration': 4.403}, {'end': 15979.202, 'text': "I'll use a ternary operator.", 'start': 15977.781, 'duration': 1.421}, {'end': 15983.585, 'text': "We'll check if hours is greater than or equal to 12 question mark.", 'start': 15980.323, 'duration': 3.262}, {'end': 15985.786, 'text': "If that's true, return pm.", 'start': 15984.185, 'duration': 1.601}, {'end': 15988.268, 'text': 'Otherwise, return am.', 'start': 15986.547, 'duration': 1.721}, {'end': 15991.31, 'text': "Let's add our variable am or pm.", 'start': 15989.269, 'duration': 2.041}, {'end': 15999.453, 'text': "My current time is 1222 p.m. The hours is still in military time, although you can't tell from my example.", 'start': 15993.53, 'duration': 5.923}, {'end': 16011.259, 'text': 'To convert that between 1 and 12, I can set hours equal to hours modulus 12, bitwise operator 12.', 'start': 15999.913, 'duration': 11.346}, {'end': 16018.827, 'text': 'Modulus gives you the remainder of any division if hours is 12, Then the remainder of 12 divided by 12 is 0.', 'start': 16011.259, 'duration': 7.568}, {'end': 16023.708, 'text': 'Then we would instead use 12 in place of 0 using the OR bitwise operator.', 'start': 16018.827, 'duration': 4.881}, {'end': 16026.789, 'text': "Since I'm filming this at 12 p.m., there's no change.", 'start': 16024.128, 'duration': 2.661}, {'end': 16029.03, 'text': 'I would like this clock to update every second.', 'start': 16027.229, 'duration': 1.801}, {'end': 16035.871, 'text': "After we invoke the update function, let's invoke the setInterval method of our window object.", 'start': 16029.35, 'duration': 6.521}, {'end': 16037.732, 'text': 'The first argument is a callback.', 'start': 16036.432, 'duration': 1.3}, {'end': 16042.229, 'text': "We'll pass our update function as a callback, and then a delay.", 'start': 16039.087, 'duration': 3.142}, {'end': 16046.052, 'text': 'Every 1000 milliseconds, I would like to update our clock.', 'start': 16042.669, 'duration': 3.383}, {'end': 16047.753, 'text': "There, it's updating currently.", 'start': 16046.532, 'duration': 1.221}, {'end': 16053.596, 'text': "Now, if one of these variables is a single digit, we don't have any leading zeros.", 'start': 16049.474, 'duration': 4.122}, {'end': 16055.458, 'text': "I'd like to change that.", 'start': 16054.577, 'duration': 0.881}, {'end': 16059.42, 'text': 'If we have a single digit, I would like a leading zero before the actual time unit.', 'start': 16055.518, 'duration': 3.902}, {'end': 16062.382, 'text': "So let's create another nested function.", 'start': 16060.461, 'duration': 1.921}, {'end': 16067.866, 'text': "Function, let's call this format zeros.", 'start': 16063.523, 'duration': 4.343}, {'end': 16072.155, 'text': "We'll accept a time.", 'start': 16070.794, 'duration': 1.361}, {'end': 16078.281, 'text': "Let's set our time parameter equal to time.toString.", 'start': 16072.616, 'duration': 5.665}, {'end': 16080.583, 'text': 'This will convert a number to a string.', 'start': 16078.521, 'duration': 2.062}, {'end': 16083.006, 'text': 'Then we will use some string concatenation.', 'start': 16081.084, 'duration': 1.922}, {'end': 16087.67, 'text': "And return, we'll use the ternary operator.", 'start': 16084.387, 'duration': 3.283}, {'end': 16090.473, 'text': "Let's check the time's length property.", 'start': 16088.11, 'duration': 2.363}, {'end': 16094.503, 'text': "If it's less than two, that means it's a single digit.", 'start': 16091.582, 'duration': 2.921}, {'end': 16101.786, 'text': 'If our time length is a single digit, then we will precede our time with zero.', 'start': 16095.304, 'duration': 6.482}, {'end': 16104.307, 'text': "If it's false, we'll just return time back.", 'start': 16102.286, 'duration': 2.021}, {'end': 16108.189, 'text': 'So then we just need to invoke and reassign hours, minutes, and seconds.', 'start': 16104.867, 'duration': 3.322}, {'end': 16118.153, 'text': "We'll invoke our format zeros function, pass in our hours, and do the same thing with minutes and seconds.", 'start': 16108.669, 'duration': 9.484}, {'end': 16123.095, 'text': 'And we now have some leading zeros.', 'start': 16121.553, 'duration': 1.542}, {'end': 16126.72, 'text': 'So yeah, I thought that would be a fun practice project.', 'start': 16124.056, 'duration': 2.664}, {'end': 16129.082, 'text': 'We have a clock that will update every second.', 'start': 16126.9, 'duration': 2.182}, {'end': 16132.967, 'text': "If you would like a copy of this code, I'll post this to the comment section down below.", 'start': 16129.503, 'duration': 3.464}], 'summary': 'Creating a javascript clock program with auto-update every second.', 'duration': 297.895, 'max_score': 15835.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw15835072.jpg'}], 'start': 13844.469, 'title': 'Javascript programming techniques', 'summary': 'Covers javascript objects, functions, error handling, asynchronous methods, date objects, and creating a clock, with practical examples demonstrating creating arrays, working with date properties, and explaining synchronous vs asynchronous code.', 'chapters': [{'end': 14230.592, 'start': 13844.469, 'title': 'Javascript objects and functions', 'summary': 'Demonstrates the use of getters and setters, passing objects to functions, creating an array of objects, and explaining anonymous objects in javascript, with practical examples and programming techniques.', 'duration': 386.123, 'highlights': ["The chapter demonstrates the use of getters and setters, which bind an object's property to a function when accessed or assigned a value, in the case of a setter, and explains their functionality in JavaScript.", 'It explains how to pass objects to a function as arguments, allowing temporary nicknames for object parameters and displaying the information and changing the properties of the objects within the function.', 'The chapter illustrates the creation of an array of objects in JavaScript, accessing and manipulating the properties and methods of objects within the array, and also demonstrates looping through the array and invoking the methods of each element.', 'It also explains anonymous objects, highlighting their benefits of requiring less syntax and not needing unique names, but also noting the downside of lacking direct access to these objects.']}, {'end': 14564.35, 'start': 14230.792, 'title': 'Creating array of cards with anonymous objects', 'summary': 'Covers creating an array of cards using anonymous objects, reducing the need for unique names and demonstrating access to object properties via array index, resulting in less syntax and code size, and concluding with the display of all cards using the foreach method.', 'duration': 333.558, 'highlights': ['Creating array of cards using anonymous objects The chapter explains creating an array of cards using anonymous objects to reduce the need for unique names and demonstrate accessing object properties via array index.', 'Accessing object properties via array index Demonstrates accessing object properties indirectly via array index, showcasing the ability to reference objects by an index number within an array.', 'Reduction in syntax and code size Illustrates the practicality of using anonymous objects to reduce syntax and code size, highlighting the benefits of less syntax and the elimination of the need for unique names.', 'Displaying all cards using forEach method Concludes by displaying all cards within the deck using the forEach method, showcasing the functionality of anonymous objects and their storage within an array.']}, {'end': 15280.791, 'start': 14566.5, 'title': 'Error handling and asynchronous methods in javascript', 'summary': 'Explains error handling in javascript, including the use of try-catch blocks, handling user input, and executing user-defined errors. it also covers the settimeout and setinterval methods for asynchronous functions, demonstrating how to use them with examples and user input.', 'duration': 714.291, 'highlights': ['Errors are objects with a description of something that went wrong, and they can halt the execution of a program. Errors are objects that describe issues in the program and can cause the program to stop.', 'Using the try-catch block allows for graceful handling of errors in JavaScript by surrounding dangerous code with a try block and following it with a catch block. The try-catch block is used to handle errors gracefully by surrounding potentially error-causing code with a try block and following it with a catch block.', "The throw keyword can be used to execute user-defined errors, particularly when handling user input, for example, checking if the input is a number and throwing an error if it's not. The throw keyword is used to execute user-defined errors, such as checking user input and throwing an error if it does not meet certain conditions.", 'The chapter also covers the setTimeout method, an asynchronous function in JavaScript that allows a function to be invoked after a specified number of milliseconds, with examples demonstrating its usage. The setTimeout method is explained as an asynchronous function that allows a function to be invoked after a specified time interval.', 'Additionally, the setInterval method, which is similar to setTimeout but repeatedly invokes a function after a specified number of milliseconds, is also explained with an example. The setInterval method is explained as a function that repeatedly invokes a specified function after a given time interval.']}, {'end': 15834.852, 'start': 15281.072, 'title': 'Working with date objects', 'summary': 'Explains how to work with date objects in javascript, covering topics such as creating date objects, setting date values, accessing date properties, and formatting date and time, while demonstrating examples and usage of various methods and operations.', 'duration': 553.78, 'highlights': ['Creating date objects and displaying current date and time The video discusses creating date objects in JavaScript using the date constructor, and then displaying the current date and time using console.log and toLocaleString method.', 'Setting date values and referencing the epic date The chapter explains setting date values using milliseconds as an argument, referencing the epic date (around the year 1969) as a starting point, and demonstrates creating new dates based on milliseconds after the epic date.', 'Accessing and modifying date properties The transcript covers accessing various date properties such as year, month, day, hours, minutes, seconds, and milliseconds using methods like getFullYear, getMonth, getDate, getHours, getMinutes, getSeconds, and getMilliseconds, and also demonstrates modifying these properties using associated set methods.', 'Formatting date and time using custom functions The chapter demonstrates creating custom functions to format date and time, including examples of formatting date and time using functions like format date and format time, and covers additional practices like converting military time to standard time and displaying AM or PM.']}, {'end': 16132.967, 'start': 15835.072, 'title': 'Creating a clock with javascript', 'summary': 'Discusses creating a clock in javascript that updates every second, utilizing date objects and functions to format the time in a standard 12-hour format, with leading zeros added for single digit time units.', 'duration': 297.895, 'highlights': ['Creating a clock that updates every second The tutorial demonstrates creating a clock in JavaScript that updates every second using the setInterval method.', 'Formatting the time in a standard 12-hour format The chapter explains how to convert the time from military time to a standard 12-hour format, along with adding the functionality to distinguish between AM and PM.', 'Adding leading zeros for single digit time units The tutorial provides a detailed explanation of how to add leading zeros for single digit time units using nested functions and the ternary operator.']}, {'end': 16431.223, 'start': 16133.168, 'title': 'Synchronous vs asynchronous in javascript', 'summary': 'Explains the differences between synchronous and asynchronous code in javascript, highlighting how synchronous code executes in a linear sequence, while asynchronous code allows tasks to run out of order and take an indeterminate amount of time, with examples such as settimeout and console.time methods.', 'duration': 298.055, 'highlights': ['Synchronous code executes in an ordered sequence, with step-by-step linear instructions, while asynchronous code allows tasks to be out of order and take an indeterminate amount of time. Synchronous code follows an ordered sequence, requiring completion of one step before moving to the next, while asynchronous code allows tasks to run out of order and take an indeterminate amount of time, such as using setTimeout method.', 'The setTimeout method is an example of asynchronous code, allowing a task to start now and finish sometime later, running in the background and not pausing the program. The setTimeout method exemplifies asynchronous code, enabling a task to start now and finish sometime later, running in the background and not pausing the program, as demonstrated by waiting for a console.log message after a specified time period.', 'The console.time method in JavaScript starts a timer to track the duration of an operation, with console.timeEnd used to end the timer and display the elapsed time. The console.time method initiates a timer to track the duration of an operation, and console.timeEnd is employed to end the timer and display the elapsed time, demonstrated by tracking the time taken for a user to click a button and for a setTimeout function to execute.']}], 'duration': 2586.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw13844469.jpg', 'highlights': ['Demonstrates creating a clock in JavaScript that updates every second using the setInterval method.', 'Illustrates the practicality of using anonymous objects to reduce syntax and code size, highlighting the benefits of less syntax and the elimination of the need for unique names.', 'The try-catch block is used to handle errors gracefully by surrounding potentially error-causing code with a try block and following it with a catch block.', 'Errors are objects with a description of something that went wrong, and they can halt the execution of a program.', 'The setTimeout method is explained as an asynchronous function that allows a function to be invoked after a specified time interval.', 'Accessing object properties via array index Demonstrates accessing object properties indirectly via array index, showcasing the ability to reference objects by an index number within an array.']}, {'end': 17443.539, 'segs': [{'end': 16673.89, 'src': 'embed', 'start': 16647.518, 'weight': 3, 'content': [{'end': 16653.08, 'text': 'Arrow, what would we like to do? Console.log whatever my error is.', 'start': 16647.518, 'duration': 5.562}, {'end': 16657.524, 'text': 'When I run this again, we have caught this exception.', 'start': 16654.322, 'duration': 3.202}, {'end': 16659.663, 'text': 'File not loaded.', 'start': 16658.683, 'duration': 0.98}, {'end': 16661.865, 'text': "So that's kind of the basics of a promise.", 'start': 16660.264, 'duration': 1.601}, {'end': 16665.045, 'text': "It's a promise to return something in the future.", 'start': 16662.724, 'duration': 2.321}, {'end': 16668.988, 'text': "The state is pending, then it's either fulfilled or rejected.", 'start': 16665.545, 'duration': 3.443}, {'end': 16671.829, 'text': "Now you don't necessarily need to reject a promise.", 'start': 16669.468, 'duration': 2.361}, {'end': 16673.89, 'text': 'This would still work too.', 'start': 16672.849, 'duration': 1.041}], 'summary': 'Introduction to promises, handling exceptions, and file loading basics.', 'duration': 26.372, 'max_score': 16647.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw16647518.jpg'}, {'end': 16777.171, 'src': 'embed', 'start': 16753.497, 'weight': 0, 'content': [{'end': 16759.94, 'text': "What if you would like to pass an argument to a promise? Let's rename this promise object as something else, something that's more descriptive.", 'start': 16753.497, 'duration': 6.443}, {'end': 16761.421, 'text': 'Like wait.', 'start': 16760.822, 'duration': 0.599}, {'end': 16764.964, 'text': 'Wait is now a promise.', 'start': 16763.603, 'duration': 1.361}, {'end': 16768.045, 'text': 'When we create this promise, we can pass an argument.', 'start': 16765.845, 'duration': 2.2}, {'end': 16774.09, 'text': "How about an amount of milliseconds? Let's wait for 3 seconds, that's 3000 milliseconds.", 'start': 16768.506, 'duration': 5.584}, {'end': 16777.171, 'text': "I'll precede this promise with an arrow function.", 'start': 16774.95, 'duration': 2.221}], 'summary': "Renamed promise 'wait' now takes argument for 3000 milliseconds.", 'duration': 23.674, 'max_score': 16753.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw16753497.jpg'}, {'end': 17123.585, 'src': 'embed', 'start': 17094.949, 'weight': 6, 'content': [{'end': 17097.49, 'text': 'and I will stick these two lines within that function.', 'start': 17094.949, 'duration': 2.541}, {'end': 17101.032, 'text': 'You can only use the await keyword within an async function.', 'start': 17097.931, 'duration': 3.101}, {'end': 17104.694, 'text': 'And then we need to invoke this function to begin the process.', 'start': 17101.953, 'duration': 2.741}, {'end': 17106.595, 'text': 'Start process.', 'start': 17105.555, 'duration': 1.04}, {'end': 17108.036, 'text': 'File loaded.', 'start': 17107.376, 'duration': 0.66}, {'end': 17113.699, 'text': 'There was no need to invoke this async function followed with then and catch.', 'start': 17108.557, 'duration': 5.142}, {'end': 17115.02, 'text': 'We can eliminate that.', 'start': 17114.2, 'duration': 0.82}, {'end': 17116.941, 'text': 'All you need is await.', 'start': 17115.821, 'duration': 1.12}, {'end': 17119.322, 'text': 'But it does have to be within an async function.', 'start': 17117.501, 'duration': 1.821}, {'end': 17120.663, 'text': 'Now check this out.', 'start': 17120.023, 'duration': 0.64}, {'end': 17123.585, 'text': "What if our file doesn't load? This will throw an error.", 'start': 17120.763, 'duration': 2.822}], 'summary': "Using only 'await' within an 'async' function eliminates the need for 'then' and 'catch', making the process more efficient.", 'duration': 28.636, 'max_score': 17094.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw17094949.jpg'}, {'end': 17173.473, 'src': 'embed', 'start': 17144.184, 'weight': 1, 'content': [{'end': 17146.105, 'text': 'If there are any errors, we will catch them.', 'start': 17144.184, 'duration': 1.921}, {'end': 17147.066, 'text': 'So catch.', 'start': 17146.505, 'duration': 0.561}, {'end': 17149.247, 'text': 'There is one argument of error.', 'start': 17147.646, 'duration': 1.601}, {'end': 17151.728, 'text': 'And I will simply display our error.', 'start': 17150.107, 'duration': 1.621}, {'end': 17152.929, 'text': 'Catch error.', 'start': 17152.389, 'duration': 0.54}, {'end': 17155.543, 'text': 'console.log error.', 'start': 17153.902, 'duration': 1.641}, {'end': 17157.224, 'text': "So let's run this again.", 'start': 17156.343, 'duration': 0.881}, {'end': 17159.025, 'text': 'File not loaded.', 'start': 17157.824, 'duration': 1.201}, {'end': 17163.487, 'text': 'So this is very helpful if we have to wait for more than one asynchronous function.', 'start': 17159.485, 'duration': 4.002}, {'end': 17165.268, 'text': "We'll discuss this in the next topic.", 'start': 17163.827, 'duration': 1.441}, {'end': 17169.831, 'text': 'Maybe not only do we have to load a file, but we first need to locate it and we have to close it.', 'start': 17165.448, 'duration': 4.383}, {'end': 17173.473, 'text': "In the next topic, we'll have to wait for multiple asynchronous functions.", 'start': 17170.211, 'duration': 3.262}], 'summary': 'The transcript discusses catching and displaying errors, as well as dealing with asynchronous functions and file loading.', 'duration': 29.289, 'max_score': 17144.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw17144184.jpg'}, {'end': 17390.009, 'src': 'embed', 'start': 17361.489, 'weight': 4, 'content': [{'end': 17364.831, 'text': "We have access to this variable even though it's not written within this file.", 'start': 17361.489, 'duration': 3.342}, {'end': 17368.373, 'text': "We've imported that variable from this separate JavaScript file.", 'start': 17365.231, 'duration': 3.142}, {'end': 17370.675, 'text': "Let's calculate the circumference of a circle.", 'start': 17368.754, 'duration': 1.921}, {'end': 17381.142, 'text': 'Let circumference equal get circumference pass in a radius, maybe 10.', 'start': 17371.575, 'duration': 9.567}, {'end': 17383.123, 'text': "Then let's display our circumference.", 'start': 17381.142, 'duration': 1.981}, {'end': 17390.009, 'text': 'Console.log circumference If we pass in 10 as a radius, the circumference is 62.83.', 'start': 17383.463, 'duration': 6.546}], 'summary': 'Accessed imported variable to calculate and display circle circumference, obtaining a result of 62.83.', 'duration': 28.52, 'max_score': 17361.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw17361489.jpg'}, {'end': 17450.521, 'src': 'embed', 'start': 17424.033, 'weight': 5, 'content': [{'end': 17428.254, 'text': "If there's a lot to import, we can simply import everything by using an asterisk.", 'start': 17424.033, 'duration': 4.221}, {'end': 17430.735, 'text': "But we'll give all of these imports an alias.", 'start': 17428.794, 'duration': 1.941}, {'end': 17431.895, 'text': "That's like a nickname.", 'start': 17430.815, 'duration': 1.08}, {'end': 17434.636, 'text': 'Import asterisk as.', 'start': 17432.295, 'duration': 2.341}, {'end': 17437.617, 'text': "Your nickname should be descriptive of the file that you're importing.", 'start': 17434.636, 'duration': 2.981}, {'end': 17440.618, 'text': "This is as if we're creating a separate namespace.", 'start': 17438.057, 'duration': 2.561}, {'end': 17443.539, 'text': 'Maybe mathutil.', 'start': 17441.158, 'duration': 2.381}, {'end': 17450.521, 'text': 'Now in order to use these variables or functions, I would need to precede them with that namespace, mathutil.py.', 'start': 17443.859, 'duration': 6.662}], 'summary': 'To import multiple items using an asterisk, assign them a descriptive alias for separate namespace.', 'duration': 26.488, 'max_score': 17424.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw17424033.jpg'}], 'start': 16431.343, 'title': 'Promises and asynchronous operations in javascript', 'summary': 'Covers the concept of promises in javascript, their structure, states, and usage, including creating, handling, and consuming promises, using async functions, await keyword, and error handling, with a focus on es6 modules and practical examples.', 'chapters': [{'end': 16584.651, 'start': 16431.343, 'title': 'Asynchronous promises in javascript', 'summary': 'Explains the concept of promises in javascript, detailing how they encapsulate the result of asynchronous operations and enable asynchronous methods to return values like synchronous ones, with a focus on creating a promise, handling its state, and consuming its result using the then method.', 'duration': 153.308, 'highlights': ['Promises encapsulate the result of an asynchronous operation, allowing asynchronous methods to return values like synchronous ones. Promises in JavaScript encapsulate the result of an asynchronous operation, enabling asynchronous methods to return values like they were synchronous.', 'Creating a promise involves using the resolve and reject callbacks to handle successful or unsuccessful asynchronous processes. Creating a promise involves using the resolve and reject callbacks to handle successful or unsuccessful asynchronous processes, with the resolve callback being invoked if the asynchronous process is successful and the reject callback being invoked if it is not.', 'Promises have a state of pending, fulfilled, or rejected, and the consuming code uses the then method to handle the resolved promise. Promises have a state of pending, fulfilled, or rejected, and the consuming code uses the then method to handle the resolved promise, allowing further actions to be performed based on the outcome of the asynchronous operation.']}, {'end': 16832.606, 'start': 16585.252, 'title': 'Introduction to promises in js', 'summary': 'Introduces the basics of promises in javascript, explaining their structure, states, and usage, including examples of resolving and rejecting promises, handling exceptions with catch, passing arguments to promises, and using the async keyword to make a function return a promise.', 'duration': 247.354, 'highlights': ['Promises encapsulate the result of an asynchronous operation and allow asynchronous methods to return values as if they were synchronous. Promises act as objects that encapsulate the result of an asynchronous operation, allowing asynchronous methods to return values as if they were synchronous.', 'Explanation of the basics of promises, including their structure, states, and usage, such as resolving, rejecting, and catching exceptions with catch. The chapter explains the basics of promises, including their structure, states, and usage, such as resolving, rejecting, and catching exceptions with catch.', 'Demonstration of passing arguments to promises and using the async keyword to make a function return a promise. The chapter demonstrates passing arguments to promises and using the async keyword to make a function return a promise.']}, {'end': 17443.539, 'start': 16833.026, 'title': 'Understanding async functions & await keyword', 'summary': 'Explains how to use async functions to return promises and utilize the await keyword for waiting for promises, along with error handling using try-catch blocks and the concept of es6 modules for importing and using reusable code.', 'duration': 610.513, 'highlights': ["Async function 'loadFile' is created to return a promise, where 'resolve' is invoked if file is loaded and 'reject' if not, simplifying the use of resolve and reject callbacks to handle asynchronous processes. Creating an async function 'loadFile' to simplify handling of resolve and reject callbacks when returning a promise, thus streamlining the asynchronous process.", "Demonstrates usage of the 'throw' keyword to raise an error for unsuccessful asynchronous processes and using 'try-catch' blocks to handle and catch the errors, providing a structured approach to error handling. Illustrating the use of 'throw' keyword for raising errors in asynchronous processes and implementing 'try-catch' blocks for structured error handling.", "Explanation of the 'await' keyword within async functions to wait for promises and its usage for simplifying the handling of asynchronous processes without the need for 'then' and 'catch' methods, leading to more concise code. Explaining the usage of 'await' keyword within async functions to simplify asynchronous process handling without 'then' and 'catch' methods, resulting in more concise code.", "Introduction to ES6 modules with demonstration of exporting variables and functions using the 'export' keyword and importing them using 'import' statements, showcasing the concept of reusable code and modular development. Introducing ES6 modules and showcasing the use of 'export' and 'import' keywords for exporting and importing reusable code, promoting modular development."]}], 'duration': 1012.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw16431343.jpg', 'highlights': ['Promises encapsulate the result of an asynchronous operation, enabling asynchronous methods to return values like they were synchronous.', 'Creating a promise involves using the resolve and reject callbacks to handle successful or unsuccessful asynchronous processes.', 'Promises have a state of pending, fulfilled, or rejected, and the consuming code uses the then method to handle the resolved promise.', 'Demonstration of passing arguments to promises and using the async keyword to make a function return a promise.', 'Explanation of the basics of promises, including their structure, states, and usage, such as resolving, rejecting, and catching exceptions with catch.', "Illustrating the use of 'throw' keyword for raising errors in asynchronous processes and implementing 'try-catch' blocks for structured error handling.", "Introduction to ES6 modules with demonstration of exporting variables and functions using the 'export' keyword and importing them using 'import' statements."]}, {'end': 18810.793, 'segs': [{'end': 17610.333, 'src': 'embed', 'start': 17582.791, 'weight': 1, 'content': [{'end': 17586.553, 'text': 'Document.title Set the sequel to something.', 'start': 17582.791, 'duration': 3.762}, {'end': 17588.653, 'text': 'Title goes here.', 'start': 17587.153, 'duration': 1.5}, {'end': 17593.655, 'text': 'And taking a look at this tab of my web browser, you can see that it says title goes here.', 'start': 17589.314, 'duration': 4.341}, {'end': 17595.776, 'text': 'I can even change the location.', 'start': 17594.075, 'duration': 1.701}, {'end': 17600.978, 'text': "Document.location I'll set the sequel to Google.", 'start': 17596.416, 'duration': 4.562}, {'end': 17607.611, 'text': 'So http://www.google.com.', 'start': 17601.846, 'duration': 5.765}, {'end': 17610.333, 'text': 'Then when I save this, it takes me to Google.', 'start': 17608.091, 'duration': 2.242}], 'summary': 'Setting the sequel to google takes you to http://www.google.com.', 'duration': 27.542, 'max_score': 17582.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw17582791.jpg'}, {'end': 18179.375, 'src': 'embed', 'start': 18152.451, 'weight': 0, 'content': [{'end': 18155.913, 'text': 'So maybe the first element that has the for attribute I would like to select.', 'start': 18152.451, 'duration': 3.462}, {'end': 18160.076, 'text': 'I will use a set of square brackets and type 4.', 'start': 18156.633, 'duration': 3.443}, {'end': 18163.059, 'text': 'The first element with the for attribute is selected.', 'start': 18160.076, 'duration': 2.983}, {'end': 18166.783, 'text': 'If you need all elements, you can use query selector all.', 'start': 18163.62, 'duration': 3.163}, {'end': 18173.209, 'text': "So let's copy this, paste it, let elements query selector all.", 'start': 18167.423, 'duration': 5.786}, {'end': 18179.375, 'text': "I would like to select all list items and change the background color, but we'll need to iterate over each of the elements.", 'start': 18173.609, 'duration': 5.766}], 'summary': 'Using queryselectorall to select all list items and iterate over each element.', 'duration': 26.924, 'max_score': 18152.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw18152451.jpg'}, {'end': 18251.073, 'src': 'embed', 'start': 18222.212, 'weight': 3, 'content': [{'end': 18226.595, 'text': 'But before we do that, I need to explain some family relationships between elements.', 'start': 18222.212, 'duration': 4.383}, {'end': 18228.656, 'text': 'Say we select our body element.', 'start': 18227.175, 'duration': 1.481}, {'end': 18232.899, 'text': 'Within my HTML document, I have three unordered lists.', 'start': 18229.096, 'duration': 3.803}, {'end': 18235.901, 'text': 'a list for fruit, vegetables, and dessert.', 'start': 18233.419, 'duration': 2.482}, {'end': 18239.044, 'text': 'They are arranged in a hierarchy, a family tree.', 'start': 18236.401, 'duration': 2.643}, {'end': 18246.129, 'text': "If we select our body, these three lists, since they're contained within the body, they would be considered children.", 'start': 18239.484, 'duration': 6.645}, {'end': 18251.073, 'text': 'My list of fruit is a child, same with vegetables, and dessert.', 'start': 18246.509, 'duration': 4.564}], 'summary': 'Explaining family relationships between elements in html, with three unordered lists for fruit, vegetables, and dessert arranged in a hierarchy.', 'duration': 28.861, 'max_score': 18222.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw18222212.jpg'}, {'end': 18583.241, 'src': 'embed', 'start': 18556.5, 'weight': 2, 'content': [{'end': 18561.503, 'text': 'Within the createElement method, and within quotes, I can list a tag that I would like to create.', 'start': 18556.5, 'duration': 5.003}, {'end': 18563.725, 'text': 'I would like to create an h1 header tag.', 'start': 18561.884, 'duration': 1.841}, {'end': 18565.166, 'text': "I'll assign this to a variable.", 'start': 18564.045, 'duration': 1.121}, {'end': 18568.858, 'text': 'constant. maybe name tag?', 'start': 18566.738, 'duration': 2.12}, {'end': 18569.939, 'text': "we'll store our name.", 'start': 18568.858, 'duration': 1.081}, {'end': 18571.939, 'text': 'name tag is an h1 header tag.', 'start': 18569.939, 'duration': 2}, {'end': 18573.759, 'text': "however, it doesn't contain any text.", 'start': 18571.939, 'duration': 1.82}, {'end': 18576.5, 'text': "that's where changing html elements comes in.", 'start': 18573.759, 'duration': 2.741}, {'end': 18578.82, 'text': 'two ways in which i could add some text to this.', 'start': 18576.5, 'duration': 2.32}, {'end': 18583.241, 'text': 'h1 header tag is to either use inner html or text content.', 'start': 18578.82, 'duration': 4.421}], 'summary': 'The transcript discusses creating an h1 header tag within the createelement method and adding text using innerhtml or textcontent.', 'duration': 26.741, 'max_score': 18556.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw18556500.jpg'}], 'start': 17443.859, 'title': 'Javascript dom manipulation', 'summary': 'Covers introduction to modules and dom in javascript, dom manipulation and element selection, javascript dom element selection, dom traversal techniques, and safe element manipulation in javascript.', 'chapters': [{'end': 17610.333, 'start': 17443.859, 'title': 'Introduction to modules and dom in javascript', 'summary': 'Introduces modules in javascript, explaining how they are files of pre-written code that can be imported and used, and then provides a quick explanation of the document object model (dom) as an api used for changing the content of a web page, highlighting the hierarchical tree structure and the ability to interact with and modify elements.', 'duration': 166.474, 'highlights': ['Introduction to modules in JavaScript Explains the concept of modules as files of pre-written code that can be imported and used, providing an overview of their functionality in JavaScript.', 'Quick explanation of the Document Object Model (DOM) Provides a brief overview of the DOM as an API for changing the content of a web page, highlighting its hierarchical tree structure and the ability to interact with and modify elements.', 'Usage of document.titleproperty and document.url Demonstrates accessing and displaying the properties of the DOM, such as document.titleproperty and document.url, and showcases the ability to change these properties.']}, {'end': 17918.948, 'start': 17611.113, 'title': 'Dom manipulation and element selection', 'summary': 'Explains how to access and manipulate the document object model (dom), including changing the background color of elements and selecting elements by id and name, with a demonstration of using foreach to display and manipulate selected elements.', 'duration': 307.835, 'highlights': ['The DOM is an API for changing the content of a page, allowing content changes without reloading the page.', 'Accessing the DOM allows for changing the background color of the body and specific elements, demonstrated by using document.getElementById and document.getElementsByName.', 'Demonstration of using forEach to cycle through a node list of elements and display the checked element, showing practical usage of element selection methods.']}, {'end': 18221.911, 'start': 17922.669, 'title': 'Javascript dom element selection', 'summary': 'Explains the methods getelementsbytagname, getelementsbyclassname, and queryselector for selecting html elements by tag name, class name, and id, demonstrating how to access and modify elements using javascript.', 'duration': 299.242, 'highlights': ['The chapter explains the methods getElementsByTagName, getElementsByClassName, and querySelector for selecting HTML elements by tag name, class name, and ID. Demonstrates the three main methods for selecting HTML elements in JavaScript, providing a comprehensive overview.', 'Access and modify elements using JavaScript. Illustrates how to access and modify elements by changing their background color, showcasing practical implementation of the selection methods.']}, {'end': 18621.885, 'start': 18222.212, 'title': 'Dom traversal techniques', 'summary': 'Explains the family relationships between elements, including parent, child, and siblings, and demonstrates dom traversal techniques in javascript, such as selecting elements, changing backgrounds, accessing children, and iterating over elements.', 'duration': 399.673, 'highlights': ['The chapter explains the family relationships between elements, including parent, child, and siblings. It details the hierarchy of elements within an HTML document, explaining the parent-child relationship and the concept of siblings.', 'Demonstrates DOM traversal techniques in JavaScript, such as selecting elements, changing backgrounds, accessing children, and iterating over elements. It demonstrates selecting elements within the document, changing the background color of elements, accessing children using various methods, and iterating over elements to apply style changes.', 'Shows how to add and change HTML elements using createElement, textContent, and append methods. It showcases the creation of an h1 header tag using createElement, adding text using textContent to avoid cross-site scripting attacks, and appending the created tag to the body of the document.']}, {'end': 18810.793, 'start': 18622.125, 'title': 'Safe element manipulation in javascript', 'summary': 'Demonstrates the potential security risks of using inner html to manipulate elements, and highlights the safer approach of setting text content and appending elements to lists in javascript, providing examples of how to do so.', 'duration': 188.668, 'highlights': ['The preferred way of adding some text to an element is to set the text content. Setting text content is a much safer approach than using inner HTML.', 'Adding a mango to the list using append method. Demonstrates the process of adding an item to a list using the append method.', 'Using prepend to add a list item at the beginning of the list. Explains how to use the prepend method to add an item at the beginning of a list.', 'Inserting an item within the middle of the list using insertBefore method. Provides a method for inserting an item within the middle of a list using the insertBefore method.', 'Demonstrating the security risk of using inner HTML to manipulate elements. Illustrates the security risk of using inner HTML to manipulate elements and the potential for cross-site scripting attacks.']}], 'duration': 1366.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw17443859.jpg', 'highlights': ['Demonstrates accessing and displaying the properties of the DOM, such as document.titleproperty and document.url, and showcases the ability to change these properties.', 'Illustrates how to access and modify elements by changing their background color, showcasing practical implementation of the selection methods.', 'Demonstrates DOM traversal techniques in JavaScript, such as selecting elements, changing backgrounds, accessing children, and iterating over elements. It demonstrates selecting elements within the document, changing the background color of elements, accessing children using various methods, and iterating over elements to apply style changes.', 'It showcases the creation of an h1 header tag using createElement, adding text using textContent to avoid cross-site scripting attacks, and appending the created tag to the body of the document.', 'The preferred way of adding some text to an element is to set the text content. Setting text content is a much safer approach than using inner HTML.']}, {'end': 20420.554, 'segs': [{'end': 19584.172, 'src': 'heatmap', 'start': 19005.5, 'weight': 0.881, 'content': [{'end': 19010.804, 'text': "And if you don't know any, you can always Google hex color picker, and pick a color that you like.", 'start': 19005.5, 'duration': 5.304}, {'end': 19014.448, 'text': 'Here are the RGB values or the hexadecimal values.', 'start': 19011.565, 'duration': 2.883}, {'end': 19016.389, 'text': "Okay, let's change a few other properties.", 'start': 19014.868, 'duration': 1.521}, {'end': 19020.512, 'text': "We're selecting our title, accessing the style attribute.", 'start': 19017.23, 'duration': 3.282}, {'end': 19024.014, 'text': "Then let's change the font family property.", 'start': 19021.132, 'duration': 2.882}, {'end': 19027.196, 'text': 'I will set this equal to pick a font.', 'start': 19024.735, 'duration': 2.461}, {'end': 19028.417, 'text': 'I like this font.', 'start': 19027.696, 'duration': 0.721}, {'end': 19031.979, 'text': 'And there we go, we have a new font.', 'start': 19030.798, 'duration': 1.181}, {'end': 19035.281, 'text': 'I would like to text align center this element.', 'start': 19032.659, 'duration': 2.622}, {'end': 19043.346, 'text': 'Title.style.text align equals center.', 'start': 19036.201, 'duration': 7.145}, {'end': 19045.835, 'text': 'Then add a border.', 'start': 19045.114, 'duration': 0.721}, {'end': 19054.022, 'text': 'Title.Style.Border equals two pixels solid is good.', 'start': 19046.876, 'duration': 7.146}, {'end': 19057.385, 'text': 'Yeah, and we have a border.', 'start': 19056.505, 'duration': 0.88}, {'end': 19061.329, 'text': 'To hide an element, we can access the display property.', 'start': 19058.286, 'duration': 3.043}, {'end': 19068.255, 'text': 'Title.Style.Display equals none.', 'start': 19062.31, 'duration': 5.945}, {'end': 19073.311, 'text': 'This will hide this element, or we could set this to block to display it.', 'start': 19069.349, 'duration': 3.962}, {'end': 19078.093, 'text': 'So yeah everybody, that is a very basic way to change CSS properties.', 'start': 19074.031, 'duration': 4.062}, {'end': 19089.219, 'text': 'You would first need to select an element, or elements, follow that element with the CSS property, and you can set it equal to a new value.', 'start': 19078.533, 'duration': 10.686}, {'end': 19093.063, 'text': 'That is how to add and change CSS properties using JavaScript.', 'start': 19089.9, 'duration': 3.163}, {'end': 19097.066, 'text': "If you would like a copy of all this code, I'll post this in the comment section down below.", 'start': 19093.463, 'duration': 3.603}, {'end': 19101.23, 'text': 'Be sure to look underneath the original video in the 100 video playlist.', 'start': 19097.467, 'duration': 3.763}, {'end': 19105.454, 'text': "And well, yeah, that's how to change some CSS properties using JavaScript.", 'start': 19101.53, 'duration': 3.924}, {'end': 19110.534, 'text': "Hey guys, in this video I'm gonna explain events.", 'start': 19108.154, 'duration': 2.38}, {'end': 19114.215, 'text': 'An event is some action that the user or the browser does.', 'start': 19110.855, 'duration': 3.36}, {'end': 19117.236, 'text': 'Many HTML elements contain event attributes.', 'start': 19114.575, 'duration': 2.661}, {'end': 19118.936, 'text': "For example, let's create a button.", 'start': 19117.596, 'duration': 1.34}, {'end': 19123.457, 'text': "I'll give this button an ID of myButton.", 'start': 19121.057, 'duration': 2.4}, {'end': 19127.398, 'text': "For the text, let's just say button.", 'start': 19125.718, 'duration': 1.68}, {'end': 19130.479, 'text': 'Buttons have an onClick event attribute.', 'start': 19128.518, 'duration': 1.961}, {'end': 19135.757, 'text': 'OnClick I can set this equal to the name of a function and invoke it.', 'start': 19131.399, 'duration': 4.358}, {'end': 19138.018, 'text': "Let's create a function that will do something.", 'start': 19136.457, 'duration': 1.561}, {'end': 19142.36, 'text': "I'll cleverly name this function do something.", 'start': 19138.498, 'duration': 3.862}, {'end': 19146.342, 'text': "All we'll do is create an alert.", 'start': 19144.801, 'duration': 1.541}, {'end': 19150.505, 'text': 'Alert, you did something.', 'start': 19146.863, 'duration': 3.642}, {'end': 19155.427, 'text': 'I will set the onClick attribute equal to the name of my function.', 'start': 19151.885, 'duration': 3.542}, {'end': 19158.369, 'text': 'Do something, then invoke it.', 'start': 19155.747, 'duration': 2.622}, {'end': 19163.928, 'text': 'When I click on this button, my onClick event attribute will invoke this function.', 'start': 19159.585, 'duration': 4.343}, {'end': 19164.689, 'text': 'Do something.', 'start': 19164.128, 'duration': 0.561}, {'end': 19166.25, 'text': 'You did something.', 'start': 19165.389, 'duration': 0.861}, {'end': 19172.454, 'text': 'In place of setting event attributes directly within your HTML elements, you could do so within your JavaScript file.', 'start': 19166.63, 'duration': 5.824}, {'end': 19175.176, 'text': 'I would first need to select my element.', 'start': 19173.595, 'duration': 1.581}, {'end': 19184.003, 'text': 'Constant element equals document.getElementById.', 'start': 19176.597, 'duration': 7.406}, {'end': 19186.404, 'text': 'The ID was my button.', 'start': 19184.763, 'duration': 1.641}, {'end': 19193.124, 'text': 'I will take this element and set the onClick event attribute equal to some function.', 'start': 19187.375, 'duration': 5.749}, {'end': 19195.228, 'text': 'Do something.', 'start': 19193.886, 'duration': 1.342}, {'end': 19196.831, 'text': 'Be sure not to invoke it.', 'start': 19195.709, 'duration': 1.122}, {'end': 19197.832, 'text': 'This is a callback.', 'start': 19197.051, 'duration': 0.781}, {'end': 19199.611, 'text': 'Save everything.', 'start': 19198.911, 'duration': 0.7}, {'end': 19203.333, 'text': 'Then when I click this button, we activate the onClick event attribute.', 'start': 19200.152, 'duration': 3.181}, {'end': 19205.834, 'text': "So that's one event attribute, onClick.", 'start': 19203.713, 'duration': 2.121}, {'end': 19208.535, 'text': 'Another event attribute is onLoad.', 'start': 19206.374, 'duration': 2.161}, {'end': 19211.137, 'text': 'When the web browser loads, it does something.', 'start': 19208.815, 'duration': 2.322}, {'end': 19214.238, 'text': "This time I'm going to select the body of my document.", 'start': 19211.437, 'duration': 2.801}, {'end': 19219.08, 'text': 'Constant element equals document.body.', 'start': 19214.838, 'duration': 4.242}, {'end': 19225.263, 'text': 'I will take this element and set the onLoad attribute equal to some function.', 'start': 19219.78, 'duration': 5.483}, {'end': 19227.424, 'text': 'Do something.', 'start': 19226.023, 'duration': 1.401}, {'end': 19232.833, 'text': 'When the body of my document loads, it activates the onLoadEvent attribute.', 'start': 19228.612, 'duration': 4.221}, {'end': 19239.896, 'text': 'Another option is that within the opening body tag of your HTML file, you can directly set that attribute.', 'start': 19233.874, 'duration': 6.022}, {'end': 19242.397, 'text': 'Do something.', 'start': 19241.576, 'duration': 0.821}, {'end': 19243.637, 'text': 'And this would work too.', 'start': 19242.837, 'duration': 0.8}, {'end': 19246.518, 'text': 'That is the onLoadEvent attribute.', 'start': 19244.477, 'duration': 2.041}, {'end': 19248.859, 'text': 'When an element loads, it does something.', 'start': 19246.978, 'duration': 1.881}, {'end': 19252.04, 'text': 'Next we have the onChangeEvent attribute.', 'start': 19249.599, 'duration': 2.441}, {'end': 19258.612, 'text': 'element dot on change equals do something.', 'start': 19253.231, 'duration': 5.381}, {'end': 19264.534, 'text': 'When an element has been changed, it activates the on change event attribute.', 'start': 19260.093, 'duration': 4.441}, {'end': 19267.714, 'text': "Heading to our HTML document, let's create a text box.", 'start': 19264.934, 'duration': 2.78}, {'end': 19272.955, 'text': 'Input ID equals my text.', 'start': 19269.395, 'duration': 3.56}, {'end': 19274.876, 'text': 'Get rid of this.', 'start': 19274.296, 'duration': 0.58}, {'end': 19277.666, 'text': 'we will select our text box.', 'start': 19276.345, 'duration': 1.321}, {'end': 19288.574, 'text': 'constant element equals document.getElementById We are selecting my text.', 'start': 19278.126, 'duration': 10.448}, {'end': 19296.739, 'text': 'Now, when we make changes to this text box, and then leave, it activates my onChangeEvent attribute.', 'start': 19289.514, 'duration': 7.225}, {'end': 19301.362, 'text': 'If used with a text box, you could format some text once you leave.', 'start': 19297.36, 'duration': 4.002}, {'end': 19303.524, 'text': 'Okay, this next one is going to be fun.', 'start': 19301.382, 'duration': 2.142}, {'end': 19304.825, 'text': "Let's create a div tag.", 'start': 19303.844, 'duration': 0.981}, {'end': 19308.882, 'text': 'div id equals my div.', 'start': 19306.121, 'duration': 2.761}, {'end': 19310.483, 'text': 'Close it.', 'start': 19310.022, 'duration': 0.461}, {'end': 19315.084, 'text': "Then heading to our CSS style sheet, let's select my div.", 'start': 19311.103, 'duration': 3.981}, {'end': 19321.147, 'text': "We'll change the background color to light green.", 'start': 19316.205, 'duration': 4.942}, {'end': 19324.428, 'text': 'And the width to 100.', 'start': 19323.448, 'duration': 0.98}, {'end': 19326.509, 'text': '100 pixels.', 'start': 19324.428, 'duration': 2.081}, {'end': 19329.19, 'text': 'And the height to be 100 as well.', 'start': 19327.649, 'duration': 1.541}, {'end': 19332.471, 'text': "Let's save.", 'start': 19331.871, 'duration': 0.6}, {'end': 19335.072, 'text': "We'll select this id, my div.", 'start': 19333.071, 'duration': 2.001}, {'end': 19342.3, 'text': 'constant element equals document dot get element by id.', 'start': 19336.414, 'duration': 5.886}, {'end': 19345.342, 'text': 'The id was my div.', 'start': 19343.761, 'duration': 1.581}, {'end': 19350.507, 'text': "When we move our cursor over this div tag, we'll change the background color.", 'start': 19346.243, 'duration': 4.264}, {'end': 19356.513, 'text': 'We will take our element and use the on mouse over event attribute.', 'start': 19350.788, 'duration': 5.725}, {'end': 19358.475, 'text': 'Set this equal to a function.', 'start': 19357.234, 'duration': 1.241}, {'end': 19360.357, 'text': 'Do something.', 'start': 19359.256, 'duration': 1.101}, {'end': 19365.252, 'text': "Let's change the background color.", 'start': 19363.971, 'duration': 1.281}, {'end': 19377.482, 'text': "Element.style.backgroundColor equals, how about red? When I hover my cursor over this div tag, it's gonna change the color.", 'start': 19365.812, 'duration': 11.67}, {'end': 19382.906, 'text': 'When you leave an element, you can set the onMouseOut event attribute.', 'start': 19378.362, 'duration': 4.544}, {'end': 19391.233, 'text': 'Element.onMouseOut will create a function to do something else.', 'start': 19385.989, 'duration': 5.244}, {'end': 19393.864, 'text': "Let's copy this, paste it.", 'start': 19392.443, 'duration': 1.421}, {'end': 19395.765, 'text': 'Do something else.', 'start': 19394.585, 'duration': 1.18}, {'end': 19399.768, 'text': "We'll change the background color to light green again.", 'start': 19397.046, 'duration': 2.722}, {'end': 19403.351, 'text': 'So when I enter, the color is red.', 'start': 19401.169, 'duration': 2.182}, {'end': 19404.611, 'text': "When I leave, it's green.", 'start': 19403.571, 'duration': 1.04}, {'end': 19406.893, 'text': 'Red, green, red, green, red, green.', 'start': 19404.952, 'duration': 1.941}, {'end': 19409.955, 'text': 'So that is on mouse over and on mouse out.', 'start': 19407.353, 'duration': 2.602}, {'end': 19411.836, 'text': "Okay, we're on the last two.", 'start': 19409.975, 'duration': 1.861}, {'end': 19413.237, 'text': 'On mouse down.', 'start': 19412.437, 'duration': 0.8}, {'end': 19421.063, 'text': 'Element dot on mouse down equals do something.', 'start': 19415.219, 'duration': 5.844}, {'end': 19428.334, 'text': 'So when I click down, when I click on this element, it activates the onMouseEvent attribute.', 'start': 19423.069, 'duration': 5.265}, {'end': 19436.521, 'text': "By itself, it's basically no different from the onClickEvent attribute, but it pairs very well with the onMouseUp event attribute.", 'start': 19428.994, 'duration': 7.527}, {'end': 19444.497, 'text': 'onMouseUp When we let go of our mouse, we can perform another function.', 'start': 19439.143, 'duration': 5.354}, {'end': 19445.858, 'text': 'Do something else.', 'start': 19445.038, 'duration': 0.82}, {'end': 19447.879, 'text': "When I click and hold down, it's red.", 'start': 19446.499, 'duration': 1.38}, {'end': 19449.681, 'text': "When I let go, it's green.", 'start': 19448.46, 'duration': 1.221}, {'end': 19452.382, 'text': 'Red, green, red, green, red, green.', 'start': 19450.121, 'duration': 2.261}, {'end': 19453.283, 'text': 'All right, everybody.', 'start': 19452.603, 'duration': 0.68}, {'end': 19454.544, 'text': 'So those are a few events.', 'start': 19453.343, 'duration': 1.201}, {'end': 19460.988, 'text': 'On click, on load, on change, on mouse over, on mouse out, on mouse down, on mouse up.', 'start': 19455.124, 'duration': 5.864}, {'end': 19463.71, 'text': "And in the next topic, we'll look at event handlers.", 'start': 19461.348, 'duration': 2.362}, {'end': 19468.333, 'text': "If you would like a copy of all this code, I'll post all of this in the comment section down below.", 'start': 19464.27, 'duration': 4.063}, {'end': 19471.035, 'text': 'And well, yeah, those are a few JavaScript events.', 'start': 19468.573, 'duration': 2.462}, {'end': 19477.34, 'text': "Hey guys, in this video I'm going to explain the addEventListener method.", 'start': 19473.477, 'duration': 3.863}, {'end': 19480.862, 'text': 'We can link an event and a function to an HTML element.', 'start': 19477.68, 'duration': 3.182}, {'end': 19485.266, 'text': 'Using the addEventListener method is the preferred way of handling events.', 'start': 19481.243, 'duration': 4.023}, {'end': 19489.309, 'text': 'A benefit is that one element can have several event listeners.', 'start': 19485.626, 'duration': 3.683}, {'end': 19492.091, 'text': 'Even the same event can invoke different functions.', 'start': 19489.689, 'duration': 2.402}, {'end': 19495.193, 'text': "Within my HTML document, I'm going to create a div.", 'start': 19492.491, 'duration': 2.702}, {'end': 19498.796, 'text': 'Div Close it.', 'start': 19497.014, 'duration': 1.782}, {'end': 19502.574, 'text': "I'll give this a unique ID of inner div.", 'start': 19500.134, 'duration': 2.44}, {'end': 19505.135, 'text': "Eventually we'll create an outer div.", 'start': 19503.275, 'duration': 1.86}, {'end': 19511.256, 'text': "Then within my CSS style sheet, I'll select inner div.", 'start': 19506.975, 'duration': 4.281}, {'end': 19515.717, 'text': "I'll give this a background color of light green.", 'start': 19512.857, 'duration': 2.86}, {'end': 19519.198, 'text': 'Light green.', 'start': 19518.078, 'duration': 1.12}, {'end': 19521.118, 'text': 'A width of 100.', 'start': 19519.218, 'duration': 1.9}, {'end': 19522.919, 'text': 'A height of 100.', 'start': 19521.118, 'duration': 1.801}, {'end': 19532.114, 'text': 'And a border One pixel solid is good.', 'start': 19522.919, 'duration': 9.195}, {'end': 19534.796, 'text': 'Save everything.', 'start': 19534.076, 'duration': 0.72}, {'end': 19536.457, 'text': "And here's our div element.", 'start': 19535.216, 'duration': 1.241}, {'end': 19541.861, 'text': 'Using the addEventListener method, this div element can listen for multiple events.', 'start': 19536.898, 'duration': 4.963}, {'end': 19543.682, 'text': "We'll need to select an element.", 'start': 19542.501, 'duration': 1.181}, {'end': 19548.546, 'text': "I'll name this const innerDiv.", 'start': 19544.683, 'duration': 3.863}, {'end': 19555.01, 'text': 'Equals document.getElementById.', 'start': 19549.606, 'duration': 5.404}, {'end': 19557.712, 'text': "We're selecting innerDiv.", 'start': 19556.131, 'duration': 1.581}, {'end': 19566.322, 'text': 'To add an event listener, you take your element, innerDiv in this case, then invoke the addEventListener method.', 'start': 19560.199, 'duration': 6.123}, {'end': 19569.144, 'text': 'The first argument is an event.', 'start': 19567.723, 'duration': 1.421}, {'end': 19571.105, 'text': "Let's add mouseOver.", 'start': 19569.884, 'duration': 1.221}, {'end': 19573.547, 'text': 'Mouse Over.', 'start': 19571.926, 'duration': 1.621}, {'end': 19575.348, 'text': 'Then a function.', 'start': 19574.687, 'duration': 0.661}, {'end': 19578.829, 'text': "Let's create a function to change the color red.", 'start': 19576.048, 'duration': 2.781}, {'end': 19580.731, 'text': 'This will be a callback.', 'start': 19579.83, 'duration': 0.901}, {'end': 19584.172, 'text': "ChangeRed Let's define this function.", 'start': 19581.251, 'duration': 2.921}], 'summary': 'The transcript explains how to change css properties using javascript and covers various event attributes and the addeventlistener method.', 'duration': 578.672, 'max_score': 19005.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw19005500.jpg'}, {'end': 19043.346, 'src': 'embed', 'start': 19011.565, 'weight': 0, 'content': [{'end': 19014.448, 'text': 'Here are the RGB values or the hexadecimal values.', 'start': 19011.565, 'duration': 2.883}, {'end': 19016.389, 'text': "Okay, let's change a few other properties.", 'start': 19014.868, 'duration': 1.521}, {'end': 19020.512, 'text': "We're selecting our title, accessing the style attribute.", 'start': 19017.23, 'duration': 3.282}, {'end': 19024.014, 'text': "Then let's change the font family property.", 'start': 19021.132, 'duration': 2.882}, {'end': 19027.196, 'text': 'I will set this equal to pick a font.', 'start': 19024.735, 'duration': 2.461}, {'end': 19028.417, 'text': 'I like this font.', 'start': 19027.696, 'duration': 0.721}, {'end': 19031.979, 'text': 'And there we go, we have a new font.', 'start': 19030.798, 'duration': 1.181}, {'end': 19035.281, 'text': 'I would like to text align center this element.', 'start': 19032.659, 'duration': 2.622}, {'end': 19043.346, 'text': 'Title.style.text align equals center.', 'start': 19036.201, 'duration': 7.145}], 'summary': 'Changing font family property to pick a new font and aligning text center.', 'duration': 31.781, 'max_score': 19011.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw19011565.jpg'}, {'end': 19158.369, 'src': 'embed', 'start': 19131.399, 'weight': 3, 'content': [{'end': 19135.757, 'text': 'OnClick I can set this equal to the name of a function and invoke it.', 'start': 19131.399, 'duration': 4.358}, {'end': 19138.018, 'text': "Let's create a function that will do something.", 'start': 19136.457, 'duration': 1.561}, {'end': 19142.36, 'text': "I'll cleverly name this function do something.", 'start': 19138.498, 'duration': 3.862}, {'end': 19146.342, 'text': "All we'll do is create an alert.", 'start': 19144.801, 'duration': 1.541}, {'end': 19150.505, 'text': 'Alert, you did something.', 'start': 19146.863, 'duration': 3.642}, {'end': 19155.427, 'text': 'I will set the onClick attribute equal to the name of my function.', 'start': 19151.885, 'duration': 3.542}, {'end': 19158.369, 'text': 'Do something, then invoke it.', 'start': 19155.747, 'duration': 2.622}], 'summary': 'Creating a function to trigger an alert on click.', 'duration': 26.97, 'max_score': 19131.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw19131399.jpg'}, {'end': 20188.089, 'src': 'heatmap', 'start': 19870.764, 'weight': 1, 'content': [{'end': 19872.225, 'text': 'i just need the file name.', 'start': 19870.764, 'duration': 1.461}, {'end': 19878.829, 'text': "my file name is car.jpg, but it's probably going to be something different for you, car.jpg.", 'start': 19872.225, 'duration': 6.604}, {'end': 19879.789, 'text': "let's change the size.", 'start': 19878.829, 'duration': 0.96}, {'end': 19883.469, 'text': "it's a little massive Heading to my style sheet.", 'start': 19879.789, 'duration': 3.68}, {'end': 19886.332, 'text': 'I will select my image.', 'start': 19883.469, 'duration': 2.863}, {'end': 19889.795, 'text': 'set the width to something reasonable, like 300 pixels.', 'start': 19886.332, 'duration': 3.463}, {'end': 19891.316, 'text': "That's a lot better.", 'start': 19890.636, 'duration': 0.68}, {'end': 19893.238, 'text': "At the bottom, I'll add some text.", 'start': 19891.897, 'duration': 1.341}, {'end': 19894.919, 'text': 'A paragraph element is fine.', 'start': 19893.658, 'duration': 1.261}, {'end': 19897.622, 'text': 'Press the button.', 'start': 19896.14, 'duration': 1.482}, {'end': 19902.906, 'text': "Heading to my javascript file, I'll select my button and my image.", 'start': 19898.983, 'duration': 3.923}, {'end': 19909.092, 'text': 'const my button equals document dot image.', 'start': 19903.687, 'duration': 5.405}, {'end': 19915.116, 'text': "QuerySelector I'm selecting myButton.", 'start': 19909.633, 'duration': 5.483}, {'end': 19917.557, 'text': 'Do the same thing with image.', 'start': 19916.397, 'duration': 1.16}, {'end': 19927.603, 'text': "MyImage Next, I'll add an EventListener to this button.", 'start': 19922.04, 'duration': 5.563}, {'end': 19936.828, 'text': "MyButton.AddEventListener When we click on this button, we're going to perform a function.", 'start': 19928.243, 'duration': 8.585}, {'end': 19938.889, 'text': "I'll use an arrow function expression.", 'start': 19937.368, 'duration': 1.521}, {'end': 19943.007, 'text': "What we'll do is check the display property of this image.", 'start': 19940.185, 'duration': 2.822}, {'end': 19944.728, 'text': "I'll use an if statement.", 'start': 19943.807, 'duration': 0.921}, {'end': 19953.452, 'text': 'If myImage.style.display is equal to none.', 'start': 19946.308, 'duration': 7.144}, {'end': 19956.834, 'text': 'None means that this image is hidden.', 'start': 19955.173, 'duration': 1.661}, {'end': 19959.876, 'text': "If it's block, that means it's being displayed.", 'start': 19957.895, 'duration': 1.981}, {'end': 19966.58, 'text': 'If this image is hidden, myImage.style.display equals block.', 'start': 19960.396, 'duration': 6.184}, {'end': 19969.163, 'text': 'This will display my image.', 'start': 19967.901, 'duration': 1.262}, {'end': 19971.526, 'text': "Else, let's hide our image.", 'start': 19970.084, 'duration': 1.442}, {'end': 19976.853, 'text': 'My image.style.display equals none.', 'start': 19972.387, 'duration': 4.466}, {'end': 19980.839, 'text': 'When I click on this button, it hides my image.', 'start': 19978.578, 'duration': 2.261}, {'end': 19983.359, 'text': 'When I click on it again, it displays my image.', 'start': 19981.179, 'duration': 2.18}, {'end': 19985.58, 'text': "Now it's hidden, now it's showing.", 'start': 19983.9, 'duration': 1.68}, {'end': 19987.32, 'text': 'Hidden, showing, hidden, showing.', 'start': 19985.84, 'duration': 1.48}, {'end': 19988.781, 'text': "There's one issue with this though.", 'start': 19987.521, 'duration': 1.26}, {'end': 19993.302, 'text': 'Perhaps I would like this image to be hidden from the beginning, then we display it.', 'start': 19989.121, 'duration': 4.181}, {'end': 19998.824, 'text': 'To do that, we can go to our style sheet, then set the display property to none.', 'start': 19994.062, 'duration': 4.762}, {'end': 20001.636, 'text': 'Now check this out.', 'start': 20000.916, 'duration': 0.72}, {'end': 20005.599, 'text': "When I click on this button the first time, it doesn't do anything.", 'start': 20002.197, 'duration': 3.402}, {'end': 20009.181, 'text': 'Until I click on it a second time, then it performs normally.', 'start': 20006.059, 'duration': 3.122}, {'end': 20013.724, 'text': 'The reason that this is happening is that the style from our style sheet is not ready yet.', 'start': 20009.601, 'duration': 4.123}, {'end': 20018.267, 'text': "To demonstrate that, I'm going to console.log the display of my image.", 'start': 20014.004, 'duration': 4.263}, {'end': 20024.431, 'text': "When I click on this button, well there's no value within my display.", 'start': 20021.129, 'duration': 3.302}, {'end': 20030.804, 'text': 'If the display of my image is equal to the property none, then we show the image.', 'start': 20025.402, 'duration': 5.402}, {'end': 20034.366, 'text': 'But this is technically null, and not the property none.', 'start': 20031.284, 'duration': 3.082}, {'end': 20037.527, 'text': 'Therefore we will hide this image, which it already is.', 'start': 20034.846, 'duration': 2.681}, {'end': 20041.848, 'text': 'A quick fix for that is that we can add some inline styling to this element.', 'start': 20037.987, 'duration': 3.861}, {'end': 20045.39, 'text': "I'll add this display property inline instead of externally.", 'start': 20042.209, 'duration': 3.181}, {'end': 20046.67, 'text': 'Find your image tag.', 'start': 20045.69, 'duration': 0.98}, {'end': 20050.892, 'text': 'Set the style attribute equal to that CSS property.', 'start': 20047.13, 'duration': 3.762}, {'end': 20053.189, 'text': 'This should work now.', 'start': 20052.489, 'duration': 0.7}, {'end': 20056.71, 'text': 'I will click once to display my image, then hide it.', 'start': 20053.809, 'duration': 2.901}, {'end': 20058.491, 'text': 'Display, hide it.', 'start': 20057.111, 'duration': 1.38}, {'end': 20061.592, 'text': 'Another option is that we can set the visibility of this image.', 'start': 20058.911, 'duration': 2.681}, {'end': 20066.734, 'text': 'When we toggle the display property, all the elements that are underneath are going to shift downwards.', 'start': 20061.952, 'duration': 4.782}, {'end': 20070.175, 'text': 'But if we were to use visibility, this space will be reserved.', 'start': 20067.054, 'duration': 3.121}, {'end': 20073.076, 'text': "Let's replace display with visibility.", 'start': 20070.555, 'duration': 2.521}, {'end': 20078.958, 'text': 'In place of none, we will check hidden.', 'start': 20076.597, 'duration': 2.361}, {'end': 20085.231, 'text': 'In place of block, this will be visible.', 'start': 20082.768, 'duration': 2.463}, {'end': 20092.02, 'text': "Within the inline styling, let's set display to visibility.", 'start': 20087.053, 'duration': 4.967}, {'end': 20095.844, 'text': 'Our visibility will be hidden.', 'start': 20093.682, 'duration': 2.162}, {'end': 20098.387, 'text': 'Make sure to save everything.', 'start': 20097.166, 'duration': 1.221}, {'end': 20101.683, 'text': 'All of this space is reserved for that image.', 'start': 20099.542, 'duration': 2.141}, {'end': 20105.144, 'text': 'You can see that my text down at the bottom is way down here.', 'start': 20102.243, 'duration': 2.901}, {'end': 20108.905, 'text': "When I show and hide this image, there's no shifting of elements.", 'start': 20105.604, 'duration': 3.301}, {'end': 20110.705, 'text': 'This space is reserved.', 'start': 20109.425, 'duration': 1.28}, {'end': 20112.326, 'text': "So that's another option too.", 'start': 20111.165, 'duration': 1.161}, {'end': 20115.106, 'text': 'You can always toggle the visibility of an element.', 'start': 20112.826, 'duration': 2.28}, {'end': 20119.228, 'text': 'So yeah everybody, that is how to show and hide HTML elements.', 'start': 20115.727, 'duration': 3.501}, {'end': 20123.409, 'text': "If you would like a copy of this code, I'll post all of this in the comment section down below.", 'start': 20119.828, 'duration': 3.581}, {'end': 20127.55, 'text': "And well, yeah, that's how to show and hide HTML elements using JavaScript.", 'start': 20123.769, 'duration': 3.781}, {'end': 20130.303, 'text': 'Hey, yeah, everybody.', 'start': 20129.482, 'duration': 0.821}, {'end': 20133.347, 'text': "In this video, I'm going to show you how we can detect key presses.", 'start': 20130.463, 'duration': 2.884}, {'end': 20136.031, 'text': 'To do that, we can add an event listener to our window.', 'start': 20133.588, 'duration': 2.443}, {'end': 20144.464, 'text': 'Window.AddEventListener The first argument is the attribute.', 'start': 20136.852, 'duration': 7.612}, {'end': 20147.084, 'text': "Let's detect any keyed down events.", 'start': 20144.944, 'duration': 2.14}, {'end': 20152.846, 'text': 'Second is a callback, a function expression, or an arrow function expression.', 'start': 20147.885, 'duration': 4.961}, {'end': 20154.987, 'text': "Let's use an arrow function expression.", 'start': 20153.266, 'duration': 1.721}, {'end': 20158.648, 'text': 'There is one argument, event, arrow.', 'start': 20155.467, 'duration': 3.181}, {'end': 20163.93, 'text': "Then what would we like to do when we press down on a key? Let's display what key was pressed.", 'start': 20159.168, 'duration': 4.762}, {'end': 20170.555, 'text': "console.log event.key And that's it.", 'start': 20164.75, 'duration': 5.805}, {'end': 20171.676, 'text': "Let's test it.", 'start': 20171.015, 'duration': 0.661}, {'end': 20173.397, 'text': 'Press some random keys.', 'start': 20172.336, 'duration': 1.061}, {'end': 20185.007, 'text': 'q w e r t y a s d Enter backspace 1 2 3 The arrow keys would be up, down, left, right.', 'start': 20174.038, 'duration': 10.969}, {'end': 20186.588, 'text': 'Okay, we know that that works.', 'start': 20185.367, 'duration': 1.221}, {'end': 20188.089, 'text': "Let's have some fun with this.", 'start': 20186.988, 'duration': 1.101}], 'summary': 'Tutorial on showing/hiding images and detecting key presses using javascript.', 'duration': 28.921, 'max_score': 19870.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw19870764.jpg'}], 'start': 18811.113, 'title': 'Javascript for html and css manipulation', 'summary': "Covers a beginner's guide to adding and changing html elements in javascript, including changing css properties of elements with examples and explanations, various javascript events such as onclick, onload, onchange, onmouseover, onmouseout, onmousedown, and onmouseup, the use of addeventlistener method in html and css, showing and hiding html elements, and detecting key presses in javascript.", 'chapters': [{'end': 19078.093, 'start': 18811.113, 'title': 'Changing css properties with javascript', 'summary': "Covers a beginner's guide to adding and changing html elements in javascript including inserting list items and changing css properties of elements, such as background color, font, text alignment, and more, with examples and explanations.", 'duration': 266.98, 'highlights': ["The chapter covers a beginner's guide to adding and changing HTML elements in JavaScript, including inserting list items with examples such as inserting apple, mango, orange, and banana at different indexes.", 'Explains changing CSS properties of elements using JavaScript, covering properties like background color, font, text alignment, and more, with examples and explanations.', 'Describes selecting elements using getElementById method and storing it in a variable for further manipulation.', 'Discusses changing the display property to hide or show an element in the HTML using JavaScript.', 'Provides examples of using RGB values, color names, and hexadecimal values to change colors of elements using JavaScript.']}, {'end': 19492.091, 'start': 19078.533, 'title': 'Javascript events', 'summary': 'Explains how to add and change css properties using javascript and covers various javascript events such as onclick, onload, onchange, onmouseover, onmouseout, onmousedown, and onmouseup. it also introduces the addeventlistener method as the preferred way of handling events.', 'duration': 413.558, 'highlights': ['The chapter explains how to add and change CSS properties using JavaScript The process of adding and changing CSS properties using JavaScript is explained, providing a practical guide for manipulating CSS through JavaScript.', 'Covers various JavaScript events such as onClick, onLoad, onChange, onMouseOver, onMouseOut, onMouseDown, and onMouseUp Various JavaScript events are detailed, including onClick, onLoad, onChange, onMouseOver, onMouseOut, onMouseDown, and onMouseUp, providing a comprehensive overview of event attributes and their functions.', 'Introduces the addEventListener method as the preferred way of handling events The addEventListener method is introduced as the preferred approach for handling events, highlighting its benefits such as allowing one element to have several event listeners and the ability for the same event to invoke different functions.']}, {'end': 19824.536, 'start': 19492.491, 'title': 'Using addeventlistener method in html and css', 'summary': 'Covers the use of addeventlistener method in html and css to listen for multiple events, such as mouseover, mouseout, and click, and how to specify the preference for handling events when multiple elements are listening for the same event.', 'duration': 332.045, 'highlights': ['The addEventListener method allows a div element to listen for multiple events such as mouseOver and mouseOut. The addEventListener method enables a div element to listen for multiple events, such as mouseOver and mouseOut, providing flexibility in event handling.', 'Demonstrates how to specify the preference for handling events when multiple elements are listening for the same event using the useCapture argument. The useCapture argument in the addEventListener method allows the specification of the preference for handling events when multiple elements are listening for the same event, providing control over event execution.', 'Illustrates the use of addEventListener method for handling the click event and specifying the order of event handling for elements within the same space. The demonstration showcases the use of addEventListener method for handling the click event and specifying the order of event handling for elements within the same space, offering insight into event prioritization.']}, {'end': 20112.326, 'start': 19825.096, 'title': 'Showing and hiding html elements', 'summary': 'Demonstrates how to use javascript to toggle the visibility of an html image, including using if statements and inline styling, and compares the use of display and visibility properties for element manipulation.', 'duration': 287.23, 'highlights': ['The chapter demonstrates how to use JavaScript to toggle the visibility of an HTML image. The tutorial shows how to use JavaScript to toggle the visibility of an HTML image using if statements and event listeners.', 'The tutorial compares the use of display and visibility properties for element manipulation. It showcases the difference between using display and visibility properties to manipulate the visibility of HTML elements, highlighting that using visibility property reserves space for the element while using display property causes shifts in the layout.', 'The tutorial emphasizes using if statements and inline styling for element manipulation. It emphasizes the use of if statements for conditional visibility manipulation and the use of inline styling to ensure immediate application of CSS properties, addressing issues with external style sheets not being ready.']}, {'end': 20420.554, 'start': 20112.826, 'title': 'Detecting key presses in javascript', 'summary': 'Explains how to detect key presses in javascript, using an event listener and a switch statement to move an html element based on arrow key inputs, demonstrating the functionality and providing a basic implementation.', 'duration': 307.728, 'highlights': ['The chapter explains how to detect key presses in JavaScript, using an event listener and a switch statement to move an HTML element based on arrow key inputs, demonstrating the functionality and providing a basic implementation.', 'You can add an event listener to your window. The event attribute is keyDown. You could also switch this to keyUp.', 'The first argument is the attribute, and the second argument is a callback, a function expression, or an arrow function expression.', 'The chapter includes a practical demonstration of using arrow key inputs to move an HTML element within a window, providing a tangible example of detecting and responding to key presses.']}], 'duration': 1609.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw18811113.jpg', 'highlights': ["Covers a beginner's guide to adding and changing HTML elements in JavaScript, including inserting list items with examples such as inserting apple, mango, orange, and banana at different indexes.", 'Explains changing CSS properties of elements using JavaScript, covering properties like background color, font, text alignment, and more, with examples and explanations.', 'Covers various JavaScript events such as onClick, onLoad, onChange, onMouseOver, onMouseOut, onMouseDown, and onMouseUp Various JavaScript events are detailed, including onClick, onLoad, onChange, onMouseOver, onMouseOut, onMouseDown, and onMouseUp, providing a comprehensive overview of event attributes and their functions.', 'Introduces the addEventListener method as the preferred way of handling events The addEventListener method is introduced as the preferred approach for handling events, highlighting its benefits such as allowing one element to have several event listeners and the ability for the same event to invoke different functions.', 'The addEventListener method allows a div element to listen for multiple events such as mouseOver and mouseOut. The addEventListener method enables a div element to listen for multiple events, such as mouseOver and mouseOut, providing flexibility in event handling.', 'The chapter demonstrates how to use JavaScript to toggle the visibility of an HTML image. The tutorial shows how to use JavaScript to toggle the visibility of an HTML image using if statements and event listeners.', 'The chapter explains how to detect key presses in JavaScript, using an event listener and a switch statement to move an HTML element based on arrow key inputs, demonstrating the functionality and providing a basic implementation.']}, {'end': 21702.836, 'segs': [{'end': 20582.52, 'src': 'embed', 'start': 20554.581, 'weight': 3, 'content': [{'end': 20561.769, 'text': "After how many milliseconds would we like to invoke this function? What about every five milliseconds? That's a good speed.", 'start': 20554.581, 'duration': 7.188}, {'end': 20568.133, 'text': "SetInterval returns an ID of the timer that we're using, so let's assign this to timerId.", 'start': 20562.45, 'duration': 5.683}, {'end': 20572.074, 'text': "We will use this timerId to stop the animation when it's completed.", 'start': 20569.033, 'duration': 3.041}, {'end': 20574.015, 'text': "We're going to create an inner function.", 'start': 20572.595, 'duration': 1.42}, {'end': 20582.52, 'text': 'function.frame This inner frame function will be in charge of updating our div element every 5 milliseconds.', 'start': 20574.796, 'duration': 7.724}], 'summary': 'Creating a function to update div element every 5 milliseconds', 'duration': 27.939, 'max_score': 20554.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw20554581.jpg'}, {'end': 21010.643, 'src': 'embed', 'start': 20982.025, 'weight': 2, 'content': [{'end': 20986.748, 'text': "Hey guys, in this video we're gonna draw some simple shapes using the Canvas API.", 'start': 20982.025, 'duration': 4.723}, {'end': 20988.97, 'text': "It's a means for drawing graphics.", 'start': 20987.149, 'duration': 1.821}, {'end': 20992.812, 'text': "It's useful for animations, games, and data visualization.", 'start': 20989.37, 'duration': 3.442}, {'end': 20996.095, 'text': "Heading to our HTML document, we'll need to create a canvas element.", 'start': 20993.093, 'duration': 3.002}, {'end': 20998.897, 'text': 'Canvas Close it.', 'start': 20997.235, 'duration': 1.662}, {'end': 21000.898, 'text': "I'll give this an ID.", 'start': 20999.897, 'duration': 1.001}, {'end': 21006.081, 'text': 'MyCanvas And we should probably set a width and a height.', 'start': 21002.179, 'duration': 3.902}, {'end': 21010.643, 'text': 'Width equals maybe 500.', 'start': 21007.202, 'duration': 3.441}], 'summary': 'Video tutorial on drawing simple shapes using canvas api for animations, games, and data visualization.', 'duration': 28.618, 'max_score': 20982.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw20982025.jpg'}, {'end': 21204.126, 'src': 'embed', 'start': 21177.971, 'weight': 0, 'content': [{'end': 21184.575, 'text': "If I need to connect the line down here, I'll follow line 2 with 250, 500.", 'start': 21177.971, 'duration': 6.604}, {'end': 21186.197, 'text': 'There, so we have drawn two lines.', 'start': 21184.576, 'duration': 1.621}, {'end': 21189.699, 'text': 'I would like to draw a line from the top right corner to the middle.', 'start': 21186.797, 'duration': 2.902}, {'end': 21193.942, 'text': 'My brush is currently down here, I need to move this brush to the top right corner.', 'start': 21190.259, 'duration': 3.683}, {'end': 21196.845, 'text': 'I will invoke the moveTo method.', 'start': 21194.784, 'duration': 2.061}, {'end': 21204.126, 'text': 'And the top right corner of my canvas would have coordinates of 500, 0.', 'start': 21197.665, 'duration': 6.461}], 'summary': 'Drawing lines with specific coordinates on canvas.', 'duration': 26.155, 'max_score': 21177.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw21177971.jpg'}], 'start': 20422.711, 'title': 'Javascript and canvas animations', 'summary': 'Covers creating simple animations in javascript, including sliding, rotating, moving diagonally, scaling images, and stopping conditions, such as setting intervals, stopping animation, and increasing/decreasing degrees and scale values. additionally, it explores drawing simple shapes using canvas api, including creating canvas elements, styling with css, and drawing lines and a triangle with specific coordinates and styles. it also explains how to draw triangles and rectangles using stroke and fill methods, demonstrating the use of strokestyle, fillstyle, and linewidth properties to customize the borders and fill colors of the shapes. moreover, it demonstrates drawing squares, a circle, and text in a canvas, using specific coordinates and styles, and provides tips for centering text and customizing the appearance, showcasing the use of context methods and properties.', 'chapters': [{'end': 20525.196, 'start': 20422.711, 'title': 'Javascript animations', 'summary': 'Demonstrates creating simple animations using javascript by adding a button and a div element in the html file and utilizing event listeners to trigger the animations.', 'duration': 102.485, 'highlights': ['The chapter demonstrates creating simple animations using JavaScript by adding a button and a div element in the HTML file.', 'The div element is styled with a background color of light green, a width of 100, and a height of 100, with the position property set to relative.', 'Event listeners are utilized to trigger the animations when the button is clicked.']}, {'end': 20979.754, 'start': 20526.697, 'title': 'Javascript simple animations', 'summary': 'Covers creating simple animations in javascript, including sliding, rotating, moving diagonally, scaling images, and stopping conditions, such as setting intervals, stopping animation, and increasing/decreasing degrees and scale values.', 'duration': 453.057, 'highlights': ['Creating simple animations in JavaScript The chapter covers the creation of simple animations in JavaScript, including sliding, rotating, moving diagonally, scaling images, and stopping conditions.', 'Setting the interval for invoking the function The setInterval method is used to invoke a function every 5 milliseconds, which is considered a good speed for the animation.', 'Stopping animation when conditions are met The animation stops when the x or y coordinates reach 200 pixels, and the clearInterval method is used to stop the animation.', 'Rotating the element on different axes The chapter demonstrates rotating the element on the x-axis, y-axis, and z-axis, with a condition to stop the rotation when it reaches 360 degrees.', 'Scaling the size of an image The process of scaling an image is detailed, including increasing or decreasing the scale values for the x-axis, y-axis, and both axes, and the impact on the expansion or shrinkage of the image.']}, {'end': 21314.741, 'start': 20982.025, 'title': 'Drawing shapes with canvas api', 'summary': 'Covers drawing simple shapes using canvas api, including creating canvas elements, styling with css, and drawing lines and a triangle with specific coordinates and styles.', 'duration': 332.716, 'highlights': ['The chapter covers drawing simple shapes using Canvas API The tutorial focuses on drawing simple shapes using Canvas API, such as creating canvas elements, styling with CSS, and drawing lines and a triangle with specific coordinates and styles.', 'Creating canvas elements and setting dimensions The tutorial emphasizes creating a canvas element in an HTML document and setting its dimensions to 500x500 for drawing graphics.', 'Styling the canvas with CSS The tutorial explains how to style the canvas using CSS, including adding a border, changing the background color, and visualizing the canvas.', 'Drawing lines with specific coordinates and styles The tutorial demonstrates drawing lines on the canvas by specifying starting and ending coordinates, line width, and stroke color, providing a clear understanding of the process.', 'Creating a triangle with specific coordinates and styles The tutorial provides a step-by-step guide on creating a triangle on the canvas with specific coordinates, utilizing the moveTo and lineTo methods and setting the stroke style.']}, {'end': 21469.813, 'start': 21315.221, 'title': 'Drawing shapes with stroke and fill', 'summary': 'Explains how to draw triangles and rectangles using stroke and fill methods, demonstrating the use of strokestyle, fillstyle, and linewidth properties to customize the borders and fill colors of the shapes.', 'duration': 154.592, 'highlights': ['The chapter covers drawing triangles using the fill method, demonstrating the use of fillStyle to pick a color, stroke method for border, and changing border width with context.lineWidth property.', 'It explains drawing rectangles using strokeRect and fillRect methods, showcasing the use of strokeStyle to change border color, fillStyle to change fill color, and lineWidth property to adjust border thickness.', 'The demonstration includes examples of changing stroke color to red and fill color to red while also showing how to create multiple rectangles and customize their properties.']}, {'end': 21702.836, 'start': 21470.453, 'title': 'Drawing shapes and text in canvas', 'summary': 'Demonstrates drawing squares, a circle, and text in a canvas, using specific coordinates and styles, and provides tips for centering text and customizing the appearance, showcasing the use of context methods and properties.', 'duration': 232.383, 'highlights': ['The chapter demonstrates drawing squares, a circle, and text in a canvas. The transcript covers the process of drawing four squares, a circle, and text in a canvas using specific coordinates and styles.', 'The use of context methods and properties for drawing shapes and text. The use of context.beginPath, context.stroke, context.arc, context.fill, context.lineWidthProperty, context.strokeStyle, context.fillText, and context.fillStyle for drawing shapes and text.', 'Providing tips for centering text and customizing its appearance. The demonstration includes tips for centering text within a canvas and customizing its appearance using context.FontProperty, context.FillStyle, and specifying coordinates.']}], 'duration': 1280.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw20422711.jpg', 'highlights': ['The chapter covers creating simple animations using JavaScript by adding a button and a div element in the HTML file.', 'The chapter demonstrates drawing simple shapes using Canvas API, such as creating canvas elements, styling with CSS, and drawing lines and a triangle with specific coordinates and styles.', 'The chapter covers drawing triangles using the fill method, demonstrating the use of fillStyle to pick a color, stroke method for border, and changing border width with context.lineWidth property.', 'The chapter demonstrates drawing squares, a circle, and text in a canvas using specific coordinates and styles, and provides tips for centering text and customizing the appearance, showcasing the use of context methods and properties.']}, {'end': 23575.773, 'segs': [{'end': 21788.157, 'src': 'embed', 'start': 21762.113, 'weight': 6, 'content': [{'end': 21766.158, 'text': 'And actually, the DOM, the Document Object Model, is a property of the window.', 'start': 21762.113, 'duration': 4.045}, {'end': 21767.86, 'text': "Let's examine this window object.", 'start': 21766.358, 'duration': 1.502}, {'end': 21773.325, 'text': 'I will use console.dir and pass our window as an argument.', 'start': 21768.16, 'duration': 5.165}, {'end': 21775.408, 'text': "Here's our window object.", 'start': 21774.266, 'duration': 1.142}, {'end': 21782.636, 'text': 'It has its own properties and methods, one of which is document, the document object model.', 'start': 21776.775, 'duration': 5.861}, {'end': 21788.157, 'text': 'By interacting with the properties and methods of our window, we can change the behavior of our web browser.', 'start': 21782.956, 'duration': 5.201}], 'summary': 'The window object has properties and methods, including the document object model, which can alter browser behavior.', 'duration': 26.044, 'max_score': 21762.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw21762113.jpg'}, {'end': 21965.581, 'src': 'embed', 'start': 21901.704, 'weight': 7, 'content': [{'end': 21904.728, 'text': "It's basically my web address, but we could redirect it somewhere else.", 'start': 21901.704, 'duration': 3.024}, {'end': 21914.933, 'text': 'window.location.href equals, pick a website, maybe Google, https colon two forward slashes, google.com.', 'start': 21905.663, 'duration': 9.27}, {'end': 21917.015, 'text': 'This should redirect me to Google.', 'start': 21915.554, 'duration': 1.461}, {'end': 21925.504, 'text': 'Yeah Hey, if you need the host name, that would be window.location.hostname.', 'start': 21917.716, 'duration': 7.788}, {'end': 21927.306, 'text': "Here's my hostname.", 'start': 21926.405, 'duration': 0.901}, {'end': 21930.068, 'text': "It's just a local IP address.", 'start': 21927.466, 'duration': 2.602}, {'end': 21932.03, 'text': '127.0 0.1.', 'start': 21930.328, 'duration': 1.702}, {'end': 21939.055, 'text': 'If you need the path name, that would be window.location.pathname.', 'start': 21932.03, 'duration': 7.025}, {'end': 21943.119, 'text': 'And my path name is forward slash index.html.', 'start': 21939.796, 'duration': 3.323}, {'end': 21945.08, 'text': 'For me, this would be the landing page.', 'start': 21943.519, 'duration': 1.561}, {'end': 21947.022, 'text': "Here's a few useful methods.", 'start': 21945.681, 'duration': 1.341}, {'end': 21948.823, 'text': "We're going to create a button, though.", 'start': 21947.702, 'duration': 1.121}, {'end': 21954.048, 'text': 'Button id equals myButton.', 'start': 21951.065, 'duration': 2.983}, {'end': 21956.596, 'text': "Let's close it.", 'start': 21955.916, 'duration': 0.68}, {'end': 21958.157, 'text': "I'll add some text.", 'start': 21957.317, 'duration': 0.84}, {'end': 21959.538, 'text': 'Just buttons, fine.', 'start': 21958.697, 'duration': 0.841}, {'end': 21961.519, 'text': "I'm going to select this button.", 'start': 21960.338, 'duration': 1.181}, {'end': 21965.581, 'text': 'Constant myButton equals Document.', 'start': 21961.859, 'duration': 3.722}], 'summary': 'Using javascript, redirect web address to google, with methods for hostname, path, and button creation.', 'duration': 63.877, 'max_score': 21901.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw21901704.jpg'}, {'end': 22029.392, 'src': 'embed', 'start': 21998.643, 'weight': 8, 'content': [{'end': 22001.045, 'text': 'When we click on this button, it opens a new window.', 'start': 21998.643, 'duration': 2.402}, {'end': 22004.508, 'text': 'You could pass a URL within the Open method.', 'start': 22001.986, 'duration': 2.522}, {'end': 22008.692, 'text': "I'll place this address for Google as an argument.", 'start': 22006.51, 'duration': 2.182}, {'end': 22012.095, 'text': 'Then when I click on the button, it takes me to that website.', 'start': 22009.553, 'duration': 2.542}, {'end': 22014.142, 'text': 'Another is Close.', 'start': 22012.921, 'duration': 1.221}, {'end': 22019.045, 'text': 'Window.Close This will close the current window.', 'start': 22014.922, 'duration': 4.123}, {'end': 22022.007, 'text': 'When I click on this button, it closes the window.', 'start': 22019.625, 'duration': 2.382}, {'end': 22025.729, 'text': 'Another method is Print.', 'start': 22024.388, 'duration': 1.341}, {'end': 22029.392, 'text': 'Window.Print And we can print the current page.', 'start': 22026.009, 'duration': 3.383}], 'summary': 'Demonstrating window manipulation: open url, close window, and print page.', 'duration': 30.749, 'max_score': 21998.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw21998643.jpg'}, {'end': 22767.555, 'src': 'embed', 'start': 22718.266, 'weight': 1, 'content': [{'end': 22721.127, 'text': 'close the label.', 'start': 22718.266, 'duration': 2.861}, {'end': 22726.589, 'text': 'input. id equals first text.', 'start': 22721.127, 'duration': 5.462}, {'end': 22729.63, 'text': "i'll add a line break.", 'start': 22726.589, 'duration': 3.041}, {'end': 22735.192, 'text': "let's do the same thing with last name, last text.", 'start': 22729.63, 'duration': 5.562}, {'end': 22741.174, 'text': 'last name id is last text.', 'start': 22735.192, 'duration': 5.982}, {'end': 22742.214, 'text': "i'll create a submit button.", 'start': 22741.174, 'duration': 1.04}, {'end': 22747.422, 'text': 'button id equals submit.', 'start': 22743.519, 'duration': 3.903}, {'end': 22751.945, 'text': "now let's name this btn for short submit button.", 'start': 22747.422, 'duration': 4.523}, {'end': 22758.069, 'text': 'text will be submit.', 'start': 22751.945, 'duration': 6.124}, {'end': 22761.831, 'text': 'then a get cookies button.', 'start': 22758.069, 'duration': 3.762}, {'end': 22764.373, 'text': 'cookies. btn for button.', 'start': 22761.831, 'duration': 2.542}, {'end': 22767.555, 'text': 'the text will be get cookies.', 'start': 22764.373, 'duration': 3.182}], 'summary': 'Created form with input fields, submit button, and get cookies button.', 'duration': 49.289, 'max_score': 22718.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw22718266.jpg'}, {'end': 23575.773, 'src': 'embed', 'start': 23500.37, 'weight': 0, 'content': [{'end': 23504.955, 'text': "You can see that it's currently running, but when we display zeros, I would like two zeros.", 'start': 23500.37, 'duration': 4.585}, {'end': 23508.218, 'text': "Let's add a zero as padding for any single digit numbers.", 'start': 23505.435, 'duration': 2.783}, {'end': 23510.2, 'text': "I'll create an inner function.", 'start': 23509.019, 'duration': 1.181}, {'end': 23515.125, 'text': 'Function pad will accept a unit.', 'start': 23511.381, 'duration': 3.744}, {'end': 23518.929, 'text': 'We will return.', 'start': 23517.888, 'duration': 1.041}, {'end': 23522.513, 'text': 'This will be a ternary operator.', 'start': 23520.971, 'duration': 1.542}, {'end': 23525.938, 'text': 'It might be a little difficult to understand.', 'start': 23524.278, 'duration': 1.66}, {'end': 23530.879, 'text': "So we're going to add a zero to the front of our unit, whatever we pass in.", 'start': 23526.658, 'duration': 4.221}, {'end': 23533.039, 'text': 'Hours, minutes, and seconds.', 'start': 23530.899, 'duration': 2.14}, {'end': 23535.6, 'text': "We'll access the length property.", 'start': 23534.02, 'duration': 1.58}, {'end': 23543.681, 'text': "If we add a zero to our unit, what's the length? Is that length greater than two? Question mark.", 'start': 23536.96, 'duration': 6.721}, {'end': 23548.002, 'text': "If it is, we'll simply return unit.", 'start': 23544.801, 'duration': 3.201}, {'end': 23553.403, 'text': "Otherwise, we'll prepend a zero plus unit.", 'start': 23549.142, 'duration': 4.261}, {'end': 23557.387, 'text': "Then we'll invoke the pad function.", 'start': 23555.626, 'duration': 1.761}, {'end': 23564.809, 'text': 'Our seconds equals invoke pad, pass in our seconds.', 'start': 23559.227, 'duration': 5.582}, {'end': 23567.49, 'text': 'Do the same thing with minutes and hours.', 'start': 23565.789, 'duration': 1.701}, {'end': 23575.773, 'text': 'Minutes Hours.', 'start': 23570.411, 'duration': 5.362}], 'summary': 'Create a function to add zero padding to single digit numbers for hours, minutes, and seconds.', 'duration': 75.403, 'max_score': 23500.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw23500370.jpg'}], 'start': 21703.777, 'title': 'Using javascript for web development', 'summary': 'Covers various aspects of using javascript for web development, including working with canvas api, window object, location, methods, cookies, and creating interactive features like a stopwatch. it provides detailed explanations and examples for centering text on a canvas, redirecting websites, managing cookies, and creating interactive stopwatches.', 'chapters': [{'end': 21901.164, 'start': 21703.777, 'title': 'Introduction to canvas api & window object in javascript', 'summary': 'Covers how to center text on a canvas using the canvas api and explains the properties and methods of the window object, including obtaining inner and outer window dimensions and manipulating scroll positions.', 'duration': 197.387, 'highlights': ["The chapter covers how to center text on a canvas using the Canvas API, including calculating half of the canvas's width and height and setting the textAlign property to center.", 'The window object properties and methods are explained, such as obtaining inner and outer window dimensions using window.innerWidth, window.innerHeight, window.outerWidth, and window.outerHeight.', 'The process of manipulating scroll positions within the window is demonstrated using window.scrollX and window.scrollY, including how to obtain and change their values.', 'The chapter also demonstrates the ability to change the href property of the window to redirect to a different address using window.location.href.']}, {'end': 22102.984, 'start': 21901.704, 'title': 'Using window location and methods in javascript', 'summary': 'Covers using window.location to redirect to a website, accessing hostname and pathname, creating and manipulating buttons, opening new windows with specific urls, printing the current page, displaying pop-up messages, confirming user input, and prompting for user input.', 'duration': 201.28, 'highlights': ['Using window.location to redirect to a website The speaker demonstrates how to use window.location.href to redirect to a specific website such as Google.', 'Opening new windows with specific URLs The speaker shows how to use the window.open method to open a new window with a specific URL, in this case, redirecting to Google.', "Accessing hostname and pathname The speaker explains how to access the hostname and pathname using window.location.hostname and window.location.pathname respectively, providing the local IP address and the path name ('/index.html') as examples.", 'Creating and manipulating buttons The speaker demonstrates the process of creating and selecting buttons using the Document and QuerySelector methods, and adding event listeners to perform actions, such as opening a new window or closing the current window, when the button is clicked.', 'Displaying pop-up messages The speaker illustrates the use of window.alert to display a simple message and window.prompt to prompt the user for input, handling the input to determine whether to display an alert and close the window.', 'Printing the current page The speaker explains how to initiate the process of printing the current page using the window.print method.']}, {'end': 22280.325, 'start': 22104.185, 'title': 'Javascript window object and cookies', 'summary': 'Provides an introduction to the window object in javascript and explains the concept of cookies, including how to add, access, and expire cookies, with specific examples and methods.', 'duration': 176.14, 'highlights': ['The window object is an interface used to communicate with the web browser, offering various properties and methods. The window object serves as an interface to interact with the web browser, providing numerous properties and methods for web development.', 'Cookies are small text files stored on the computer to remember user information, and can be accessed and added through document.cookie and navigator.cookieEnabled. Cookies, stored as small text files, are utilized to retain user information, and their creation and access can be managed through document.cookie and navigator.cookieEnabled.', 'The process of adding a cookie involves setting its name-value pair, expiration date, and path, which can be accessed through document.cookie. Adding a cookie involves specifying its name-value pair, expiration date, and path, all accessible through the document.cookie property.']}, {'end': 22644.152, 'start': 22280.705, 'title': 'Managing cookies in javascript', 'summary': 'Explains how to create, delete, and retrieve cookie values in javascript, including setting expiration dates and using decodeuricomponent, with detailed examples and step-by-step explanations.', 'duration': 363.447, 'highlights': ['The chapter explains how to set the expiration date of a cookie by converting the number of days to milliseconds and then converting the future date to UTC string, with an example of setting a cookie to live for 365 days. Setting expiration date of a cookie, converting days to milliseconds, setting cookie to live for 365 days.', 'It demonstrates how to delete a cookie by setting its expiration date to a past date using a function named deleteCookie, with an example of deleting a specific cookie and clearing multiple cookies. Deleting a cookie, using deleteCookie function, clearing multiple cookies.', 'The transcript outlines the process of retrieving the value of a cookie by name using the decodeURIComponent method and splitting the cookie array to find the matching name value pair, with an example of retrieving the first name cookie value. Retrieving cookie value by name, using decodeURIComponent method, retrieving specific cookie value.']}, {'end': 22981.083, 'start': 22645.112, 'title': 'Introduction to cookies in javascript', 'summary': 'Introduces the concept of cookies in javascript, demonstrating how to set, delete, and retrieve cookies using code examples and highlighting the practical applications and benefits of using cookies for storing and retrieving user information.', 'duration': 335.971, 'highlights': ['The chapter demonstrates how to set, delete, and get cookies using JavaScript, providing code examples and explanations for each step.', 'Practical examples are provided for setting cookies with specific names and values, along with a designated expiration period of 365 days.', 'The process of retrieving cookies and using them to populate text fields is illustrated, showcasing the real-time application of cookie storage and retrieval in a web environment.', 'The speaker emphasizes the importance of cookies as small text files that store user information in name-value pairs, highlighting their significance in remembering user data.']}, {'end': 23575.773, 'start': 22981.243, 'title': 'Creating interactive stopwatch with javascript', 'summary': 'Demonstrates how to create an interactive stopwatch using javascript, including creating the html structure, adding css styling, and implementing the javascript functionality to start, pause, and reset the stopwatch.', 'duration': 594.53, 'highlights': ['Creating HTML structure for the stopwatch The speaker guides on creating a container, time display, and buttons for start, pause, and reset in the HTML file.', 'Adding CSS styling to the stopwatch components The video includes instructions on adding properties to the timer button class, styling the time display, and centering the time container using CSS.', 'Implementing JavaScript functionality for the stopwatch The tutorial covers selecting elements, declaring variables, adding event listeners to buttons, calculating elapsed time, and updating the display for the interactive stopwatch using JavaScript.']}], 'duration': 1871.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw21703777.jpg', 'highlights': ["The chapter covers how to center text on a canvas using the Canvas API, including calculating half of the canvas's width and height and setting the textAlign property to center.", 'The window object properties and methods are explained, such as obtaining inner and outer window dimensions using window.innerWidth, window.innerHeight, window.outerWidth, and window.outerHeight.', 'The process of manipulating scroll positions within the window is demonstrated using window.scrollX and window.scrollY, including how to obtain and change their values.', 'The chapter also demonstrates the ability to change the href property of the window to redirect to a different address using window.location.href.', 'Creating and manipulating buttons The speaker demonstrates the process of creating and selecting buttons using the Document and QuerySelector methods, and adding event listeners to perform actions, such as opening a new window or closing the current window, when the button is clicked.', 'The window object is an interface used to communicate with the web browser, offering various properties and methods. The window object serves as an interface to interact with the web browser, providing numerous properties and methods for web development.', 'Cookies are small text files stored on the computer to remember user information, and can be accessed and added through document.cookie and navigator.cookieEnabled. Cookies, stored as small text files, are utilized to retain user information, and their creation and access can be managed through document.cookie and navigator.cookieEnabled.', 'The chapter explains how to set the expiration date of a cookie by converting the number of days to milliseconds and then converting the future date to UTC string, with an example of setting a cookie to live for 365 days.', 'It demonstrates how to delete a cookie by setting its expiration date to a past date using a function named deleteCookie, with an example of deleting a specific cookie and clearing multiple cookies.', 'The chapter demonstrates how to set, delete, and get cookies using JavaScript, providing code examples and explanations for each step.', 'Practical examples are provided for setting cookies with specific names and values, along with a designated expiration period of 365 days.', 'The process of retrieving cookies and using them to populate text fields is illustrated, showcasing the real-time application of cookie storage and retrieval in a web environment.', 'Creating HTML structure for the stopwatch The speaker guides on creating a container, time display, and buttons for start, pause, and reset in the HTML file.', 'Adding CSS styling to the stopwatch components The video includes instructions on adding properties to the timer button class, styling the time display, and centering the time container using CSS.', 'Implementing JavaScript functionality for the stopwatch The tutorial covers selecting elements, declaring variables, adding event listeners to buttons, calculating elapsed time, and updating the display for the interactive stopwatch using JavaScript.']}, {'end': 25440.337, 'segs': [{'end': 23617.591, 'src': 'embed', 'start': 23576.933, 'weight': 5, 'content': [{'end': 23578.314, 'text': "Then let's move this line down.", 'start': 23576.933, 'duration': 1.381}, {'end': 23581.455, 'text': 'Right about here.', 'start': 23580.814, 'duration': 0.641}, {'end': 23584.896, 'text': 'Okay, we should have some zeros as padding now.', 'start': 23582.855, 'duration': 2.041}, {'end': 23587.733, 'text': 'Yeah, there we go.', 'start': 23586.892, 'duration': 0.841}, {'end': 23589.194, 'text': 'One, two, three.', 'start': 23587.993, 'duration': 1.201}, {'end': 23591.535, 'text': 'So we have no way to pause this timer.', 'start': 23590.034, 'duration': 1.501}, {'end': 23592.596, 'text': "Let's work on that next.", 'start': 23591.615, 'duration': 0.981}, {'end': 23594.717, 'text': "Let's head to our pause button.", 'start': 23593.516, 'duration': 1.201}, {'end': 23600.841, 'text': "We'll check to see if not paused.", 'start': 23596.298, 'duration': 4.543}, {'end': 23606.184, 'text': 'Then we will set paused equal to true.', 'start': 23603.403, 'duration': 2.781}, {'end': 23609.987, 'text': "We'll calculate the elapsed time.", 'start': 23608.526, 'duration': 1.461}, {'end': 23617.591, 'text': 'equals date dot now minus our start time.', 'start': 23612.808, 'duration': 4.783}], 'summary': 'Developing a timer app with pause functionality and elapsed time calculation.', 'duration': 40.658, 'max_score': 23576.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw23576933.jpg'}, {'end': 24135.331, 'src': 'embed', 'start': 24088.422, 'weight': 0, 'content': [{'end': 24091.084, 'text': "Next what we'll need to do is set the text with our choices.", 'start': 24088.422, 'duration': 2.662}, {'end': 24105.813, 'text': "playerText.textContent equals, I'll use a template literal, player colon space, I'll add a placeholder, player.", 'start': 24092.364, 'duration': 13.449}, {'end': 24109.375, 'text': "Let's do the same thing with computer.", 'start': 24107.974, 'duration': 1.401}, {'end': 24118.76, 'text': 'Computer text, text content, computer, computer.', 'start': 24112.176, 'duration': 6.584}, {'end': 24121.802, 'text': 'Then the result text.', 'start': 24120.722, 'duration': 1.08}, {'end': 24128.907, 'text': 'Result text dot text content.', 'start': 24126.466, 'duration': 2.441}, {'end': 24135.331, 'text': 'We will set this equal to invoke a check winner function.', 'start': 24130.068, 'duration': 5.263}], 'summary': 'Setting text content for player, computer, and result.', 'duration': 46.909, 'max_score': 24088.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw24088422.jpg'}, {'end': 25051.025, 'src': 'embed', 'start': 25022.587, 'weight': 4, 'content': [{'end': 25024.748, 'text': 'This refers to whatever cell that we click on.', 'start': 25022.587, 'duration': 2.161}, {'end': 25033.911, 'text': "We will get an attribute, get attribute, The attribute that we're getting is cell index.", 'start': 25025.369, 'duration': 8.542}, {'end': 25040.096, 'text': 'We have an index number.', 'start': 25039.015, 'duration': 1.081}, {'end': 25047.682, 'text': 'What we would like to check to see is if that index number within our options, our placeholders, are not empty.', 'start': 25040.636, 'duration': 7.046}, {'end': 25051.025, 'text': "We'll only want to update a cell if there's nothing there.", 'start': 25048.383, 'duration': 2.642}], 'summary': 'Retrieve cell index attribute and update cell if empty', 'duration': 28.438, 'max_score': 25022.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw25022587.jpg'}, {'end': 25162.198, 'src': 'embed', 'start': 25131.868, 'weight': 1, 'content': [{'end': 25138.793, 'text': 'There So we can click on one of these spaces, x, x, x, x.', 'start': 25131.868, 'duration': 6.925}, {'end': 25140.113, 'text': 'Then we just need to change the player.', 'start': 25138.793, 'duration': 1.32}, {'end': 25147.595, 'text': 'Take our current player, then we will set this equal to, then use the ternary operator.', 'start': 25141.193, 'duration': 6.402}, {'end': 25154.376, 'text': 'Our condition is if change player is equal to x.', 'start': 25148.155, 'duration': 6.221}, {'end': 25161.658, 'text': 'If current player is equal to x, we will reassign our current player with o.', 'start': 25154.376, 'duration': 7.282}, {'end': 25162.198, 'text': 'Otherwise, x.', 'start': 25161.658, 'duration': 0.54}], 'summary': 'Using the ternary operator to change player based on condition.', 'duration': 30.33, 'max_score': 25131.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw25131868.jpg'}, {'end': 25263.037, 'src': 'embed', 'start': 25196.957, 'weight': 2, 'content': [{'end': 25199.418, 'text': 'Okay, then head to our checkWinner function.', 'start': 25196.957, 'duration': 2.461}, {'end': 25200.719, 'text': 'We have a lot to do here.', 'start': 25199.839, 'duration': 0.88}, {'end': 25204.962, 'text': "We'll create a temporary variable of round1.", 'start': 25201.18, 'duration': 3.782}, {'end': 25207.844, 'text': 'I will set this equal to false.', 'start': 25206.183, 'duration': 1.661}, {'end': 25210.485, 'text': "If somebody wins, we'll flip this to be true.", 'start': 25208.404, 'duration': 2.081}, {'end': 25212.507, 'text': "We'll use a for loop.", 'start': 25211.566, 'duration': 0.941}, {'end': 25214.008, 'text': "We haven't used those for a while.", 'start': 25212.807, 'duration': 1.201}, {'end': 25219.474, 'text': 'We will iterate over all of the win conditions within our two dimensional array.', 'start': 25215.131, 'duration': 4.343}, {'end': 25222.937, 'text': 'The first statement will be let i equals zero.', 'start': 25219.975, 'duration': 2.962}, {'end': 25233.966, 'text': "We'll continue this as long as i is less than our win conditions dot length property increment i by one.", 'start': 25223.818, 'duration': 10.148}, {'end': 25238.069, 'text': 'We will iterate over each inner array within win conditions.', 'start': 25234.646, 'duration': 3.423}, {'end': 25244.694, 'text': "But let's store each of these arrays within a temporary variable const condition.", 'start': 25238.669, 'duration': 6.025}, {'end': 25249.447, 'text': 'equals win condition.', 'start': 25246.425, 'duration': 3.022}, {'end': 25256.773, 'text': 'at our current index of i, each row has three indices, const.', 'start': 25249.447, 'duration': 7.326}, {'end': 25263.037, 'text': 'cell a equals our options, but at what index?', 'start': 25256.773, 'duration': 6.264}], 'summary': 'Developing a checkwinner function with a two-dimensional array and for loop to iterate over win conditions.', 'duration': 66.08, 'max_score': 25196.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw25196957.jpg'}], 'start': 23576.933, 'title': 'Javascript game development', 'summary': 'Covers creating javascript games including a timer, rock paper scissors, and tic-tac-toe, with functionalities, development details, and specific instructions for html, css, and javascript.', 'chapters': [{'end': 23700.978, 'start': 23576.933, 'title': 'Creating a javascript timer', 'summary': 'Discusses creating a javascript timer with functionalities including pausing, resetting, and starting, utilizing date calculations and set interval method.', 'duration': 124.045, 'highlights': ['Utilizing date calculations to save the passed time in milliseconds, and clearing the set interval method to pause the timer.', 'Explaining the process of resetting the timer, including setting various time and display variables to zero.', 'Implementing the functionality to pause the timer by checking if it is not paused and setting the paused variable to true.']}, {'end': 23972.814, 'start': 23701.458, 'title': 'Creating rock paper scissors game', 'summary': 'Creating a game of rock paper scissors using html, javascript, and css, including the creation of html elements, selection of elements in javascript, and adding event listeners to buttons.', 'duration': 271.356, 'highlights': ['Creating a game of Rock Paper Scissors using HTML, JavaScript, and CSS', 'Adding HTML elements to contain the game and labels for player, computer, and result', 'Selecting elements in JavaScript using document.querySelector and document.querySelectorAll', "Adding event listeners to buttons in JavaScript to handle player's choice"]}, {'end': 24258.035, 'start': 23974.022, 'title': 'Rock paper scissors game development', 'summary': 'Details the development of a rock paper scissors game, including player and computer choices, random number generation, text content assignment, result comparison logic, and css styling.', 'duration': 284.013, 'highlights': ['The chapter details the development of a rock paper scissors game, including player and computer choices, random number generation, text content assignment, result comparison logic, and CSS styling.', 'The computerTurn function selects a random number between 1 and 3 and assigns a corresponding choice of rock, paper, or scissors to the computer.', "The check winner function compares the player and computer choices to determine the result of the game, displaying messages such as 'You win' or 'You lose' based on the outcome."]}, {'end': 24699.17, 'start': 24258.915, 'title': 'Creating games with javascript', 'summary': 'Covers the creation of basic games like rock, paper, scissors and tic-tac-toe using javascript, with specific instructions for html, css, and javascript including setting font styles, alignments, and grid layouts.', 'duration': 440.255, 'highlights': ['Creating a game of tic-tac-toe using JavaScript with specific instructions for HTML, CSS, and JavaScript. Instructions for creating a game of tic-tac-toe using JavaScript, including setting font styles, alignments, and grid layouts.', 'Creating a basic game of rock, paper, scissors for beginners using JavaScript with specific instructions for HTML, CSS, and JavaScript. Instructions for creating a basic game of rock, paper, scissors for beginners using JavaScript, including setting font styles, alignments, and grid layouts.', 'Setting font family, alignment, border, border radius, padding, background color, and color for text in a web browser. Instructions for setting font family, alignment, border, border radius, padding, background color, and color for text in a web browser.']}, {'end': 25196.937, 'start': 24700.191, 'title': 'Javascript tic-tac-toe game', 'summary': 'Outlines the creation of a javascript tic-tac-toe game, including the initialization of game variables, setting win conditions, creating placeholders, and implementing functions for cell clicking, updating cells, changing players, and checking for a winner.', 'duration': 496.746, 'highlights': ['The chapter outlines the creation of a JavaScript tic-tac-toe game. Describes the overall purpose of the transcript.', 'Initialization of game variables and setting win conditions. Describes the process of initializing game variables and defining win conditions, providing a clear direction for the game development.', 'Creating placeholders and implementing functions for cell clicking, updating cells, changing players, and checking for a winner. Highlights the key steps involved in creating placeholders and implementing various functions crucial for the game mechanics.']}, {'end': 25440.337, 'start': 25196.957, 'title': 'Tic tac toe winner check', 'summary': 'Covers the detailed process of checking for a winner in a tic tac toe game, iterating over win conditions and updating the game status based on the outcome, with insights into the code structure and logic.', 'duration': 243.38, 'highlights': ['Explaining the iteration process for checking win conditions The chapter explains the iteration process for checking win conditions, iterating over all the inner arrays and checking for non-empty and identical characters, providing a detailed insight into the code structure and logic.', "Updating game status based on the outcome The chapter discusses the process of updating the game status based on the outcome, setting the status to 'draw' if there are no empty spaces left and 'current player wins' if a winner is found, with a clear explanation of the code implementation.", "Setting the round variable to true if a winner is found The chapter illustrates setting the local variable 'round1' to true if a winner is found, and using a conditional break statement to exit the for loop, effectively capturing the game's outcome and stopping the iteration."]}], 'duration': 1863.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw23576933.jpg', 'highlights': ['Creating a game of tic-tac-toe using JavaScript with specific instructions for HTML, CSS, and JavaScript. Instructions for creating a game of tic-tac-toe using JavaScript, including setting font styles, alignments, and grid layouts.', 'The chapter details the development of a rock paper scissors game, including player and computer choices, random number generation, text content assignment, result comparison logic, and CSS styling.', 'Creating a game of Rock Paper Scissors using HTML, JavaScript, and CSS', 'Initialization of game variables and setting win conditions. Describes the process of initializing game variables and defining win conditions, providing a clear direction for the game development.', 'The chapter outlines the creation of a JavaScript tic-tac-toe game. Describes the overall purpose of the transcript.', 'Utilizing date calculations to save the passed time in milliseconds, and clearing the set interval method to pause the timer.']}, {'end': 26791.155, 'segs': [{'end': 25618.517, 'src': 'embed', 'start': 25581.024, 'weight': 4, 'content': [{'end': 25584.186, 'text': "I'm gonna go ahead and set the width and the height attributes right away.", 'start': 25581.024, 'duration': 3.162}, {'end': 25587.207, 'text': '500 for the width.', 'start': 25584.206, 'duration': 3.001}, {'end': 25590.048, 'text': 'The height will be 500 as well.', 'start': 25588.087, 'duration': 1.961}, {'end': 25592.79, 'text': 'Then close the canvas.', 'start': 25591.609, 'duration': 1.181}, {'end': 25594.391, 'text': "I'll add a score.", 'start': 25593.67, 'duration': 0.721}, {'end': 25599.553, 'text': 'Div id equals score.', 'start': 25596.251, 'duration': 3.302}, {'end': 25602.174, 'text': "Let's close the div section.", 'start': 25600.794, 'duration': 1.38}, {'end': 25605.336, 'text': 'The initial score will be set to 0.', 'start': 25602.775, 'duration': 2.561}, {'end': 25606.556, 'text': "Then we'll need a reset button.", 'start': 25605.336, 'duration': 1.22}, {'end': 25609.158, 'text': 'Button Close it.', 'start': 25607.597, 'duration': 1.561}, {'end': 25613.755, 'text': 'ID equals reset button.', 'start': 25610.254, 'duration': 3.501}, {'end': 25615.736, 'text': 'The text is reset.', 'start': 25614.295, 'duration': 1.441}, {'end': 25618.517, 'text': "Okay, let's work on our CSS styling.", 'start': 25616.476, 'duration': 2.041}], 'summary': 'Setting canvas width and height to 500, adding score and reset button, and proceeding to css styling.', 'duration': 37.493, 'max_score': 25581.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw25581024.jpg'}, {'end': 25990.942, 'src': 'embed', 'start': 25957.186, 'weight': 13, 'content': [{'end': 25958.047, 'text': 'An array of parts.', 'start': 25957.186, 'duration': 0.861}, {'end': 25965.392, 'text': 'Let snake equal straight brackets.', 'start': 25960.148, 'duration': 5.244}, {'end': 25966.153, 'text': "It's an array.", 'start': 25965.612, 'duration': 0.541}, {'end': 25968.094, 'text': 'And we will create objects.', 'start': 25966.873, 'duration': 1.221}, {'end': 25969.876, 'text': 'An object for each body part.', 'start': 25968.314, 'duration': 1.562}, {'end': 25972.778, 'text': 'Each body part will have an x and a y coordinate.', 'start': 25970.436, 'duration': 2.342}, {'end': 25975.313, 'text': "Let's begin with the tail.", 'start': 25974.312, 'duration': 1.001}, {'end': 25981.319, 'text': 'The tail will begin in the top left corner, so I will set those coordinates.', 'start': 25976.094, 'duration': 5.225}, {'end': 25982.461, 'text': '0, 0 is the top left corner.', 'start': 25981.339, 'duration': 1.122}, {'end': 25990.942, 'text': "Initially, let's create 5 body parts to the snake, but after it eats its food, it's going to increase by 1.", 'start': 25983.161, 'duration': 7.781}], 'summary': 'Creating an array of body parts for a snake game, starting with 5 parts and increasing by 1 after eating food.', 'duration': 33.756, 'max_score': 25957.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw25957186.jpg'}, {'end': 26182.744, 'src': 'embed', 'start': 26048.98, 'weight': 0, 'content': [{'end': 26053.063, 'text': "We'll pass in a callback to a change direction function.", 'start': 26048.98, 'duration': 4.083}, {'end': 26056.807, 'text': "Then we'll add an event listener to our reset button to restart the game.", 'start': 26053.704, 'duration': 3.103}, {'end': 26071.826, 'text': 'resetButton.addEventListener When we click, We will invoke the resetGame function, which we still need to declare.', 'start': 26058.228, 'duration': 13.598}, {'end': 26074.828, 'text': 'Then we will invoke gameStart.', 'start': 26072.627, 'duration': 2.201}, {'end': 26077.25, 'text': "Let's declare the functions that we'll need.", 'start': 26075.489, 'duration': 1.761}, {'end': 26079.131, 'text': "Let's begin with the first.", 'start': 26078.091, 'duration': 1.04}, {'end': 26081.473, 'text': 'function gameStart.', 'start': 26079.832, 'duration': 1.641}, {'end': 26087.837, 'text': 'function nextTick.', 'start': 26085.376, 'duration': 2.461}, {'end': 26093.882, 'text': 'function clearBoard.', 'start': 26091.32, 'duration': 2.562}, {'end': 26100.367, 'text': 'Clearboard is going to be in charge of repainting the board function.', 'start': 26095.083, 'duration': 5.284}, {'end': 26103.489, 'text': 'create food.', 'start': 26100.367, 'duration': 3.122}, {'end': 26110.995, 'text': 'The create food function will find a random place within our game board to place a food item function.', 'start': 26103.489, 'duration': 7.506}, {'end': 26113.877, 'text': 'draw food.', 'start': 26110.995, 'duration': 2.882}, {'end': 26118.2, 'text': "We'll need to paint the food within our game board function.", 'start': 26113.877, 'duration': 4.323}, {'end': 26124.358, 'text': 'move snake Function.', 'start': 26118.2, 'duration': 6.158}, {'end': 26130.78, 'text': 'draw snake Function.', 'start': 26124.358, 'duration': 6.422}, {'end': 26134.881, 'text': 'change direction.', 'start': 26130.78, 'duration': 4.101}, {'end': 26142.443, 'text': 'Function check game over.', 'start': 26134.881, 'duration': 7.562}, {'end': 26148.164, 'text': 'Function. display game over.', 'start': 26142.443, 'duration': 5.721}, {'end': 26150.965, 'text': 'Then lastly, function.', 'start': 26148.164, 'duration': 2.801}, {'end': 26152.185, 'text': 'reset game.', 'start': 26150.965, 'duration': 1.22}, {'end': 26154.73, 'text': 'Those are the functions.', 'start': 26153.649, 'duration': 1.081}, {'end': 26159.113, 'text': "Let's begin with the create food function.", 'start': 26156.831, 'duration': 2.282}, {'end': 26161.495, 'text': "We'll create an inner function.", 'start': 26160.114, 'duration': 1.381}, {'end': 26165.598, 'text': 'Function, random, food.', 'start': 26162.996, 'duration': 2.602}, {'end': 26169.981, 'text': 'There will be two parameters, min, then max.', 'start': 26166.458, 'duration': 3.523}, {'end': 26173.879, 'text': "Within this function, we'll return a random number.", 'start': 26171.257, 'duration': 2.622}, {'end': 26176.76, 'text': 'Return rand number.', 'start': 26174.439, 'duration': 2.321}, {'end': 26182.744, 'text': "So to calculate this number, we'll store this within const rand num.", 'start': 26177.581, 'duration': 5.163}], 'summary': 'Developing a game with functions for game board, snake, and food placement.', 'duration': 133.764, 'max_score': 26048.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw26048980.jpg'}, {'end': 26312.388, 'src': 'embed', 'start': 26281.753, 'weight': 8, 'content': [{'end': 26289.113, 'text': 'So every time I refresh this, you can see that all of these numbers are divisible by 25.', 'start': 26281.753, 'duration': 7.36}, {'end': 26290.654, 'text': "that's what we're looking for.", 'start': 26289.113, 'duration': 1.541}, {'end': 26291.575, 'text': "let's create food.", 'start': 26290.654, 'duration': 0.921}, {'end': 26293.976, 'text': 'why food?', 'start': 26291.575, 'duration': 2.401}, {'end': 26295.977, 'text': 'why equals the same thing?', 'start': 26293.976, 'duration': 2.001}, {'end': 26299.64, 'text': 'okay, that is our create food function.', 'start': 26295.977, 'duration': 3.663}, {'end': 26302.382, 'text': "let's move on to the draw food function.", 'start': 26299.64, 'duration': 2.742}, {'end': 26303.743, 'text': 'this is fairly easy.', 'start': 26302.382, 'duration': 1.361}, {'end': 26305.744, 'text': "we'll take our context.", 'start': 26303.743, 'duration': 2.001}, {'end': 26312.388, 'text': 'set the fill style equal to our food color.', 'start': 26305.744, 'duration': 6.644}], 'summary': 'Numbers divisible by 25 are key in creating food functions.', 'duration': 30.635, 'max_score': 26281.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw26281753.jpg'}, {'end': 26377.433, 'src': 'embed', 'start': 26342.633, 'weight': 6, 'content': [{'end': 26345.955, 'text': 'That completes the create food function and the draw food function.', 'start': 26342.633, 'duration': 3.322}, {'end': 26348.636, 'text': "I'm going to eliminate these two function calls.", 'start': 26346.455, 'duration': 2.181}, {'end': 26351.618, 'text': "We're going to fill in the game start function.", 'start': 26349.357, 'duration': 2.261}, {'end': 26355, 'text': 'We will set running equal to true.', 'start': 26352.558, 'duration': 2.442}, {'end': 26356.401, 'text': 'Our game is currently running.', 'start': 26355.26, 'duration': 1.141}, {'end': 26360.123, 'text': "We'll update the score text.", 'start': 26357.501, 'duration': 2.622}, {'end': 26366.5, 'text': 'text content to equal whatever our score is.', 'start': 26361.454, 'duration': 5.046}, {'end': 26368.282, 'text': "Initially it's going to be zero.", 'start': 26366.98, 'duration': 1.302}, {'end': 26377.433, 'text': "We'll invoke the create food function, then the draw food function, then lastly next tick.", 'start': 26368.943, 'duration': 8.49}], 'summary': 'Game start function sets running to true, updates score text, and invokes create food, draw food, and next tick functions.', 'duration': 34.8, 'max_score': 26342.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw26342633.jpg'}, {'end': 26569.603, 'src': 'embed', 'start': 26495.14, 'weight': 3, 'content': [{'end': 26502.504, 'text': "we will take our game width for the width, game height for the height, and that's it for this function.", 'start': 26495.14, 'duration': 7.364}, {'end': 26505.426, 'text': "let's work on draw snake.", 'start': 26502.504, 'duration': 2.922}, {'end': 26509.289, 'text': "we'll need to change the fill style context.", 'start': 26505.426, 'duration': 3.863}, {'end': 26516.268, 'text': 'dot Fill style equals snake color.', 'start': 26509.289, 'duration': 6.979}, {'end': 26518.269, 'text': 'For my snake, I picked green.', 'start': 26516.909, 'duration': 1.36}, {'end': 26521.751, 'text': 'If you have a border, we can set the stroke style.', 'start': 26519.41, 'duration': 2.341}, {'end': 26530.095, 'text': 'Context dot stroke style equals snake border.', 'start': 26522.011, 'duration': 8.084}, {'end': 26532.016, 'text': "We'll take our snake.", 'start': 26531.055, 'duration': 0.961}, {'end': 26536.858, 'text': "It's an array of objects, so there is a for each method.", 'start': 26532.256, 'duration': 4.602}, {'end': 26540.1, 'text': "I'll use an arrow function expression.", 'start': 26538.599, 'duration': 1.501}, {'end': 26543.143, 'text': 'The argument is snake part.', 'start': 26541.161, 'duration': 1.982}, {'end': 26559.075, 'text': 'For every snake part, then within curly braces, I will take our context, fill, rectangle, snake part.', 'start': 26545.304, 'duration': 13.771}, {'end': 26562.717, 'text': 'Each snake part has an X coordinate and a Y coordinate.', 'start': 26560.035, 'duration': 2.682}, {'end': 26569.603, 'text': "So we'll begin painting wherever that snake part currently is on the X axis and the Y axis.", 'start': 26563.198, 'duration': 6.405}], 'summary': 'Function to draw snake with game dimensions and color specified.', 'duration': 74.463, 'max_score': 26495.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw26495140.jpg'}, {'end': 26760.394, 'src': 'embed', 'start': 26696.425, 'weight': 1, 'content': [{'end': 26697.305, 'text': "So that's a comment.", 'start': 26696.425, 'duration': 0.88}, {'end': 26702.901, 'text': 'If the head of our snake, snake at index 0..', 'start': 26697.805, 'duration': 5.096}, {'end': 26707.067, 'text': 'take the x coordinate we will use the comparison operator.', 'start': 26702.901, 'duration': 4.166}, {'end': 26712.214, 'text': 'is the x coordinate of our snake equal to the x coordinate of our food food?', 'start': 26707.067, 'duration': 5.147}, {'end': 26717.552, 'text': "x, and Let's copy this portion.", 'start': 26712.214, 'duration': 5.338}, {'end': 26723.776, 'text': 'The y coordinate of the head of the snake is equal to food y.', 'start': 26718.432, 'duration': 5.344}, {'end': 26728.7, 'text': 'If the head of the snake and the food are overlapping, well then the snake has eaten the apple.', 'start': 26723.776, 'duration': 4.924}, {'end': 26731.682, 'text': "Let's increment the player score by one.", 'start': 26729.521, 'duration': 2.161}, {'end': 26733.924, 'text': 'Score plus equals one.', 'start': 26732.283, 'duration': 1.641}, {'end': 26736.005, 'text': 'Change the score text.', 'start': 26734.864, 'duration': 1.141}, {'end': 26743.551, 'text': 'Score text dot text content equals the new score.', 'start': 26736.746, 'duration': 6.805}, {'end': 26746.587, 'text': 'Then create a new food object.', 'start': 26744.926, 'duration': 1.661}, {'end': 26748.448, 'text': 'Create food.', 'start': 26747.167, 'duration': 1.281}, {'end': 26751.85, 'text': 'We have no way to test this until we can control our snake.', 'start': 26749.388, 'duration': 2.462}, {'end': 26753.731, 'text': "Let's close out of this function.", 'start': 26752.43, 'duration': 1.301}, {'end': 26757.132, 'text': 'Then go to the change direction function.', 'start': 26754.931, 'duration': 2.201}, {'end': 26760.394, 'text': 'The change direction function should have one parameter.', 'start': 26757.973, 'duration': 2.421}], 'summary': 'Snake game script checks for food overlap, increments score, and creates new food object.', 'duration': 63.969, 'max_score': 26696.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw26696425.jpg'}], 'start': 25441.857, 'title': 'Creating and developing games in javascript', 'summary': 'Demonstrates creating a basic tic-tac-toe game and a game of snake using javascript, covering topics such as game initialization, movement, game development functions, and detailed implementation of game logic.', 'chapters': [{'end': 25876.417, 'start': 25441.857, 'title': 'Creating tic-tac-toe and snake game in javascript', 'summary': 'Demonstrates creating a basic game of tic-tac-toe using javascript, featuring a restart button and a draw condition, followed by an introduction to creating a game of snake with initial html and css setup, and a declaration of variables and colors in javascript.', 'duration': 434.56, 'highlights': ['The chapter demonstrates creating a basic game of tic-tac-toe using JavaScript, featuring a restart button and a draw condition.', 'Introduction to creating a game of Snake with initial HTML and CSS setup.', 'Declaration of variables and colors in JavaScript.']}, {'end': 26047.438, 'start': 25876.757, 'title': 'Game code: snake movement and initialization', 'summary': "Details the initialization of game variables, including unit size, velocity, coordinates, score, and the snake's body parts, with the snake initially consisting of 5 body parts and increasing by 1 after consuming food, and concludes with the addition of an event listener for key events.", 'duration': 170.681, 'highlights': ['The snake initially consists of 5 body parts and increases by 1 after consuming food. The snake is initialized with 5 body parts and grows by 1 after consuming food.', 'The x velocity is set to the unit size, which means the snake moves 25 pixels on the x-axis every game tick. The x velocity is set to the unit size, resulting in the snake moving 25 pixels on the x-axis per game tick.', 'The initialization of game variables includes unit size, x and y velocity, food coordinates, and the score. The initialization covers variables such as unit size, x and y velocity, food coordinates, and the score.']}, {'end': 26462.412, 'start': 26048.98, 'title': 'Game development functions', 'summary': 'Covers the creation of essential game development functions such as creating food, drawing food, game start, and next tick, with a focus on detailing the logic and implementation of each function.', 'duration': 413.432, 'highlights': ['The chapter covers the creation of essential game development functions such as creating food, drawing food, game start, and next tick. Essential game development functions covered.', 'The create food function finds a random place within the game board to place a food item. Functionality of the create food function.', 'The draw food function paints the food within the game board using the specified coordinates and dimensions. Functionality of the draw food function.', 'The game start function sets the game running state to true, updates the score, creates and draws food, and invokes the next tick function. Functionality of the game start function.', 'The next tick function checks if the game is running and initiates a series of steps including clearing the board, drawing food, moving the snake, drawing the snake, and checking game over, followed by invoking next tick again. Functionality of the next tick function.']}, {'end': 26791.155, 'start': 26463.332, 'title': 'Snake game development', 'summary': 'Covers the development of a snake game, including functions for clearing the board, drawing the snake and moving the snake, with details on coordinates, velocities, and snake expansion, as well as condition for food consumption and score increment.', 'duration': 327.823, 'highlights': ['The snake game development includes functions for clearing the board, drawing the snake, and moving the snake, with specific details on coordinates, velocities, and snake expansion.', 'The condition for food consumption involves checking if the head of the snake and the food are overlapping, and upon consumption, the player score is incremented by one and the score text is updated.', 'A new head of the snake is created in the direction of movement, and the tail is eliminated after each move, allowing the snake to expand.', 'The change direction function is invoked with the key down event, and the key pressed is stored to control the movement of the snake.']}], 'duration': 1349.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw25441857.jpg', 'highlights': ['The chapter demonstrates creating a basic game of tic-tac-toe using JavaScript, featuring a restart button and a draw condition.', 'Introduction to creating a game of Snake with initial HTML and CSS setup.', 'Declaration of variables and colors in JavaScript.', 'The snake initially consists of 5 body parts and increases by 1 after consuming food.', 'The x velocity is set to the unit size, resulting in the snake moving 25 pixels on the x-axis per game tick.', 'The initialization covers variables such as unit size, x and y velocity, food coordinates, and the score.', 'Essential game development functions covered.', 'Functionality of the create food function.', 'Functionality of the draw food function.', 'Functionality of the game start function.', 'Functionality of the next tick function.', 'The snake game development includes functions for clearing the board, drawing the snake, and moving the snake, with specific details on coordinates, velocities, and snake expansion.', 'The condition for food consumption involves checking if the head of the snake and the food are overlapping, and upon consumption, the player score is incremented by one and the score text is updated.', 'A new head of the snake is created in the direction of movement, and the tail is eliminated after each move, allowing the snake to expand.', 'The change direction function is invoked with the key down event, and the key pressed is stored to control the movement of the snake.']}, {'end': 28759.191, 'segs': [{'end': 28649.035, 'src': 'embed', 'start': 28492.65, 'weight': 2, 'content': [{'end': 28497.792, 'text': 'If ball x is less than or equal to.', 'start': 28492.65, 'duration': 5.142}, {'end': 28498.832, 'text': 'This is for paddle one.', 'start': 28497.792, 'duration': 1.04}, {'end': 28500.753, 'text': 'Paddle one.', 'start': 28499.913, 'duration': 0.84}, {'end': 28514.464, 'text': 'take the x property, plus paddle1, axis the width property, plus the ball radius on the x axis.', 'start': 28501.761, 'duration': 12.703}, {'end': 28516.865, 'text': "If so, let's check the y axis.", 'start': 28515.064, 'duration': 1.801}, {'end': 28532.967, 'text': 'If ball y is greater than paddle1, take the y property, and ball y is less than paddle1.', 'start': 28518.205, 'duration': 14.762}, {'end': 28537.48, 'text': 'y plus paddle1.height.', 'start': 28532.967, 'duration': 4.513}, {'end': 28539.541, 'text': "That means there's a collision.", 'start': 28538.34, 'duration': 1.201}, {'end': 28546.204, 'text': "We'll take ball x direction, multiply this by negative one.", 'start': 28540.321, 'duration': 5.883}, {'end': 28549.146, 'text': 'Hey, if you want for fun, you can increase the ball speed.', 'start': 28547.085, 'duration': 2.061}, {'end': 28552.868, 'text': 'Ball speed plus equals one.', 'start': 28549.566, 'duration': 3.302}, {'end': 28557.677, 'text': 'Okay we should be able to bounce off this paddle.', 'start': 28555.776, 'duration': 1.901}, {'end': 28558.738, 'text': 'Yeah there we go.', 'start': 28558.057, 'duration': 0.681}, {'end': 28561.299, 'text': "Okay let's do the same thing with the right paddle.", 'start': 28558.758, 'duration': 2.541}, {'end': 28574.616, 'text': "So I'm going to copy this section, paste it is greater than or equal to the x property of paddle2, minus the ball radius.", 'start': 28562.18, 'duration': 12.436}, {'end': 28587.725, 'text': "if ball y is greater than the y property of paddle 2 and ball y is greater than the y property of paddle 2, plus paddle 2's height.", 'start': 28574.616, 'duration': 13.109}, {'end': 28592.248, 'text': 'So we should be able to bounce off these paddles now.', 'start': 28589.946, 'duration': 2.302}, {'end': 28595.73, 'text': 'Then the ball speeds up.', 'start': 28594.829, 'duration': 0.901}, {'end': 28605.099, 'text': 'So we do have one situation where the ball might get stuck, kind of like this.', 'start': 28599.738, 'duration': 5.361}, {'end': 28610.641, 'text': "If that happens, I'm just going to push the ball out of the way and move it forward.", 'start': 28606.82, 'duration': 3.821}, {'end': 28628.125, 'text': 'Ball x equals paddle one, take the x property, plus paddle one dot width plus ball radius.', 'start': 28611.881, 'duration': 16.244}, {'end': 28632.048, 'text': 'This is if ball gets stuck.', 'start': 28629.127, 'duration': 2.921}, {'end': 28635.99, 'text': 'This line of code helps prevent the ball from getting stuck within the paddle.', 'start': 28632.788, 'duration': 3.202}, {'end': 28642.232, 'text': 'This statement will be ball x equals paddle two dot x minus the ball radius.', 'start': 28636.69, 'duration': 5.542}, {'end': 28644.793, 'text': "Okay, now let's update the score.", 'start': 28643.433, 'duration': 1.36}, {'end': 28647.474, 'text': 'Update score.', 'start': 28646.734, 'duration': 0.74}, {'end': 28649.035, 'text': "This one's easy.", 'start': 28648.334, 'duration': 0.701}], 'summary': 'The transcript explains collision detection and ball movement in a game, with code snippets and updates to the ball speed and score.', 'duration': 156.385, 'max_score': 28492.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw28492650.jpg'}, {'end': 28740.591, 'src': 'embed', 'start': 28702.165, 'weight': 0, 'content': [{'end': 28705.528, 'text': 'By setting the X and the Y coordinates, that will put them in their original positions.', 'start': 28702.165, 'duration': 3.363}, {'end': 28710.072, 'text': "To demonstrate, I'll press reset and they go back to their respective corners.", 'start': 28706.609, 'duration': 3.463}, {'end': 28713.373, 'text': 'Ball X equals zero.', 'start': 28711.291, 'duration': 2.082}, {'end': 28716.795, 'text': 'Ball Y equals zero.', 'start': 28714.634, 'duration': 2.161}, {'end': 28721.559, 'text': 'Ball X direction equals zero.', 'start': 28717.876, 'duration': 3.683}, {'end': 28726.122, 'text': 'Ball Y direction equals zero.', 'start': 28722.84, 'duration': 3.282}, {'end': 28728.484, 'text': "We'll update the score.", 'start': 28727.203, 'duration': 1.281}, {'end': 28735.169, 'text': "We'll invoke the clear interval method.", 'start': 28728.504, 'duration': 6.665}, {'end': 28737.27, 'text': 'Pass in our interval ID.', 'start': 28735.649, 'duration': 1.621}, {'end': 28740.591, 'text': 'Then invoke game start again.', 'start': 28738.308, 'duration': 2.283}], 'summary': 'Resetting coordinates to original positions, updating score, and restarting game.', 'duration': 38.426, 'max_score': 28702.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw28702165.jpg'}], 'start': 26791.155, 'title': 'Snake, pong, and javascript game creation', 'summary': 'Explains snake game logic and control, creation of snake and pong games using javascript, creating paddles and game functions, canvas redrawing, paddle movement, and implementation of a pong game in javascript, with a routine repeated every 10 milliseconds.', 'chapters': [{'end': 27146.1, 'start': 26791.155, 'title': 'Snake game logic and control', 'summary': "Explains the logic for determining the snake's direction, controlling its movement, expanding upon eating the apple, and implementing game-over conditions based on collision with borders or overlapping body parts.", 'duration': 354.945, 'highlights': ["Implemented logic to determine snake's direction based on velocity and key presses Defined constants for directions and set conditions to determine the snake's direction based on y velocity and key presses.", "Controlled the snake's movement by setting velocities based on key presses Implemented a switch to control the snake's movement by setting velocities according to key presses, preventing illegal moves that result in game over.", "Implemented game-over conditions based on collision with borders and body parts Implemented game-over conditions to stop the game if the snake goes over the borders or if its body parts overlap, ensuring the game's integrity."]}, {'end': 27756.487, 'start': 27147.04, 'title': 'Creating snake and pong games with javascript', 'summary': 'Covers the creation of a game of snake using javascript, including setting up game over and reset game functions, and the beginning of creating a game of pong with javascript, including the html, css, and javascript setup for the game board, score, and paddle objects.', 'duration': 609.447, 'highlights': ['The chapter covers the creation of a game of Snake using JavaScript, including setting up game over and reset game functions. Creation of a game of Snake using JavaScript, setting up game over and reset game functions.', 'The beginning of creating a game of Pong with JavaScript, including the HTML, CSS, and JavaScript setup for the game board, score, and paddle objects. Beginning of creating a game of Pong with JavaScript, setup for game board, score, and paddle objects in HTML, CSS, and JavaScript.']}, {'end': 27995.868, 'start': 27758.228, 'title': 'Creating paddles and game functions', 'summary': 'Discusses creating paddles, game start routine, next tick function, and clear board function, with a routine to be repeated every 10 milliseconds for game execution.', 'duration': 237.64, 'highlights': ['The chapter discusses creating paddles, game start routine, next tick function, and clear board function The transcript covers the creation of paddles, the game start routine, the next tick function, and the clear board function.', 'A routine to be repeated every 10 milliseconds for game execution The routine involving clearing and redrawing the board, drawing paddles, moving the ball, and checking collision is set to be repeated every 10 milliseconds for game execution.']}, {'end': 28209.714, 'start': 27996.308, 'title': 'Canvas redrawing and paddle movement', 'summary': 'Explains the process of redrawing the canvas and implementing the change direction function to control paddle movement based on key presses, including specific key codes and boundary constraints, resulting in complete paddle functionality.', 'duration': 213.406, 'highlights': ["The function involves redrawing the canvas and implementing the change direction function to control paddle movement based on key presses, including specific key codes for 'W', 'S', up arrow and down arrow keys, ensuring complete paddle functionality.", "Specific key codes for 'W', 'S', up arrow and down arrow keys are provided, with 'W' having a key code of 87, 'S' having a key code of 83, the up arrow key having a key code of 38, and the down arrow key having a key code of 40, facilitating precise paddle movement.", "The implementation of the change direction function includes defining constants for paddle movements such as 'paddle1up' with a key code of 87, 'paddle1down' with a key code of 83, 'paddle2up' with a key code of 38, and 'paddle2down' with a key code of 40, ensuring accurate control over paddle actions.", 'The explanation covers the process of setting boundary constraints for paddle movements, including preventing paddles from moving beyond the game board, ensuring comprehensive control and functionality of the paddles within the defined game environment.']}, {'end': 28759.191, 'start': 28210.174, 'title': 'Pong game in javascript', 'summary': 'Covers the implementation of a pong game using javascript, including drawing the ball, creating and moving the ball, checking collisions with borders and paddles, updating the score, and resetting the game.', 'duration': 549.017, 'highlights': ['Implementation of Pong game using JavaScript The chapter covers the implementation of a Pong game using JavaScript.', 'Drawing the ball and setting its properties Explanation of setting Fill Style, Stroke Style, line width, and invoking methods to draw the ball.', 'Creating and moving the ball Details on creating a new ball, setting its initial position, and moving it in a random direction.', 'Checking collisions with borders and paddles Code explanations for checking collisions with top, bottom, left, and right borders, as well as with paddles to bounce the ball.', 'Updating the score and resetting the game Instructions for updating the score, displaying it on the screen, and resetting the game to its initial state.']}], 'duration': 1968.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8dWL3wF_OMw/pics/8dWL3wF_OMw26791155.jpg', 'highlights': ["Implemented game-over conditions to stop the game if the snake goes over the borders or if its body parts overlap, ensuring the game's integrity.", "Controlled the snake's movement by setting velocities based on key presses, preventing illegal moves that result in game over.", "Implemented logic to determine snake's direction based on velocity and key presses, ensuring smooth and controlled movement.", 'The routine involving clearing and redrawing the board, drawing paddles, moving the ball, and checking collision is set to be repeated every 10 milliseconds for game execution.', 'The chapter covers the creation of paddles, the game start routine, the next tick function, and the clear board function.', "Specific key codes for 'W', 'S', up arrow and down arrow keys are provided, facilitating precise paddle movement.", 'The implementation of the change direction function includes defining constants for paddle movements, ensuring accurate control over paddle actions.', 'The explanation covers the process of setting boundary constraints for paddle movements, ensuring comprehensive control and functionality of the paddles within the defined game environment.', 'The chapter covers the implementation of a Pong game using JavaScript.', 'Details on creating a new ball, setting its initial position, and moving it in a random direction.', 'Code explanations for checking collisions with top, bottom, left, and right borders, as well as with paddles to bounce the ball.', 'Instructions for updating the score, displaying it on the screen, and resetting the game to its initial state.']}], 'highlights': ['JavaScript is a versatile programming language for web and mobile applications, command line tools, and game development.', 'Visual Studio Code is recommended as a text editor for JavaScript development.', 'Live Server extension updates the web browser in real-time when a JavaScript file is saved.', 'The tutorial provides a comprehensive guide for creating new folders, JavaScript files, HTML files, and CSS style sheets.', 'The tutorial emphasizes the importance of linking CSS and JavaScript files to HTML for web development.', 'Practical examples are provided for using console.log to display output and window.alert to create pop-ups.', 'Variables act as containers for data and behave as if they were the value they contain.', 'The chapter explores three common data types for variables: strings, numbers, and booleans.', 'The switch statement in JavaScript is more efficient than using many else if statements, providing a better alternative when dealing with multiple conditions.', 'Logical operators allow checking multiple conditions concurrently, enhancing decision-making in programming.', 'A while loop repeats code while a condition is true, potentially leading to infinite iterations, as demonstrated by prompting for user input until a valid response is received.', 'The break statement breaks out of a loop entirely, illustrated by stopping a for loop counting numbers 1 through 20 when it reaches 13.', 'The chapter covers functions, nested loops, return statements, ternary operator, variable scope, toLocaleString method, and creating JavaScript programs for a number guessing game and temperature conversion.', 'Arrays in JavaScript can store multiple values, demonstrated by storing multiple fruit names.', 'Accessing elements in an array using index numbers is demonstrated, with the explanation that the first element has an index of 0.', 'The addition and removal of elements in an array using the push, pop, unshift, and shift methods are explained.', 'The tutorial covers accessing the length property of an array and finding the index of an element, showcasing practical use cases for both.', 'The forEach method executes a callback function for each array element, facilitating array manipulation', 'The map method creates a new array by executing a callback function for each array element', 'The filter method creates a new array based on a test provided by a function, enhancing data filtering', 'The reduce method reduces an array to a single value, facilitating array aggregation', 'The map object in JavaScript holds key-value pairs of any data type, and the example demonstrates associating prices with items in an online store.', 'Objects are a group of properties and methods that have a name, and to access their properties and methods, a dot is used following the object name.', 'Inheritance allows child classes to inherit all properties and methods from a parent class, reducing code repetition and enabling centralized updates.', 'Promises encapsulate the result of an asynchronous operation, enabling asynchronous methods to return values like they were synchronous.', 'Demonstrates accessing and displaying the properties of the DOM, such as document.titleproperty and document.url, and showcases the ability to change these properties.', "Covers a beginner's guide to adding and changing HTML elements in JavaScript, including inserting list items with examples such as inserting apple, mango, orange, and banana at different indexes.", 'Explains changing CSS properties of elements using JavaScript, covering properties like background color, font, text alignment, and more, with examples and explanations.', 'Demonstrates drawing simple shapes using Canvas API, such as creating canvas elements, styling with CSS, and drawing lines and a triangle with specific coordinates and styles.', 'The chapter demonstrates creating a basic game of tic-tac-toe using JavaScript, featuring a restart button and a draw condition.', 'Introduction to creating a game of Snake with initial HTML and CSS setup.', 'The chapter covers the implementation of a Pong game using JavaScript.']}