From bbdfdf8f4be7afac0f52b7a290c1a2c484a421fb Mon Sep 17 00:00:00 2001 From: Zaira <33151350+zairahira@users.noreply.github.com> Date: Fri, 15 Nov 2024 22:08:15 +0500 Subject: [PATCH] chore(curriculum): adding content to JS variables and datatypes review page (#57178) Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 3 +- .../6723be264695fb7e619fe1fa.md | 197 ++++++++++++++++++ 2 files changed, 199 insertions(+), 1 deletion(-) diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index b5e2afdffcb..38dbf1e2438 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2505,7 +2505,8 @@ "review-javascript-variables-and-data-types": { "title": "JavaScript Variables and Data Types Review", "intro": [ - "Review the JavaScript Variables and Data Types concepts to prepare for the upcoming quiz." + "Before you are quizzed on JavaScript variables and data types you first need to review the concepts.", + "Open up this page to review variables, data types, logging and commenting." ] }, "quiz-javascript-variables-and-data-types": { diff --git a/curriculum/challenges/english/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md b/curriculum/challenges/english/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md index 20d7a4b6ac8..a550aed7145 100644 --- a/curriculum/challenges/english/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md +++ b/curriculum/challenges/english/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md @@ -9,7 +9,204 @@ dashedName: review-javascript-variables-and-data-types Review the concepts below to prepare for the upcoming quiz. +## Working with HTML, CSS, and JavaScript +While HTML and CSS provide website structure, JavaScript brings interactivity to websites by enabling complex functionality, such as handling user input, animating elements, and even building full web applications. + +## Data Types in JavaScript + +Data types help the program understand the kind of data it’s working with, whether it's a number, text, or something else. + +- **Number**: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90. +- **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001. +- **String**: A string is a sequence of characters, or text, enclosed in quotes. `"I like coding"` and `'JavaScript is fun'` are examples of strings. +- **Boolean**: A boolean represents one of two possible values: `true` or `false`. You can use a boolean to represent a condition, such as `isLoggedin = true`. +- **Undefined and Null**: An undefined value is a variable that has been declared but not assigned a value. A null value is an empty value, or a variable that has intentionally been assigned a value of `null`. +- **Object**: An object is a collection of key-value pairs. The key is the property name, and the value is the property value. + +Here, the `pet` object has three properties or keys: `name`, `age`, and `type`. The values are `Fluffy`, `3`, and `dog`, respectively. + +```js +let pet = { + name: 'Fluffy', + age: 3, + type: 'dog' +}; +``` + +- **Symbol**: The Symbol data type is a unique and immutable value that may be used as an identifier for object properties. + +In this example below, two symbols are created with the same description, but they are not equal. + +```js +const crytpicKey1= Symbol('saltNpepper'); +const crytpicKey2= Symbol('saltNpepper'); +console.log(crytpicKey1 === crytpicKey2); // false +``` + +- **BigInt**: When the number is too large for the `Number` data type, you can use the BigInt data type to represent integers of arbitrary length. + +By adding an `n` to the end of the number, you can create a BigInt. + +```js +const veryBigNumber = 1234567890123456789012345678901234567890n; +``` + +## Variables in JavaScript + +- Variables can be declared using the `let` keyword. + +```js +let cityName; +``` + +- To assign a value to a variable, you can use the assignment operator `=`. + +```js +cityName = 'New York'; +``` + +- Variables declared using `let` can be reassigned a new value. + +```js +cityName = 'Los Angeles'; +console.log(cityName); // Los Angeles +``` + +- Apart from `let`, you can also use `const` to declare a variable. However, a `const` variable cannot be reassigned a new value. + +```js +const cityName = 'New York'; +cityName = 'Los Angeles'; // TypeError: Assignment to constant variable. +``` + +- Variables declared using `const` find uses in declaring constants, that are not allowed to change through out the code, such as `PI` or `MAX_SIZE`. + +## Variable Naming Conventions + +- Variable names should be descriptive and meaningful. +- Variable names should be camelCase like `cityName`, `isLoggedin`, and `veryBigNumber`. +- Variable names should not start with a number. They must begin with a letter, `_`, or `$`. +- Variable names should not contain spaces or special characters, except for `_` and `$`. +- Variable names should not be reserved keywords. +- Variable names are case-sensitive. `age` and `Age` are different variables. + +## Strings and String immutability in JavaScript + +- Strings are sequences of characters enclosed in quotes. They can be created using single quotes and double quotes. + +```js +let correctWay = 'This is a string'; +let alsoCorrect = "This is also a string"; +``` + +- Strings are immutable in JavaScript. This means that once a string is created, you cannot change the characters in the string. However, you can still reassign strings to a new value. + +```js +let firstName = 'John'; +firstName = 'Jane'; // Reassigning the string to a new value +``` + +## String Concatenation in JavaScript + +- Concatenation is the process of joining multiple strings or combining strings with variables that hold text. The `+` operator is one of the simplest and most frequently used methods to concatenate strings. + +```js +let studentName = 'Asad'; +let studentAge = 25; +let studentInfo = studentName + ' is ' + studentAge + ' years old.'; +console.log(studentInfo); // Asad is 25 years old. +``` + +- If you need to add or append to an existing string, then you can use the `+=` operator. This is helpful when you want to build upon a string by adding more text to it over time. + +```js +let message = 'Welcome to programming, '; +message += 'Asad!'; +console.log(message); // Welcome to programming, Asad! +``` + +- Another way you can concatenate strings is to use the concat method. This method joins two or more strings together. + +```js +let firstName = 'John'; +let lastName = 'Doe'; +let fullName = firstName.concat(' ', lastName); +console.log(fullName); // John Doe +``` + +## Logging Messages with `console.log()` + +- The `console.log()` method is used to log messages to the console. It's a helpful tool for debugging and testing your code. + +```js +console.log('Hello, World!'); +// Output: Hello, World! +``` + +## Semicolons in JavaScript + +- Semicolons are primarily used to mark the end of a statement. This helps the JavaScript engine understand the separation of individual instructions, which is crucial for correct execution. + +```js +let message = 'Hello, World!'; // first statement ends here +let number = 42; // second statement starts here +``` + +- Semicolons help prevent ambiguities in code execution and ensure that statements are correctly terminated. + +## Comments in JavaScript + +- Any line of code that is commented out is ignored by the JavaScript engine. Comments are used to explain code, make notes, or temporarily disable code. +- Single line comments are created using `//`. + +```js +// This is a single line comment and will be ignored by the JavaScript engine +``` + +- Multi-line comments are created using `/*` to start the comment and `*/` to end the comment. + +```js +/* +This is a multi-line comment. +It can span multiple lines. +*/ +``` + +## JavaScript as a Dynamically Typed Language + +- JavaScript is a dynamically typed language, which means that you don't have to specify the data type of a variable when you declare it. The JavaScript engine automatically determines the data type based on the value assigned to the variable. + +```js +let error = 404; // JavaScript treats error as a number +error = "Not Found"; // JavaScript now treats error as a string +``` + +- Other languages, like Java, that are not dynamically typed would result in an error: + +```js +int error = 404; // value must always be an integer +error = "Not Found"; // This would cause an error in Java +``` + +## Using the `typeof` Operator + +- The `typeof` operator is used to check the data type of a variable. It returns a string indicating the type of the variable. + +```js +let age = 25; +console.log(typeof age); // number + +let isLoggedin = true; +console.log(typeof isLoggedin); // boolean +``` + +- However, there’s a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values. + +```js +let user = null; +console.log(typeof user); // object +``` # --assignment--