JavaScriptにも関数がある。けど、文法は違う。
pythonとJavaScriptは似ているなぁ、と思いませんか？
ちょっとwikiで調べて見ると。
pythonが出てきたのは1991年、JavaScriptは1995年だそうです。
閑話休題。
JavaScriptで関数を使って命令をしましょう。
別のファイルにjsを書いて、htmlで読み込む。
CSSを学んだときに、外部ファイルからCSSのコードを読みとったことがありますか？
javascriptでも同じことができます。
jsとはjavascriptのことです。
新しいファイルをつくって、次のように書いてみましょう。
function aikotoba() {
let words = prompt('合言葉を唱えてくださ。');
let check = confirm('合言葉は' + words + 'ですね？');
if (words == 'ちちんぷいぷい'){
alert('おめでとうございます！扉が開きました！');
} else {
alert('失敗しました。合言葉は「ちちんぷいぷい」です。');
}
}このコードを、htmlファイルをつくって実行します。
htmlファイルをつくって、次のコードを書いてhtmlをブラウザで開くと・・・
<!DOCTYPE html> <html> <head> <title>関数を読み込むよ</title> </head> <body> <script src='5.js'></script> <script> aikotoba(); </script> </body> </html>
成功しましたか？
src=’5.js’ の「５」はパソコンに読み込んでもらいたいjsファイルの名前です。
自分が作ったjsファイルの名前を書いてください。
関数functionを使ったらreturnしてもらう（基本、戻り値はreturnで表現しよう）
新しいhtmlファイルをつくりましょう。
pythonと違い、コメントアウト（コードにメモを残せるけどパソコンには読み取らせないしくみ）するために#でなく//を使います。
<!DOCTYPE html>
<html>
<head>
<title>関数を読み込むよ２</title>
</head>
<body>
<p>関数に引数をもたせて、returnによって入力に対する出力を得ることができます。</p>
<script>
a = Number(prompt("初めの数字は？")) //Numberは文字列を数値に変換するメソッド
b = Number(prompt("かける数字は？"))
function calc(a,b){ //aとbを引数にする関数を定義するよという宣言
return a + b; //呼び出されたらa+bを出力してね。Numberを使わないと、これが文字列の連結になってしまう。
}
let ans = calc(a,b);
//calc(a,b)はいつ実行されているの？
window.alert('答えは'+ ans);
</script>
</body>
</html>
pythonとは異なり、関数を定義するときには
functionと書き、出力してほしい値を
returnで指示します。（もしくは＝を使って値を定義します。２つの表し方があるようです）
引数（ひきすう）を戻してね！という指示です。
pythonとは書き方が違う、です。
returnはよく省略されますが、できるだけ「returnつかえるかな？」と考えてみましょう。
基本、使うようにしたいなぁとおもいます。（必要なときに使えるように）
JavaScriptでも出てくる、関数と仲良しのグローバル変数とは？？？
あるファイルの中で定義したものを、別のファイルで使えるようにする（パソコンが「この文字の意味は別のファイルのここで定義されている」と理解できるようにする）
これ見た目、pythonの書き方です。（出力をreturnで表さない）
ごちゃごちゃにならないようにしたいですね。
jsファイルに次のような指示が書かれている時、let ansで指定された値は関数の外でも使える、というもの。
let ans;
function calc(a,b){
ans = a*b
}しかし実行したところ、let ansがなくても実行されました。
よくわかりません。
他にもローカル変数というものがありますが、よくわかりませんでした。
原則、関数の中で宣言された変数の有効範囲はその関数の中だけだということです。
なので、関数の内部で宣言した変数と同じ名前の変数が関数の外でなら使える、ということです。
アロー関数（関数をつくっって出した値を使いたい）
次のコードを比べてください。
<!DOCTYPE html>
<html>
<head>
<title>昔の書き方、新しい書き方</title>
</head>
<body>
<p>関数に引数をもたせて、returnによって入力に対する出力を得ることができます。</p>
<p>計算結果は<span id="result1"></span>です。</p>
<p>こっちの計算結果でも<span id="result2"></span>です。</p>
<p>いやいやこっちの計算結果でも<span id="result3"></span>ですよ。</p>
<script>
let a = Number(prompt("初めの数字は？")) //Numberは文字列を数値に変換するメソッド。＋をつかうと数値が文字列として処理されてしまう。
let b = Number(prompt("かける数字は？")) //数値を文字列にするときはStringを使う。
//１つめ
function calc1(a,b){
return a+b;
}
//pythonであればここにcalc1(a,b)を書かないと実行しないが、jsはかかなくてもよい？
document.getElementById("result1").innerHTML = calc1(a,b); //これをfunctioon calc(a,b)の中に入れたら動かない。
//２つめ（アロー関数）
let calc2 = (a,b) => {
return a+b;
}
//アロー関数の表記だと、関数を実行するコードを書かなくても内部で関数の通りに処理をしてくれることが表現できている？
document.getElementById("result2").innerHTML = calc2(a,b);
//３っつめ。アロー関数っぽい使い方。
let calc3 = function(a,b){
return a+b
}
document.getElementById("result3").innerHTML = calc3(a,b);
</script>
</body>
</html>二つ目の書き方は、新しい書き方です。
どちらも使えますが、新しいものがこれから使われていくとおもわれます。
なのでこれからはfunctionを使わずにアロー関数で表現していこうとおもいます。
３つ目の書き方は、１つ目と２つ目の合いの子です。
参考
全て関数、省略されているだけ？
見比べてみてください。
<!DOCTYPE html>
<html>
<head>
<title>昔の書き方、新しい書き方</title>
</head>
<body>
<p>名前は<span id="result1"></span>ですね。</p>
<p><span id="result2"></span>で合っていますね？</p>
<script>
let name = prompt("名前を入力してください")//promptという関数だとみてよい？
//関数がなくとも動いている・・・・
document.getElementById("result1").innerHTML = name;
//関数として表記。
let f = (name)=>{
document.getElementById("result2").innerHTML = name;
}
f(name); // これがないと動かない
</script>
</body>
</html>関数として表記しなくとも動くものがあります。
勝手に動いてくれるものが何で、しっかり書かないといけないものは何なのか、区別が着くまでは全て関数で表してもよい、かもしれません。
函数をもう一度丁寧に（return？？？は書く必要があるか）
基本は引数と戻り値を明示する
何か（引数）を入れたら何か（戻り値）が帰ってくるものが函数でした。
ここからはjsファイルで実行してください。
atomでcommand + R ですぐに結果がみられます。
let area = (radius)=> { //area という函数にradiusという引数をもたせます。
return radius * radius * 3.14 // 函数が実行されると、返り値となってでてくる値
}
console.log(area(5)) //引数を５にして実行したものを表示する。これが基本です。
console.logで函数が「動いて」います。
もし returnを書かなかったら？
//returnで戻り値を明示しなくちゃいけない例（函数）
let area2 = (radius)=> { //area という函数にradiusという引数をもたせます。
radius * radius * 3.14 // returnがないとundefinedがでてくる。
}
console.log(area2(5)) //引数を５にして実行したものを表示する。結果がundefinedとなります。
returnを使って返り値を明示しなくてはいけない例です。
比較：メソッドは引数を明示しても、戻り値を明示しない。
メソッドと比べてみてください。
なぜ函数を使うときにはreturnを書く理屈を感じられます。
//returnを書かなくてもいい（書いてはいけな）例（メソッド）
let myText = 'I am a string';
//myTextのstringをsausageに置き換えるメソッド（引数）
//引数はstringとsausageでmyTextは引数stringを引き出す場所を指定している。
//戻り値はreturnでは表されない（すでに決まっているため？）
//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace
let newString = myText.replace('string', 'sausage');
console.log(newString);
引数を明示しないで函数を使う例（returnがいらないメソッドが函数に含まれている）
引数がなくても函数です。
let msg = () => { //関数の定義
console.log("つきがきれいですね") //メソッド
}
msg(); // メソッドとは違い、函数を実行するためには必要。関数の中にconsole.logがあり、関数を動かさないとconsole.logが働きません。
letで「つくった」函数を、msg();で「動かす」必要があります。
函数を動かせば、「returnが必要ないメソッド」が動きます。
函数をつくったからといってreturnが必要にならない例です。
函数をメソッドで動かすときにreturnは必要か。
やってみましょう。
//メソッドで函数を動かしてもらう例
let msg2 = () => {
return "月が綺麗ですね" //returnがないとundefinedになる
}
console.log(msg2());はい、returnは必要でした。
結論、関数の中では「勝手に動くメソッド」以外、returnをかかないと函数を動かしても何もでてこない。
ちなみにですが。
関数の定義
関数の実行
ではなく
（関数の定義）（）;と書くことで函数を実行させるコードを書かなくても良い書き方があります。この書かれ方をされた函数を即時関数といいます。
呼び出さなくてもよい。
関数内で定義するか、関数の外で定義するか。
次の通りです。
関数内で変数を定義するかどうか、letの場所で結果が変わることがあります。
ということだけ覚えておいてください＾＾
//関数内で定義した変数は関数の外で使えない。
let greet1 = () => {
let msg1 = 'こんにちは'
console.log(msg1)
return;
}
greet1(); //こちらは実行される。
//console.log(msg1) // msg is not defined というエラーが出る。
//関数の外で定義した変数は関数の外でもちろん使える。
let msg2 = 'こんばんは'
let greet2 = () => {
console.log(msg2)
return;
}
greet2(); //こちらは実行される。
console.log(msg2) // msg is not defined というエラーが出る。
//関数の外と中で名前が同じ変数がある場合、函数を呼び出したときには函数内の変数を、変数を呼び出したときには函数の外の変数をとってくる。
let msg3 = 'おはよう'
let greet3 = () => {
let msg3 = 'ございます'
console.log(msg3)
return;
}
greet3(); //こちらは実行される。
console.log(msg3) // msg is not defined というエラーが出る。
コメント