2021-11-24

JavaScriptイベント

JavaScript

イベントというのは、HTML要素上に発生する出来事である

JavaScriptで、イベントを呼び出せる

イベントは、ブラウザの処理かエンドユーザーの操作に分けられる

例えば、サイトページの読み込みが完了した

HTMLのinputタグが変えた

HTMLのボタンがクリックされた

イベントが呼び出されると、何等かの処理を実施することができる

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

</body>
</html>

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

</body>
</html>

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

<p>ボタンクリックして、 <em>displayDate()</em> 関数を実施する</p>
<button onclick="displayDate()">ここクリックしてください</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

イベントはバリデーションチェック、エンドユーザー入力、エンドユーザー操作、ブラウザ動作などに利用することができる

サイトページ読み込みするときに、イベントを呼び出す

サイトページが閉じられるときのも

エンドユーザーがボタンをクリックしたときも

エンドユーザーが入力したフォームの内容チェックなど

JavaScriptイベント実行させる方法としては、

HTMLのイベント属性で、そのままJavaScriptソースを実施させることはできる

また、JavaScript関数を呼びして、処理を行う

定番のイベント

イベント	詳細
onchange	HTML 要素変更されるとき
onclick	エンドユーザーが HTML 要素をクリックするとき
onmouseover	エンドユーザーがHTML要素上にマウスでコンソールを移動させるとき
onmouseout	エンドユーザーがHTML要素上からマウスでコンソールを離れるとき
onkeydown	エンドユーザーがキーボードのキーを押下したとき
onload	ブラウザがサイトページを読み込み完了後

2021-11-22

JavaScriptネームスコープ

ネームスコープとは、アクセスできる変数の集合である

JavaScriptにて、オブジェクト及び関数も変数であるので、ネームスコープは、アクセスできるオブジェクト、関数、変数の集合である

関数内部で生成した変数のネームスコープはその関数内部だけになる

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

<p>関数内部変数だから、関数の外では利用できない</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName のデータ型は" + typeof carName;
function myFunction()
{
var carName = "Volvo";
}
</script>

</body>
</html>

一方、関数外の変数ですと、サイトのすべてscript及び関数で利用できる

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

<p>関数外の変数は、すべてのscript及び関数内部でも利用できる</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction()
{
document.getElementById("demo").innerHTML =
"出力 " + carName;
}
</script>

</body>
</html>

そして、関数内部でも、全体的に利用できる変数を生成することは可能である

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

<p>
最初から変数宣言しなかったら、すべてのところで利用できる変数になる：
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
"出力 " + carName;
function myFunction()
{
carName = "Volvo";
}
</script>

</body>
</html>

関数内部生成した変数は、関数実行される際に生成され、関数処理後に処分される。関数外部の変数は、サイト閉じられたときに処分される。

関数の引数は、関数内部だけ利用できる。

関数外部変数は、全部windowオブジェクトの属性になる

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

<p>
HTMLにて、すべての関数外部変数は、window の変数になる
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
"出力 " + window.carName;
function myFunction()
{
carName = "Volvo";
}
</script>

</body>
</html>

まとめ、

ローカル変数：関数内部で、var経由で生成した変数

グローバル変数：関数外部で、var経由で、生成した変数

宣言してなかった変数は、グローバル変数になる

letとvarの区別

function varTest() {
var x = 1;
if (true) {
var x = 2; // 同じ変数
console.log(x); // 2
}
console.log(x); // 2
}

function letTest() {
let x = 1;
if (true) {
let x = 2; // 違う変数
console.log(x); // 2
}
console.log(x); // 1
}

2021-11-19

JavaScript関数2

JavaScript

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

<!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

2021-11-18

JavaScriptオブジェクト

JavaScript

JavaScriptにて、オブジェクトというのは、「属性」と「メソッド」を所持するデータのことである

生活の例で、考えると、「車」は一つのオブジェクトである

属性としては、下記ものがある

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white

メソッド（処理）としては、以下である

car.start()

car.drive()

car.brake()

car.stop()

すべての車には、上記属性ありながら、それぞれ違うし、メソッドもあるが、実行されるタイミングが違う

JavaScriptにて、複数データが入っている変数として、考えてもいい

