JavaScript関数2 - 一白山中

関数は、イベントまた呼び出されると、繰り返し利用できるソースの塊である

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テスト事例</title>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">クリックしてください</button>
</body>
</html>

関数フォーマット

function（キーワード） functionname()
{
// 実行ソース（関数そのもの）
}

関数名には、大文字小文字を区別に認識する

引数持つ関数の利用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>

<p>このボタンをクリックして、引数必要な関数を利用する</p>
<button onclick="myFunction('Harry Potter','Wizard')">ここクリックしてください</button>
<script>
function myFunction(name,job){　//関数定義する際にも、引数を順番的に指定する必要がある
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

戻り値がある関数

return キーワードで実現できる。実施されると、関数の処理が中止される。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>

<p>この例で利用される関数は、計算を行い、結果を返す</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

sayHi();
function sayHi(name,message){
    document.write("return 文実行する前");
    return;
    alert("hello" + name +"," + message);//この行の処理は実行されない
}

ある条件で、関数をただ中断することもできる

function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}

関数内部の変数は、関数内部だけで有効で、関数処理完了後に処分される。ですので、違う関数の中には同じ名前の変数でOKである。

一方、関数外にある変数はすべてのjavascript処理に利用されることは可能である。

変数の生成時間は、宣言されたときにある。終了時間は、関数内部の分は関数処理完了後にあり、関数外部の分は、サイトが閉じられたときにある。

宣言されてない変数に値を付与すると、window の一つ属性としてみられる。

var var1 = 1;
var2 = 2;

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 削除できない
console.log(var1); //1

delete var2;
console.log(delete var2); // true
console.log(var2); // 削除したので、未定義のエラーになる

シンプル計算機

var result_1;
//+
function add() {alert(1);
var a = getFirstNumber();
var b = getTwiceNumber();
var re =Number( a) +Number( b);
sendResult(re);
}

//-
function subtract() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a - b;
sendResult(re);
}

//*
function ride() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a * b;
sendResult(re);
}

// /
function devide() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a / b;
sendResult(re);
}

//pタグに値賦与
function sendResult(result_1) {
var num = document.getElementById("result")
num.innerHTML = result_1;
}

//最初の数字を獲得
function getFirstNumber() {
var firstNumber = document.getElementById("first").value;
return firstNumber;
}

//二番目の数字を獲得する
function getTwiceNumber() {
var twiceNumber = document.getElementById("twice").value;
return twiceNumber;
}

<p>シンプル計算機</p>
<table border="1" style="position:center;">
<tr>
<td>最初の数字：</td>
<td><input type="text" id="first"/></td>
</tr>
<tr>
<td>二番目の数字：</td>
<td><input type="text" id="twice"/></td>
</tr>
<tr>
<td colspan="2" >
 
<button style="width:inherit" onclick="add()">+</button>
 
<button style="width:inherit" onclick="subtract()">-</button>
 
<button style="width:inherit" onclick="ride()">*</button>
 
<button style="width:inherit" onclick="devide()">/</button>
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
</table>

チェックボックスの事例

読書：<input type="checkbox" name="checkbox" value=1><br>
書く：<input type="checkbox" name="checkbox"value=2><br>
スマホ見る：<input type="checkbox" name="checkbox"value=3><br>
ゲームする：<input type="checkbox" name="checkbox"value=4><br>
<button onclick="checkboxed('checkbox')">すべてチェック</button>
<button onclick="uncheckboxed('checkbox')">すべて取り消し</button>

function checkboxed(objName){
var objNameList=document.getElementsByName(objName);

if(null!=objNameList){
alert("すべてチェック操作");
for(var i=0;i<objNameList.length;i++){
objNameList[i].checked="checked";
}
}
}

function uncheckboxed(objName){
var objNameList=document.getElementsByName(objName);

if(null!=objNameList){
alert("すべて取り消し操作");
for(var i=0;i<objNameList.length;i++){
objNameList[i].checked="";
}
}
}

上記機能を一つボタンで実現する

var checkAll = false;
function allcheck(){
checkAll = !checkAll;
let inputs = document.getElementsByName('checkbox')
for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
}

上記debugした後

簡潔バージョン

さらに簡潔する

さらにさらに簡潔

最終の簡潔

読書：<input type="checkbox" name="checkbox" value=1><br>
書く：<input type="checkbox" name="checkbox"value=2><br>
スマホみる：<input type="checkbox" name="checkbox"value=3><br>
ゲームする：<input type="checkbox" name="checkbox"value=4><br>
<input type="button" value="すべてチェック" onclick="allcheck(this)">
<script>
var checkAll = false;
function allcheck(element){
checkAll = !checkAll;
element.value=checkAll?"すべて取り消し":"すべてチェック";
let inputs = document.getElementsByName('checkbox')
for( var index in inputs){
inputs[index].checked = checkAll;
}
}
</script>

上記を踏まえて、逆チェックの追加

読書：<input type="checkbox" name="checkbox" value=1><br>
書く：<input type="checkbox" name="checkbox"value=2><br>
スマホ見る：<input type="checkbox" name="checkbox"value=3><br>
ゲームする：<input type="checkbox" name="checkbox"value=4><br>
<button onclick="opcheckboxed('checkbox', 'checkall')">すべてチェック</button>
<button onclick="opcheckboxed('checkbox', 'uncheckall')">取り消し</button>
<button onclick="opcheckboxed('checkbox', 'reversecheck')">逆チェック</button>

ES6の新形式、⇒関数

// 通常の関数形式
function Test () {
//
}

const Test = function () {
//
}

// ⇒定義形式ですと、 function キーワードを省略できる
const Test = (...params) => {
//
}

// 一つの引数だけですと、下記の簡潔記載でOK
const Test = param => {
return param;
}

console.log(Test('hello')); // hello