I tried to touch JavaScript Part.1 Basic processing code system

Introduction

A memorandum that summarizes what I learned in my second month as a development engineer. For that reason, I decided to move away from data science once at work and spread the word about development! I will do my best again!

↓ By the way, the articles up to the last time are here.

-14th -15th -16th

Lots of nostalgic articles! w

usage environment

This time, I tried to touch it in the following environment, including the purpose of becoming a Web application development.

--Text editor → ** Sublime Text 3 ** --Used as a place to actually write code. ――If the grammar is entered correctly, it will be colored automatically, so it will be easier to check what you wrote. --Web browser → ** Google Chrome ** --Used to check the operation of the Web application. --Open the .html file with this application and check the following items --Page view → How it is actually displayed on the screen --Console → Situation including the processing result step by step to identify whether the code is written correctly (whether the desired processing is performed correctly), and if not, where the error etc. is occurring. confirm

How to define variables / variables

Variable definition

--JavaScript basically declares a variable in this way regardless of the type of data stored in that variable.

var variable name; 

--Assigning a numerical value to a variable is the same as in Java. Place a value to assign a variable to the right side on the left side, and connect it with the ** "=" operator **.

Variable name=Value to assign to variable; 

--For the numeric operator, you can use the same one as Java (for details, see Operator. Described in% E5% AD% 90)).

About variables

--The string is ** enclosed in single quotes and placed on the right side ** (** double quotes in Java **) --No problem occurs even if you enclose it in double quotes. --But in .html files, double quotes are used when assigning string values ――The development team recommends ** single quotation marks because it is difficult to identify when coding using JavaScript by enclosing it in </ script> in the .html file. Or ** --The coding rules are unified by the development team (By unifying, ** you can identify the location of the error, reduce the risk of bugs, and put the code in the first place for everyone on the team. To make it easier to read **), follow that rule --If you want to combine strings, you can use ** "+" ** to combine them, just like Java. --It is also possible to combine character strings and numerical values. However, be aware that you may get different results than you are looking for.

    ```
    var a = 5 + 6 ; 
    console.log(a) ; 
    
    var b = '5' + '6' ; 
    console.log(b) ; 
    
    var c = '5' + 6 ; 
    console.log(c) ; 
    ```

--- a means adding numbers to each other, so 5 + 6 = 11 The output result will be ** 11 **. --b is the process of combining character strings, so the output result is ** 56 **. --c performs the process of ** combining the numerical value 6 with the character string "5" **, so the output result is ** 56 **.

scope

Like Java, JavaScript has the concept of scope.

What is a scope?

-** Scope ** ... Variable ** scope **. Where can I refer to it and where can I not?

Global and local variables

Like Java, variables can be categorized by scope.

--Global variables: Variables that can be called and used from within the program (because they are declared outside the function). --Local variables: Variables that are declared inside a function and can only be used inside that function.

Rules for using variables (updated as appropriate)

--Do not use global variables as much as possible ――Since you can refer to it from anywhere, it will be inconvenient to use. --Instead of using global variables ** Is it possible to substitute an immediate function ** First, consider Function Details are described in 96% A2% E6% 95% B0))

function

--Function: A concept for making multiple processes reusable together (similar to ** method ** in Java). --The basic writing method is as follows.

function The name of the function you want to create(argument) {
The instruction you want to execute; 
return Return value;← Be sure to write when you want to check whether the processing up to that point is done correctly step by step on the console etc.
  }

--There is no need to set a name for the function → ** Anonymous function **

Immediate function

--Immediate function: A function written to ** immediately use only there ** without setting a function name. ――The way to write is as follows.

```
(function The name of the function you want to create(argument) { 

The instruction you want to execute; return Return value;← Be sure to write when you want to check whether the processing up to that point is done correctly step by step on the console etc. })(); ``` --Enclose the entire function in ** () to close it in scope **. --Advantages of using immediate functions --You can write a function without thinking about duplicate function names. = The possibility of error occurrence can be reduced

Control statement

What is a control statement?

--Control statement: A statement that sets processing according to conditions such as "If 〇〇 (condition), perform processing A, otherwise, perform processing B" (= ** conditional branching or repetition such as Java) Same as processing **). --The following two examples of typical control statements. --if statement --for statement

How to write control statements

The basic writing style is ** almost the same as Java **.

if statement

if (Conditional expression to execute) { 
The instruction you want to execute; 
    } else if (Conditional expression to execute) { 
The instruction you want to execute; 
    } else { 
The instruction you want to execute; 
} 

--"Else if" is described only when you want to set the condition multiple times. --The instruction is executed when the conditional expression is true, it is judged whether the next conditional expression is true when it is false, and the instruction defined there is executed when the condition is finally satisfied.

for statement

for (Initialization (state at the start of execution);Conditional expression to execute;Update command when completed) { 
The instruction you want to execute; 
}

--It is executed repeatedly while the conditional expression to execute is true. -"Update instruction when completed" describes an instruction to update the variable used in the conditional expression when the executed execution is completed.

operator

In particular, operators are often used in control statements, so each operator is summarized here.

Four arithmetic operators