普通変数→var car = "Fiat";

オブジェクト→var car = {name:"Fiat", model:500, color:"white"};

ソース例を見てみると、

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

<p>JavaScript オブジェクト生成</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 今" + person.age + " 歳である";
</script>

</body>
</html>

見栄えをきれいにする書き方としては、

オブジェクトはデータの容器で、「name : value 」の形で、表現される

そのデータを利用方法としては、下記ソースを参照してください

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

<p>
オブジェクトの属性を利用する方法が二つある
</p>
<p>
.property または ["property"]という形で
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

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

<p>
オブジェクトの属性を利用する方法が二つある
</p>
<p>
.property または ["property"]という形で
</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>

「name : value 」のnameが文字列で、valueには、nullでも、undefinedでもOK

var bird = {
name : "Amy",
age : 1,
color : "white",
skill : function () {
console.log("Fly");
},
nickname : null,
play : undefined
}

メソッドは関数のようなもので、オブジェクトに保管される

利用する方法は、関数と同じ（）つければOK

ソース例は以下である

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

<p>オブジェクトメソッド生成して利用</p>
<p>オブジェクトメソッドは関数として、定義して、オブジェクト属性として保管</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

もし実行命令（）つけずに、出力すると、関数定義そのものが呈示される

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

<p>オブジェクトメソッド生成して利用</p>
<p>オブジェクトメソッドは関数として、定義して、オブジェクト属性として保管</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "（）つけずに、関数定義を出力" + person.fullName;
document.getElementById("demo2").innerHTML = "（）つけると、関数実行結果を出力" + person.fullName();
</script>

</body>
</html>

先にオブジェクト宣言する方法もある

var person=new Object();
person.name='太郎'；
person.sex='男'；
person.method=function(){
return this.name+this.sex;
}

属性及びメソッドの名前は唯一性があり、最後に賦与される値が保存される

var person = {
name: "太郎",
age: 18,
sex: "男",
play: "football",
play: function () {
return "like paly football";
}
};

結局playがメソッドになる

2021-11-17

JavaScriptデータ型

JavaScript

値の類で、文字列（String）、数字(Number)、真偽(Boolean)、空っぽ（Null）、未定義（Undefined）、Symbol（ES6から追加された型で、唯一無二のデータを表す）

データ引用の類で、オブジェクト(Object)、配列(Array)、関数(Function)

※型の変動は可能である

var x; // x → undefined
var x = 5; // 今の x → 数字
var x = "John"; // 今の x → 文字列

※文字列　「'」または「"」で括る

var carname="Volvo XC60";
var carname='Volvo XC60';

もちろん、文字列には「'」または「"」利用可能である

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

</body>
</html>

※数字

var x1=34.00; //小数点もOK
var x2=34; //

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

</body>
</html>

※真偽値

var x=true;
var y=false;

※配列

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

または、

var cars=new Array("Saab","Volvo","BMW");

<!DOCTYPE html>
<html>
<body>

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

※オブジェクト

var person={firstname:"John", lastname:"Doe", id:5566};

var person={
firstname : "John",
lastname : "Doe",
id : 5566
};

使い方

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

</body>
</html>

※Undefined と Null

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

</body>
</html>

※データ型を最初に定義できる

var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

因みに、すべての変数は一つのオブジェクトである

※

配列操作

var arr1 = new Array('a', 'b', 'c');
var arr2 = ['a', 'b', 'c' ]; //より簡潔
var arr3 = new Array( ); var arr4 = [ ]; //空っぽ配列作成
添え字に対する操作は要注意

オブジェクト操作

var people = {name : 'Tom', age : 21 , eat : function(){ } }

var people = new Object();
people.name = 'Tom';
people.age = 21;
people.eat = function(){ }

function Demo(){
var obj=new Object();
obj.name="太郎";
obj.age=12;
obj.firstF=function(){
}
obj.secondF=function(){
}
return obj;
}

var one=Demo();
// 出力
document.write(one.age);

または：

function Demo(){
this.name="太郎";
this.age=12;
this.firstF=function(){
}
this.secondF=function(){
}
}

var one=new Demo

// 出力
document.write(one.age);

※配列確認

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
document.write(typeof cars); // object

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 関数利用可能かの確認
if (Array.isArray) {
if(Array.isArray(cars)) {
document.write("該当対象は配列である") ;
}
}

または

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

if (cars instanceof Array) {
document.write("該当対象は配列である") ;
}

※nullとundefinedの出力

var x,y;
if(x == null){
document.write(x);
}
if(y == undefined){
document.write(y);
}

※基本変数とメモリの関係

var a,b;
a = "zyj";
b = a;
console.log(a); // zyj
console.log(b); // zyj
a = "はは"; // aの値を変えるが、 b に影響しない
console.log(a); // はは
console.log(b); // zyj

※オブジェクトとメモリの関係

var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name); // zyj
b.age = 22;
console.log(a.age); // 22
var c = {
name: "zyj",
age: 22
};

※ toString()で数字から文字列へ変換可能である

2021-11-16

JavaScript関数

JavaScript

後で定義される関数は、前のを覆す

function test() {
    console.log("test");
}
test();     // "test arg0 + undefined"　出力

function test(arg1) {
    console.log("test arg" + arguments.length + " + " + arg1);
}
test(1,2);  // "test arg2 + 1"　出力

足りない引数は、undefinedになる
多めの引数は、argumentsで取り出す可能である

function test(arg1) {
    for(var i=0; i<arguments.length; i++) {
        console.log(arguments[i]);
    }
}
test(1,2); // 1 2　出力

変数と関数が重複する際には、変数が勝ち

var a = 100;
function a() {
    return "function";
}
console.log(a);     // 100　出力
console.log(a());   
/*
エラー
Uncaught TypeError: a is not a function
    (anonymous function) @test.html:9
*/

匿名関数

var a = 100;
var a = function() {
    return "function";
}
console.log(a);
/* 
function() {
    return "function";
}
出力
*/
console.log(a());   // "function"　出力

関数とそのうちの変数と重複する場合

function a() {
    console.log(this);  // window{...}　出力
    this.a = 1;         //いわゆる window.a = 1，この時のwindowもとのfunction aが変数で覆される
    var a = 5;          //下記の変数は全部{}範囲内で有効である  
    a = 10;
    var v = "value"
    return "function";
}
console.log(a);         // function a {...}　出力
console.log(a());       // "function"　出力
console.log(a);         // 1　出力
console.log(v);
/*
Uncaught ReferenceError: v is not defined
    (anonymous function) @ mycolor.html:15
*/
出力

2021-11-16

JavaScript変数

JavaScript

アルファベットから開始する

$ 及び _ 記号からスタートしてもOKですが、薦めはしない

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

// ES6に詳しい人ですと、piに対して、const キーワード利用可能です。定数を表す
// const pi = 3.14;
var name="Bill Gates";
var answer='Yes I am!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>

</body>
</html>

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

<p>クリックして、変数を作って、利用する</p>
<button onclick="myFunction()">ここクリックしてください</button>
<p id="demo"></p>
<script>
function myFunction(){
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

</body>
</html>

※下記の形式でもOK

var lastname="Doe", age=30, job="carpenter";

var lastname="Doe",
age=30,
job="carpenter";

var x,y,z=1;

※var carname;のように、変数生成したが、値代入しないと、そのまま利用すると、

undefinedになる（よくあるミスである）

※再度生成しても、値が保留される

var carname="Volvo";
var carname;

ただし、下記の場合は、値が更新される

var a = 1;
var a = 'x';
console.log(a);
// 输出 'x'

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

<p>もし y=5、x=y+2を計算する。結果を表示する</p>
<button onclick="myFunction()">クリックしてください</button>
<p id="demo"></p>
<script>
function myFunction(){
var y=5;
var x=y+2;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

※2015 年以前、 varキーワードで、変数を生成する

2015年以降の JavaScript バージョン(ES6)にて、constキーワードで、定数を生成することと let キーワードで、変数生成することを許可された

※const(定数)

//定数a生成、値0を付与する
const a = 0;

//エラー（別値代入NG）
a = 1;

//エラー（再度生成してはいけない）
const a = 2;

//0を出力
console.log("a is: " + a);

※varとletの区別（適応範囲）

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同じ変数！
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 違う変数！    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}