JavaScript#Hello World,String,Function |

みんなさんお久しぶりです。最近社内でどある案件で無線を使ってSiemensのCPUをアクセスしWEB SERVERが開けるように命じられました。SiemensのCPUは標準のWEB SERVERもあり、自分でCODINGし画面を作ることもできます。そういうときは使われてるプログラム言語はHTML、CSS、Javascriptです。あとPYTHONも使える可能性もあるかもれませんのでPYTHONのメモもしますのでもし興味あればぜひみてください。

Hello World!

まずはHello WorldをPrintしましょう。

.html、.css、.js3つのFILEを同じのFOLDERで作りましょう。

<head>
</head>
<script type="text/javascript" src="script.js"></script>
<body>
</body>

.html に以上のCODEを追加しましょう。

console.log("hello world");

.jsに以上のCODEを追加しましょう。

次はいつも使ってるのBROWERで.htmlを開いてみましょう。

Command+ALT＋Iで開発ツールを開いて、Consoleをみると、

Hello worldがPrintされました！おめでとう！始めてのJavascriptプログラムが成功しました！

計算をしてみよう

console.log(4+5);
console.log(5-1);
console.log(2*3);
console.log(20/5);

今回は簡単な計算を行ってみます。

うん、見事に結果返してくれましたね。

変数と定数を作ってみよう

let variables1=10;
const PI=3.14;

console.log(variables1);
console.log(PI);

variables1=12;
console.log(variables1);

PI=5.0;//Get Error

letというKEYWORDを使って変数variables1を定義し10を入れます。
constというKEYWORDを使って定数PIを定義し3.14を設定します。

variables1は変数なので別の数字を入れ替えるのは問題ないですが、定数を変更するとエラーが出てきます。

ここは結果です。

Stringの簡単処理

let Tag1='Pump';
console.log('The name of tag1 is '+Tag1);

＋といOperatorを使えば2つのStringをつながることもできます。

これは結果です。

でもJavascript(ES6)ではもっと簡単な方法があります。これは${your variables}です。

let Tag1='Pump';
console.log(`The name of tag1 is '${Tag1}`);

結果は同じです。

Function

Functionはレシビみたいにデータを入れて、計算、条件判断などし最後は結果を戻すのです。それを使うことによってプログラムする際に同じなCODEを何回もCOPYしなくても平気です。

function printHelloWorld(){
 console.log("HELLOW WORLD!");
}
printHelloWorld();

これは凄く簡単なFUNCTIONで呼びされる度にHELLOW WORLD!をPRINT OUTするだけです。

結果です。

alert

function printHelloWorld(){
 alert("HELLOW WORLD!");
}
printHelloWorld();

POPUP WINDOWが出ます。

結果です。

Parameters

ではもしFUNCTIONになにが数値を渡したいときはどうすればいいですか？

function getAreaRect(w,h){
 console.log('the area is '+w*h);
}
getAreaRect(2,3);

このFUNCTIONはWとH、2つのParametersを受けて、w掛けるhの結果をPRINT OUTします。

結果はこれですが、毎回も違う数値を入れるとFunctionが計算されて結果を出すことになります。つまり何回もCOPYするという無駄な作業はしなくても平気です。

Return

console.log()でもちろん実行結果もらえますが、ReturnといKEYWORDを使えば結果はFUNCTIONの”中から”外に出ることができます。

function getAreaRect(w,h){
 return('the area is '+w*h);
}
var result;
result=getAreaRect(4,5);

今度は変数resultが”the area is 20″が入ってます。

Global ScopeとBlock Scope

つまり、Global変数とLocal変数ってことですね。文字で説明するよりCODEをみるのほうが早です。

const Voltage=220;
function function1(){
 console.log(Voltage);
}
function1();

ここで結果は220になります。では、Block Scopeは？

function function2(){
 var current;
 current=50.0;
 console.log(current);
}
console.log(current);

今度はERRORが出てきますーVM1571:1 Uncaught ReferenceError: current is not defined
at <anonymous>:1:13

つまりcurrentという変数はFunction内の変数なので、Functionから出るともう消えます。アクセスすることができません。

では今回はここで終わりしましょう。もう眠いので…

また今度ね！