From 3997eadc90ef9a6abb57d793bf2a24384a6c0016 Mon Sep 17 00:00:00 2001 From: Elizabeth Johnson Date: Fri, 14 Jun 2024 09:30:20 -0700 Subject: [PATCH 1/5] add scraps 1, 2 and 3 to study-guides --- study-guides/variables.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/study-guides/variables.md b/study-guides/variables.md index ee1fba4..bca5ea4 100644 --- a/study-guides/variables.md +++ b/study-guides/variables.md @@ -1 +1,31 @@ # Variables +## Variables + +In order to save the DOM references to your HTML elements, you must store them in variables. + +Let's breakdown the syntax to **declare a variable** in JavaScript. + +```javascript +var varName = value; +``` + +- `var`: This keyword defines a variable. There are three types of variables that were introduced with the [ES6 JavaScript revision](http://es6-features.org/#Constants). To declare a variable, developers may now define a variable as `var`, `const`, and `let`. We will explain in more detail below the difference between these variable types. +- `varName`: Name of your variable. +- `=`: Similar to most programming languages, the `=` symbol is used to define and set a variable name to a specific value. +- `;`: All JavaScript lines of code and statements must end with a semicolon `;`. + +To define an empty variable, just define the type of variable and name, and end with a semicolon (e.g `var varName`). + + +#### `var`, `let`, and `const` + +In some programming languages, like Java and C++, when declaring a variable you must specify the data type (integer, String, float, boolean, etc.) In JavaScript, a variable does not need to be specifically defined in its declaration. Instead, the keyword `var`, `const`, and `let` define how a variable can be used and/or changed. + + +- `var`: Variables defined by a `var` declaration are typically declared *outside* of a function and act as global variables. They can be accessed by any function, redefined, and their value may change at any point in the program flow. +- `let`: Variables defined by `let` declaration are typically defined *inside* of a block of code (typically defined by curly brackets, `{}`). This block of code is sometimes called **scope**. Within its scope, a `let` variable's value may change but cannot be redefined. This ensures that a `let` variable name must be unique within a single scope. `let` variables are typically used within functions for temporarily used and are not called in multiple functions like `var` variables. +- `const`: Variables defined by `const` declaration are **constant** values. They cannot be updated or re-declared. + +When storing DOM variables, take a moment to think about which type of variable you would use to store DOM references to HTML elements. + + From a4bbdad0e6f7b54451ffb2504db1867cc48b353a Mon Sep 17 00:00:00 2001 From: anitadugbartey1 Date: Fri, 14 Jun 2024 09:31:04 -0700 Subject: [PATCH 2/5] changes --- study-guides/variables.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/study-guides/variables.md b/study-guides/variables.md index ee1fba4..08e7a73 100644 --- a/study-guides/variables.md +++ b/study-guides/variables.md @@ -1 +1,9 @@ # Variables +- Since there are no attributes attached to this element, no `id` or `class` name, this eliminates the use of the `getElementById` method. +- We can only use the `querySelector` or `querySelectorAll` method. However, since there is only a single instance of a `p` element, we will elect to use the `querySelector` method with the **element selector** associated with its tag name `p`. + +```javascript +const pElem = document.querySelector('p'); +``` + +Notice that we use either **single or double quotation marks** as a parameter to the `querySelector` method. \ No newline at end of file From b4f69acdba99904c1aa6106b51101ab6fcabf218 Mon Sep 17 00:00:00 2001 From: Evelyn Zhinin Tacuri Date: Fri, 14 Jun 2024 09:33:27 -0700 Subject: [PATCH 3/5] scraps 4-5 to study guide --- study-guides/variables.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/study-guides/variables.md b/study-guides/variables.md index ee1fba4..6434c82 100644 --- a/study-guides/variables.md +++ b/study-guides/variables.md @@ -1 +1,24 @@ # Variables + +# Variables scrap 4 +**You should use the `const` variable type!** We don't want to be able to redefine or change the variable holding the reference to our HTML elements. This is why we should choose the `const` variable type. + +Let's look at an example using the `querySelector` method. + +# Variable scrap 5 + +**Example**: `index.html` + +```html + + + My Document + + +

Header

+

Paragraph

+ + +``` + +Let's say we want to store a reference to the `p` element. From 8e761afd9d4c0d9aa92a95b4421373acdf90f8ee Mon Sep 17 00:00:00 2001 From: Evelyn Zhinin Tacuri Date: Fri, 14 Jun 2024 10:00:39 -0700 Subject: [PATCH 4/5] adding variables4-5 --- study-guides/variables.md | 1 + 1 file changed, 1 insertion(+) diff --git a/study-guides/variables.md b/study-guides/variables.md index 6434c82..a815453 100644 --- a/study-guides/variables.md +++ b/study-guides/variables.md @@ -22,3 +22,4 @@ Let's look at an example using the `querySelector` method. ``` Let's say we want to store a reference to the `p` element. + \ No newline at end of file From fd951310f9d8d72163ef716b21c45e4ea4e9a5cb Mon Sep 17 00:00:00 2001 From: Liz Date: Fri, 14 Jun 2024 10:23:18 -0700 Subject: [PATCH 5/5] Update variables.md to fix order --- study-guides/variables.md | 46 ++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/study-guides/variables.md b/study-guides/variables.md index 746eb90..3ff7cca 100644 --- a/study-guides/variables.md +++ b/study-guides/variables.md @@ -1,30 +1,5 @@ # Variables -<<<<<<< HEAD -# Variables scrap 4 -**You should use the `const` variable type!** We don't want to be able to redefine or change the variable holding the reference to our HTML elements. This is why we should choose the `const` variable type. - -Let's look at an example using the `querySelector` method. - -# Variable scrap 5 - -**Example**: `index.html` - -```html - - - My Document - - -

Header

-

Paragraph

- - -``` - -Let's say we want to store a reference to the `p` element. - -======= ## Variables In order to save the DOM references to your HTML elements, you must store them in variables. @@ -42,7 +17,6 @@ var varName = value; To define an empty variable, just define the type of variable and name, and end with a semicolon (e.g `var varName`). - #### `var`, `let`, and `const` In some programming languages, like Java and C++, when declaring a variable you must specify the data type (integer, String, float, boolean, etc.) In JavaScript, a variable does not need to be specifically defined in its declaration. Instead, the keyword `var`, `const`, and `let` define how a variable can be used and/or changed. @@ -54,6 +28,25 @@ In some programming languages, like Java and C++, when declaring a variable you When storing DOM variables, take a moment to think about which type of variable you would use to store DOM references to HTML elements. +**You should use the `const` variable type!** We don't want to be able to redefine or change the variable holding the reference to our HTML elements. This is why we should choose the `const` variable type. + +Let's look at an example using the `querySelector` method. + +**Example**: `index.html` + +```html + + + My Document + + +

Header

+

Paragraph

+ + +``` + +Let's say we want to store a reference to the `p` element. - Since there are no attributes attached to this element, no `id` or `class` name, this eliminates the use of the `getElementById` method. - We can only use the `querySelector` or `querySelectorAll` method. However, since there is only a single instance of a `p` element, we will elect to use the `querySelector` method with the **element selector** associated with its tag name `p`. @@ -63,4 +56,3 @@ const pElem = document.querySelector('p'); ``` Notice that we use either **single or double quotation marks** as a parameter to the `querySelector` method. ->>>>>>> e2f29adbb9d5296ce97708394054a43baee78ad4