Tell me! How to write JavaScript
JavaScript is a type of programming language used in web production.
As other language, there is HTML to make the web page itself and CSS to decorate the web page.
JavaScript is a language that controllable movement of screen behind scene.
Some people may not understand what it is, so let’s take a look at a simple example.
sample code
HTML
<html>
<head>
<script>
function onClickButton(text) {
alert('clicked ' + text)
}
</script>
</head>
<body>
<button onclick="onClickButton('here')">Push it.</button>
</body>
</html>
I placed a button on the screen.
When you press the button, it will be like this:
A message was displayed at the top of the screen.
JavaScript program displayed it.
Specifically, I placed a button with <button>, and it has ‘onclick’ attribute.
This attribute value is “onClickButton(‘here’)”.
This means that when the button is clicked, it calls a function written in Javascript called onClickButton.
By the way, it is called ‘event’ that the user performs some action on web page like onclick.
In addition to clicking, JavaScript can detect actions such as scrolling web page, hovering over or releasing input fields, or pressing or releasing keys on the keyboard.
By making use of these events, you can add some movement with javascript according to user’s action.
By the way, I said that calls function, but what is a function? It seems to be a little difficult.
What is function?
For example,
if you take tires and engines and chassis, etc to the car factory, car will be manufactured.
If you put dirty clothes in the washing machine, beautiful clothes will come out.
If you put money in a vending machine, juice will come out.
If you put frozen bread in the microwave, warm bread will come out.
You can think that ‘function’ is like these car factory, washing machine, vending machine, or microwave.
In other words, a function returns something else if you give something.
And something given to a function is called an argument. Also known as parameter.
And something returned by the function is called a return value.
In the case of above sample code,
When the button is pressed, a function called ‘onClickButton’ will work.
After ‘onClickButton’, I wrote “(‘here’)”.
‘here’ is the argument.
In other words, I gave the letter ‘here’ to the function ‘onClickButton’.
(In javascript, characters are enclosed in a single quote.)
The contents of the onClickButton function are written in <script> in <head>.
JavaScript
function onClickButton(text) {
alert('clicked ' + text)
}
Let’s learn syntax of function using this as an example.
First, you write ‘function’. And followed by function name.
A half-width space is required between ‘function’ and function name.
And next, write ‘()’. Argument name is written in this.
In the above case, ‘text’ is argument name.
If you need multiple argument, you can write like ‘function onClickButton(arg1, arg2, arg3)’.
‘()’ Is needed even if arguments are unnecessary. write like ‘function onClickButton()’.
Function name can be named freely. But when you call the function, you need write same name.
Argument name also can be named freely. But when you call the function, you need write value of argument like this:
onClickButton(‘here’), onClickButton(1, true, ‘sample’)
Argument name is referenced into the function.
Did you understand so far?
Next, let’s write ‘{}’. You can write what you want to do into this braces.
This time, “alert(‘clicked ‘ + text)” is written.
‘alert()’ is a function for display messages on the screen as shown in the image above.
Yes, this is also a function.
‘alert()’ is a standard function provided in javascript.
Standard functions already have names and arguments. All you can do is call according to the spec.
The alert() argument is “‘clicked ‘ + text”.
This means string concatenation.
If argument is ‘here’, the message is displayed like ‘clicked here’.
This is what javascript is doing when the button is pressed.
Maybe some people think that “Why ‘text’ argument become ‘here’?”.
Text is an argument, but it is also called a variable.
What is variable?
Think of variable as a box in the world of programming.
Variable is box what put in something.
When you call ‘onClickButton’ function, the argument is ‘here’. But look at defined function, the argument is “text”.
This meaning is that put in the letter ‘here’ to variable called “text”.
If you write “onClickButton(‘test’)” and call it, the contents of this variable is ‘test’.
Not only argument, you can also define variable into function like below:
JavaScript
function calculate() {
// define a variable named number1
var number1 = 10
// define a variable named number2
var number2 = 15
// return value is 150
return number1 * number2
}
In this example, I made variable called ‘number1’ and ‘number2’.
When you define a variable, first write ‘var’.
To explain in detail, there are ‘let’ and ‘const’ in addition to ‘var’, but I would like to introduce this in another article.
Next, write a half-width space and variable name.
And next, write ‘=’ and value what you want to put in the variable.
In the above ‘calculate()’ function case, put in ’10’ into ‘number1′ variable, and put in ’15’ into ‘number2’ variable.
And finally, I wrote ‘return number1 * number2’. ‘return’ means return value.
And in programming, ‘*’ means multiplication.
In other words, this function return 150. (10 × 15 = 150)
Summary
If you create web page only HTML and CSS, it is just a static page.
But add javascript, you can create dynamic page.
JavaScript can do many things.
For example,
it can detect events, and action according to it.
It can create and remove HTML element.
It can communicate with server.
You can also get data from database on server, and rewrite HTML according to get data.
To learn JavaScript, you need to understand ‘function’, ‘argument’, ‘return value’, and ‘variable’.
There are various programming languages such as Java, PHP, Python, Ruby, etc.
Although the way of writing is different, all of this idea is the same.
If you know this, you can also apply it to other programming languages.
Programming languages have control structure such as conditional branch and loop.
So I will introduce them in the future.
Shitakke!
- JavaScript is a type of programming language used in web production.
- It is important to remember the concept of ‘function’, ‘argument’, ‘return value’, and ‘variable’.
- If you call a function with an argument, a return value will be returned.
- A variable is like a box put in values.
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy