Premise
Just started programming(1~Two months)It summarizes what I learned.
There may be things that do not work or mistakes in the actual field.
If you notice it, please let us know in the comments.
JavaScript was a word I had heard even though I didn't know programming at all. And I didn't even know it was a programming language until I started learning programming.
What is Javascript? JavaScript is the main language used on the client side You can devise the ease of use of the application on the browser and how to send the request.
-Switch screen display without page transition Mechanism of dynamic movement when the cursor is placed It's like an item appears when you hover over the global menu at the top of a web page. · Get values from the server without refreshing the screen If you like on twitter, you can see the number increase or decrease on that screen without refreshing the page.
You can develop using developer tools (developer tools, verification tools) that are displayed as soon as you execute the code in JavaScript. It's like irb in Ruby.
Right-click on the browser and select verification (you can also start it with the command option c) elements is where the HTML CSS is written JavaScript code can be executed in the Console tab
In JavaScript, variables must be defined with var, const, and let. var Redefinition, reassignable writing (not often used) const How to define a variable that cannot be rewritten (the value does not change) Cannot be reassigned or redefined let Rewritable variable (value changes) Reassignment is possible, but redefinition is not possible
Let's think about the case of team development in the psychology of the person reading the code. ** If defined by var **
var sample = "Hello"
sample = "Good morning"
//Reassignment OK
var sample = "Good evening"
//Redefinition OK
var is a rewritable variable definition method that allows variables to be redefined and reassigned. Does the defined value change on the way? Does the change affect other functions? It is not often used because it is not possible to visually understand the contents of the code. This is because you can't figure out how to handle variables without reading the entire code. ** If defined by let, const **
const sample = "Hello"
sample = "Good morning"
//Reassignment NG error appears.
const sample = "Good evening"
//I get a redefinition NG error.
let sample = "Hello"
sample = "Good morning"
//Reassignment OK The value changes as good morning.
let sample = "Good evening"
//Reassignment NG error appears.
** const ** cannot be redefined or reassigned. You cannot redefine, but you can reassign ** let **. We know that const is a variable and its value that will never change, that is, a value that should not be changed. let From now on, you can see that the assigned value will change due to reassignment. It is a great advantage to know at a glance what the value of a variable is.
Isn't it the same as redefining and reassigning? Didn't you think? I'm the same! Redefinition and reassignment only change the value inside, right? Even if you don't bother to redefine, the value changes by reassignment, so isn't it okay to use var instead of let? I thought so. The clear difference between the two is whether they can be redefined. Redefinition can be unconsciously defined without being conscious. What if you forget the variable name you defined when you first wrote the code for a similar process and inadvertently used the same variable when writing another? The first variable is changed unintentionally. Therefore, if you use let, you can rest assured that an error will occur even if you inadvertently redefine it.
There are two methods ・ Use + to concatenate each value · Use template literals What is a template literal? Ability to insert a variable into a string by enclosing it in backticks (shift + @) in JavaScript syntax
What you can do with template literals </ strong>
Variables can be embedded in strings
You can insert line breaks
You can create HTML elements
Example
const name = "nako"
const age = "29"
//+When connecting with
const introduction = "my name is" + name + "、" + age + "I'm old."
console.log(introduction)
My name is nako, 29 years old.
//When connecting with template literals
const introduction = "my name is${name}、${age}I'm old."
console.log(introduction)
My name is nako, 29 years old.
Writing in template literals reduces the amount of description.
if statement
if(1){
Processing when true
}else if(2){
1 false 2 Processing when true
} else{
1,2 Processing when both are false
}
The conditional expression is enclosed in () The processing inside {} is performed. Describe multiple conditions with else if.
const list = [] Define an array console.log (list) Get the entire array console.log (list [2]) The value corresponding to 2 of the element of the array can be retrieved (it starts from 0 like ruby, so in this case it is the 3rd element)
For iterative processing of JavaScript for statement forEach () function there is. The for statement is similar to the times method in Ruby, and forEach is similar to the each method.
In JavaScript, iterative processing uses for statement for ([Initialization expression]; [Conditional expression]; [Additional expression]) { Repeated processing }
Initialization formula Define variables to be used in the for statement. This variable is now referenced to determine how many times it has been processed. Conditional expression Specify how many times the for statement processing is repeated. Processing continues as long as the return value of this conditional expression is true Addition formula You can describe the increase / decrease of the variable defined as the initialization expression. If i = i + 1, 1 is added every week and the process is executed. i = i + 1 i + = 1 i ++ all have the same meaning
Process flow (1) Define variables in the initialization formula. (This variable is used to determine how many times it is processed) (2) If the conditional expression is true, process it. (3) After processing, the addition formula is performed. (4) If the conditional expression is true, it returns to and repeats until it becomes false. Summary Define variables for repetition in initialization formula Define the condition for repetition in the conditional expression (describe how many times it repeats) After processing, the variable is processed by the addition formula, and the processing is performed again from the beginning. The process is repeated until the conditional expression is no longer satisfied. (The conditional expression is an expression that describes the conditions for determining the number of repetitions.)
In Ruby, each method JavaScript uses the forEach function to describe the iterative processing of an array. ** forEach function ** Function (method image) used when iterating over each element stored in an array Array .forEach (function (value) { processing }) function is a function value is an array element In this case, the argument is replaced with the element each time the subscript 0 to the last element is repeated. Since it is difficult to understand, a concrete example
animals = ["dog", "cat", "bird"]
animals.forEach( function(item) {
console.log(item)
})
dog
cat
bird
Is output.
All the elements in the animals array are passed in order by the forEach function with item as an argument.
・ What can JavaScript do? Display and value update without update Menu display and twitter likes ・ How to use JavaScript JavaScript code can be executed in the verification console There are 3 types of variable definitions depending on whether redefinition or reassignment is possible, var const let Iterative processing has 2 patterns for statement and forEach function In Ruby, the for statement is the image of times, and for Each is the image of each.
Recommended Posts