Introduction to JavaScript presentations
- 1. JavaScript PRESENTATION <p> By: Xai Mae Charnelle R. Sopsop </p>
- 2. TABLE OF CONTENT 01 02 03 04 05 06 07 08 09 10 11 12 13 What is Javascript History of JavaScript Where can we code JavaScript? JavaScript Basic Example External Javascript Variable Data Types String & Numbers Boolean Array & Object Null & Undefined Conditional Statements Loops
- 3. What is Javascript? <p> JavaScript is a programming language for websites. It can manipulate both html and css.</p> It can perform logical checks, calculation, modify existing html & Css codes and more. One of the most in-demand programming languages in the tech industry.
- 4. ● <p> Key Milestones in JavaScript's History: • 1995: JavaScript was created by Brendan Eich at Netscape (initially called Mocha, then LiveScript). • 1997: The ECMAScript standard was introduced to standardize JavaScript. • 2005: The rise of AJAX brought dynamic content updates to web applications. • 2009: Node.js was introduced, making JavaScript a full-stack language. • 2015: ECMAScript 6 (ES6) introduced new language features, modernizing JavaScript. ● Who Created JavaScript? • Brendan Eich, who developed JavaScript while working at Netscape Communications in 1995. He is often referred to as the "father of JavaScript.“ </p> History of JavaScript & Who created Javascript
- 5. Where can we code JavaScript? <p> Text Editor </p> Any software used to edit text. Then we can use other text editors. Are especially made for coding that incorporates colored text foe a certain language like JavaScript, It may also be called as an Integrated Development Environment (IDE). So, there are text editor we can use the Notepad, Notedpad++ (IDE) and Visual Studio Code (IDE).
- 6. JavaScript Basic Example console.log in JavaScript ● console.log() is a built-in JavaScript method used to output or log information to the browser’s console. It's extremely useful for debugging and tracking the flow of your code, as it allows you to view variable values, error messages, and more in the developer tools console. <script> Tag in HTML ● The <script> tag is used in HTML to embed or link to JavaScript code. It can be placed either in the <head> or at the bottom of the <body> section. It tells the browser that the content inside the tag is JavaScript code, which should be executed.
- 8. External JavaScript <p> What is external JavaScript? </p> External JavaSript refers to a JavaScript file that is stored separately from an HTML document. Instead of embedding the Javascript code directly within the HTML using <script> tags, an external JavaScript file is linked to the HTML document. Script.js Index.html
- 10. VARIABLE An temporary containers that can be hold different types of data such as text, numbers collections, objects and etc. Variable csn be named for easy read/write access by the programmer it is called identifier.
- 11. DATA TYPES The type of data that the variable is currently holding. 1. String 5. Object 2. Number 6. Null 3. Boolean 7. Undefined 4. Array
- 12. String (TEXT) A string is just a piece of text. It’s wrapped in either single quotes (‘) or a double quotes (“). A number is any numerical value. It can be integer(whole numbers) or a decimal (floating-point number). NUMBER (NUMBERS)
- 13. Boolean A Boolean can only be one of the two values: true or false. It’s often used in conditions or comparisons.
- 14. Array (LIST OF VALUES) An object is like a “thing” that has properties (like characteristics. You define properties with a name and a value, like describing someone by their name and age. Object ( COLLECTION OF RELATED DATA An array is a collection of values, kind of like a list. The values can be on any type (strings, number, etc.), and they are ordered by their postion in the list.
- 15. Null (NO VALUE) Undefined In JavaScript, null is a primitive value that represents the intentional absence of any object value. It essentially means "nothing" or "empty.“ It is used when you want to clear or empty something on purpose. When you declare a variable without assigning a value to it, it automatically gets the value undefined.
- 16. CONDITIONAL STATEMENTS What is a Conditional Statement? A conditional statement is a programming construct that allows you to execute different blocks of code based on whether a condition is true or false. In JavaScript, conditional statements include: 1.if statement: Executes a block of code if a condition is true. 2.else statement: Executes a block of code if the if condition is false. 3.else if statement: Allows you to check multiple conditions in sequence.
- 17. LOOP Type Loop Type Purpose Example Use Case for Repeat code a specific number of times Iterating over a range of numbers while Repeat code as long as a condition is true Reading input until a valid value do...while Repeat code at least once, then continue if a condition is true Menu-driven programs for...in Iterate over the properties of an object Looping through object keys for...of Iterate over the elements of an iterable (e.g., arrays, strings) Looping through array elements forEach Iterate over array elements using a callback function Processing array elements
- 18. THANK YOU! Do you have any questions? NEXT PAGE: Test Questionnaire
- 19. Here’s a 10-item multiple-choice test. JavaScript Quiz Instructions: Read each question carefully and choose the correct answer. 1. Who created JavaScript? a) Tim Berners-Lee b) Brendan Eich c) Bill Gates d) Dennis Ritchie 2. In what year was JavaScript created? a) 1995 b) 2005 c) 2015 d) 1989 3. What is the purpose of JavaScript in web development? a) To style webpages b) To structure content c) To add interactivity d) To manage databases 4. Which of the following is a valid JavaScript variable declaration? a) variable x = 10; b) var x = 10; c) let = x 10; d) const 10 = x;
- 20. 5. Which of these is a data type in JavaScript? a) Picture b) Boolean c) HTML d) CSS 6. What does console.log() do in JavaScript? a) Displays output in the console b) Creates a pop-up window c) Writes content to an HTML page d) Styles a webpage 7. Which symbol is used for single-line comments in JavaScript? a) <!-- --> b) /* */ c) // d) ** ** 8. What keyword is used to define a constant variable in JavaScript? a) let b) const c) var d) static 9. What does an if statement do in JavaScript? a) Loops through a block of code b) Declares a function
- 21. c) Executes a block of code if a condition is true d) Defines an object 10. What is the output of the following code? a) null b) object c) undefined d) string