The basics are the same as Java.

-"+": Add (additional) -"-": Subtract (decrease) -"*": Multiply (multiply) -"** / ": War (excluding) -"% **": Too much division (surplus)

Comparison operator

Except for equations, the basics are the same as Java

-"> = ": The left side is more than the right side -"> ": The left side is larger than the right side -" <= ": The left side is below the right side -"<": The left side is smaller than the right side

The equation basically uses the following two in JavaScript.

-"** === ": Left side and right side are equal (used when the data type is the same) -"! == **": Left side and right side are not equal

Note that the following operators used in Java are used slightly differently in JavaScript.

Logical operators in JavaScript

The basics are the same as Java.

-"** && **": Left side and right side

Arrays and objects

Array

In JavaScript, you can use arrays to store grouped values.

--How to write an array

```

Array name= ['element', 'element', 'element',・ ・ ・] ``` --The number of each element in the array is ** 0th, 1st, 2nd ... ** in order.

How to operate an array

Here are some instructions that you can use when you want to manipulate an array.

//Output the nth element of the array
console.log(Array name[n]) ; 

//Output all elements of the array
console.log(Array name) ; 

//I want to add an element of an array
Array name.push('Elements to add') ; 

//I want to delete an element of an array
Array name.splice(Element number where the element you want to delete starts,Number to erase) ; 

//I want to check / output the number of elements that make up an array
console.log(Array name.length) ; 

object

The original meaning of an object

--Object ・ ・ ・ Object, object, purpose (from weblio English-Japanese dictionary)

Objects in JavaScript

--Object: A concept for handling values by grouping names and values as a set. --Basic writing

```

var variable name (object name)= { Key (name):Value, Key (name):Value, ・ ・ ・ } ``` --Keys and values correspond to each other (write the corresponding ones with **: **) --How to call a specified value in an object → Either of the following two methods is OK

```

Variable name['Key (name)'] ; Variable name.Key (name); ``` --Overwrite the specified value in the object → Basically, just ** call and assign **.

```

Variable name['Key (name)'] =Value to substitute; Variable name.Key (name)=Value to substitute; ``` --Output object information

```
console.log(object) ; 
```

-** Method ** ・ ・ ・ Function written in the object

Try touching JavaScript

Conclusion

It was easier to use than Java!

Reason

--Compared to Java, it was easier to build the environment (probably because the environment specified at the time of learning was significantly different?) → In Java, there were many correspondences such as setting the local server host, setting at the time of execution on the server, and installing the package of Visual Studio 2017 separately for cooperation with DB, which was difficult. ――By the way, the environment used in Java looks like this --Editor → eclipse 2019-06 --Server host → Tomcat 9.0 --Use DB → MySQL

--Variable definition was easy because there is no need to declare the type of the variable

→ In Java, it was necessary to specify the data type as well → Because you can save the trouble of setting the data type, bugs may occur easily ...? (Because you can define it for the time being and write the code to a certain extent even if you do not know the data type)

Afterword

I thought it was difficult to develop, but I realized that there are some languages that are easy to get along with. I will study at my own pace so that I can get along with this difficulty little by little ^^

see you!

P.S.) This time, I aimed for a simple is the BEST postscript! w

Recommended Posts

I tried to touch JavaScript Part.1 Basic processing code system
I tried to touch JavaScript Part.2 Object-oriented
I tried migrating Processing to VS Code
I tried to chew C # (basic of encapsulation)
I tried to increase the processing speed with spiritual engineering
[Rails] I tried to implement batch processing with Rake task
I tried source code analysis
I tried to verify yum-cron
I tried OCR processing a PDF file with Java part2
I tried to make a machine learning application with Dash (+ Docker) part2 ~ Basic way of writing Dash ~
I tried to implement Ajax processing of like function in Rails
I tried to write code like a type declaration in Ruby
[Ruby] Tonight, I tried to summarize the loop processing [times, break ...]
I tried low code IoT with OKI AE2100 & Node-RED. Part 2 Construction
I tried to chew C # (indexer)
Delegate some Java processing to JavaScript
I tried to summarize iOS 14 support
Introduction to Ruby processing system self-made
I tried to interact with Java
I tried to explain the method
I tried to understand nil guard
I tried to summarize Java 8 now
I tried to chew C # (polymorphism: polymorphism)
I tried to explain Active Hash
I tried to summarize the methods used
I tried to introduce CircleCI 2.0 to Rails app
I tried to summarize Java lambda expressions
I tried to get started with WebAssembly
I tried to solve AOJ's Binary Search
I tried to implement the Iterator pattern
I tried to summarize the Stream API
I tried to build AdoptOpenjdk 11 on CentOS 7
What is Docker? I tried to summarize
I tried to build Ruby 3.0.0 from source
I tried to use Selenium like JQuery
I tried to implement ModanShogi with Kinx
I tried to make a machine learning application with Dash (+ Docker) part3 ~ Practice ~
A story when I tried to make a video by linking Processing and Resolume
[Rails / JavaScript / Ajax] I tried to create a like function in two ways.
[JavaScript] The strongest case when I tried to summarize the parts I do not understand