JavaScriptの基本的な知識と変数（1）

プログラミング

プログラミングとは何ですか？コンピューターが特定のプログラミング言語を使用して特定の問題を解決するためにコードを記述し、最終的に結果を得るプロセス。

コンピュータープログラム

コンピューターは、コンピューター言語の一連の命令によって制御できます。

注：コードを実行できるデバイスはすべてコンピューターと呼ばれます。たとえば、ATM、携帯電話、スマートフォンなどです。

コンピュータ言語

コンピュータ言語は、人間とコンピュータの間のコミュニケーションの言語であり、人間とコンピュータの間で情報を伝達するための媒体です。

コンピュータ言語：機械語アセンブリ言語高級言語

コンピュータは最終的に、0と1で構成されるバイナリ言語を認識します。

機械語

機械語はバイナリで構成されるバイナリ言語であり、通常は0と1を指します。

ここに画像の説明を挿入

アセンブリ言語

 汇编语言和机器语言本质相同 都是直接对计算机硬件进行操作，但指令符采用英文缩写的标识符，更便于记忆和缩写

高水準言語

高水準言語とは、C ++ java Phythongo言語javascriptなどを指します。

マークアップ言語とプログラミング言語の違い

マークアップ言語は受動的に読み取られ、ロジックはまったくありません
プログラミング言語は論理的であり、積極的に読むことができます

コンピュータの基本

コンピューターの構成

ここに画像の説明を挿入

データストレージユニット

ここに画像の説明を挿入

プログラム実行のシーケンス

ここに画像の説明を挿入

プログラムの実行中は、プログラムのコードがハードディスクからメモリに転送され、CPUがメモリからデータを読み取ります。

メモリは電気を使用し、ハードディスクは機械式CPUを使用してメモリからデータを読み取ります

javascriptを知る

javascript的发明者：布兰登.艾奇，在1995年仅利用10天的时间便发明javascript,最初在网景公司命名为Livescript,后改名为javascript

javascriptとは何ですか？

クライアントで実行されるスクリプト言語。サーバーサイドスクリプト言語：Node.js（上から下に実行）

ここに画像の説明を挿入

javascriptの役割

フォームの検証
APP開発
ゲーム開発
Webページの相互作用
サーバーサイド開発

HTML / CSS / Javascriptの関係

HTML CSSはマークアップ言語であり、データを受動的に読み取ります
Javascriptは高級言語であり、データを読み取るために主導権を握り、強力なロジックを備えています。

javascriptのブラウザ実行のプロセス

ブラウザは2つの部分に分かれています：レンダリングエンジンJSエンジン

レンダリングエンジン：通常、ブラウザカーネルを指し、主にHTML、CSSなどの解析に使用されます。
Jsエンジン：Jsコードの解析に使用されます。最も有名なjsエンジン：chorme v8 engine

予防

JSエンジンは一般にコンパイラとも呼ばれます。ブラウザ自体はjsステートメントを実行しません。jsエンジンはjsステートメントを1行ずつコンパイルして実行します。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js引擎会逐行执行js代码  解析一行运行一行
        alert("尧子陌");
        alert('临风笑却世间');
    </script>
</head>

<body>

</body>

</html>

ここに画像の説明を挿入

Javascriptの構成

Javascript：ECMAscript（jsの文法コア）DOM（ドキュメントオブジェクトモデル）BOM（ブラウザオブジェクトモデル）

ECMAscript：Javascript（Netscape）およびJScript（Microsoft）のコア言語関数
DOM：ウェブサイトのコンテンツにアクセスして操作するための言い訳と方法を提供する
BOM：ブラウザと対話するためのインターフェイスとメソッドを提供します

Javascriptの最初の経験

行内js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="China" onclick="alert('中国 我爱你')">
</body>

</html>

ここに画像の説明を挿入

埋め込まれたjs


    <script type="text/javascript">
        alert("hello 中国")

    </script>

ここに画像の説明を挿入

外部リンクJS

My.js

alert('hello word')

<script src="./My.js"></script>

ここに画像の説明を挿入
予防

外部JSを使用する場合は、スクリプト要素の間にコンテンツを追加しないでください
インラインjsを使用しないようにしてください。これにより、DOM構造が増加し、ページの読み込み速度が低下します。

Javascriptコメント

Javascriptコメントは、単一行コメントと複数行コメントに分けられます

1行コメント：//
複数行コメント/ * * /

コード内のショートカットキー
ここに画像の説明を挿入

jsの入力ステートメントと出力ステートメント

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    prompt('请输入china')
    alert('恭喜你 输入的内容正确')
    console.log('2020');
</script>

</html>

ここに画像の説明を挿入

変数

変数：変数は、値を保存するための単なるプレースホルダーです。変数名を使用してデータを取得したり、データを変更したりすることもできます。

予防

本質は、データを格納するためにメモリからスペースを申請することです

ここに画像の説明を挿入

変数の使用

1.変数を宣言します
2.割り当て


<script>
    // 1.声明变量
    var age;
    // 2.赋值
    age = 18;

    // 在控制台打印
    console.log(age)
</script>

ここに画像の説明を挿入

変数の初期化

変数は同時に宣言され、割り当てられます。varは演算子であり、変数名は識別子に相当します。



    <script>
    // 声明变量的同时直接赋值
        var name = "尧子陌";
        console.log(name)


    </script>

ここに画像の説明を挿入

可変ケース

コンソールは個人情報を印刷します


    <script>
        // 声明变量
        var name ="尧子陌";
        var age = 24;
        var  sex = "男";
        var site = "南阳";
        //在控制台进行打印
        console.log(name);
        console.log(age);
        console.log(sex);
        console.log(site)
    </script>

ここに画像の説明を挿入

ユーザーが自分の名前を入力すると、Webページにポップアップ表示されます

<script>
    var username = prompt('请输入姓名');

    alert('你的姓名:' + username);
    
</script>

ここに画像の説明を挿入

可変拡張

変数を更新

可変時間が再割り当てされた後、値は最後の値の対象となり、元の値が上書きされます


    <script>
        // 初始化变量
        var age = 12;

        // 重新赋值
        age = 20;

        // 在控制台打印
        console.log(age) //20
      
    </script>

ここに画像の説明を挿入

同時に複数の変数を宣言する

複数の変数を同時に宣言します。コードの終わりはコンマで終わる必要があります


    <script>
        // 同时声明多个变量
        var name = '尧子陌',
            age = '18',
            sex = '男',
            site = '南阳';
        // 在控制台打印
        console.log(name, age, sex, site)
     </script>

ここに画像の説明を挿入

その他の状況

1.割り当てなしでのみ宣言する
2.宣言なし、割り当てのみ
3.宣言と割り当てなし

<script>
    //只声明  不赋值的情况下
    var age;
    console.log(age) //undefined

    //不声明 只赋值的情况下
    sex = 20;
    console.log(sex) //20

    // 不声明 不赋值的情况下

    console.log(num)
</script>

ここに画像の説明を挿入

変数名のルール

1.大小を厳密に区別する
2.文字、アンダースコア、数字で構成されます$
3.数字で始めることはできません
4.変数名は意味のあるものでなければなりません
5.キャメルケースの命名に従います。つまり、最初の文字は小文字で、次の単語の最初の文字は大文字である必要があります。
6.jsでキーワードや予約語を使用することはできません

注：nameを変数名として使用することはできません
ここに画像の説明を挿入

2つの変数を交換します

アイデア

1.一時変数tempを宣言します
2.numの値をtempに割り当てます
3.num2の値をnumに割り当てます
4.tempの値をnum2に割り当てます

注：右側の値は左側に割り当てられています

  <script>
        //1.声明一个临时变量temp
        var temp;

        //声明变量num num2
        var num = 10;
        var num2 = 20;

        //把num的值赋值給temp
        var temp = num;

        //把num2的值赋值給num
        var num = num2;

        //把temp的值赋值給num2;
        var num2 = temp;

        console.log(num);
        console.log(num2);
    </script>

ここに画像の説明を挿入

変数の要約

ここに画像の説明を挿入

データの種類

コンピューターでは、データは異なるストレージスペースを占有し、定義されたデータ型は異なります

JavaScriptは弱い型の言語であり、データ型は割り当ての場合にのみ決定できます

<script>
    var num = 20;
    console.log(num); //20  数值型

    var str = "hello word";
    console.log(str); //hello word 字符串型
</script>

ここに画像の説明を挿入

データ型の分類

単純なデータ型：数値文字列ブール値未定義のNULL
複雑なデータ型：オブジェクト

ここに画像の説明を挿入

数

予防

1.数値には整数の浮動小数点数（10進数）が含まれます。2進数の8進数の16進数。MAX_VALUE（最大値）Number.MIN_VALUE（最大値）無限大（正の無限大）-無限大（負の無限大）NaN（数値ではありません）
2. 8進法（0〜8）の前に0を追加し、16進法の前に0x（0〜9 AF）を追加します。
3.すべての8進数と16進数は10進数に変換されます

    <script>
        var num = 20;
        console.log(num); //整数

        var num2 = 1.314;
        console.log(num2) //浮点数

        var num3 = 050;
        console.log(num3) //八进制

        var num4 = 0x5;
        console.log(num4) //十六进制

        console.log(Number.MAX_VALUE) //最大值
        console.log(Number.MIN_VALUE); //最小值

        console.log(Infinity) //正无穷大
        console.log(-Infinity) //负无穷大

        console.log("Hello" - 123); //NaN(非数值)
    </script>

ここに画像の説明を挿入

isNaN（）

isNaN()函数：判断里面的参数是否为非数值 为非数值则显示true 反之则显示false,参数会进行隐式转换

予防

trueは1に変換されるため、isNaN（true）の結果はfalseになり、falseは0に変換されるため、isNaN（false）の結果はfalseになります。

   <script>
        //判断是否是非数值

        console.log(isNaN(20)); //false

        console.log(isNaN("hello")) //true
    </script>

ここに画像の説明を挿入

ストリング

JSでは、引用符で囲まれたテキストは文字列と呼ばれ、一重引用符または二重引用符にすることができます。

予防

jsのネストルール、シングルの外側と内側のダブル、外側のダブルの内側のシングル。
特別な場合には、エスケープ文字を使用する必要があります

<script>
    var str = "hello 中国";
    console.log(str)

    var str2 = "我是一个'高富帅'的男孩子";
    console.log(str2);

    var str3 = "大家好\n我的名字叫做尧子陌";
    console.log(str3)
</script>

ここに画像の説明を挿入

エスケープ

ここに画像の説明を挿入

文字列ケース

<script>
    alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n 我审视四周，这里，是我的舞台，  我就是天地间的王者。\n 这一刻，我豪气冲天，终于大喊一声："收破烂啦～"')
</script>

ここに画像の説明を挿入

文字列拡張

文字列+任意のタイプ=スプライシング後の新しい文字列式：数値が一緒に追加され、文字が接続されます
文字列の長さは、length属性から取得できます。
文字列を変数に追加しても、結果は文字列型のままです

 <script>
        var str = "my name is 尧子陌";
        console.log(str.length) //通过length属性可以获取字符串的长度

        var str = "hello";
        console.log(str + "尧子陌"); //拼接之后的字符串
        alert(str + "尧子陌") //拼接之后的字符串
    </script>

ここに画像の説明を挿入

文字列年齢の場合

ステップ

1.入力ボックスがポップアップし、ユーザーが年齢を入力します
2.入力結果を変数の形式で保存し、必要な文字列と連結します
3.アラートを使用して警告ボックスをポップアップします

   <script>
        /*
                1.弹出一个输入框，用户输入年龄
                2.把输入的结果用变量的形式保存起来，与所需要的字符串拼接起来
                3.使用alert弹出警示框
                */
        var age = prompt('请输入你的年龄');

        var str = "你今年" + age + "岁";

        alert(str)
    </script>

ここに画像の説明を挿入

ブール値

ブール値には、true（true）とfalse（false）の2つの値があります

'' 0 undefined null NaNはfalseに変換され、他の値はtrueに変換されます\

注：加算演算では、trueは1に変換され、falseは0に変換されます。


 <script>
        console.log(true + 1);
        console.log(false + 1);
    </script>

ここに画像の説明を挿入

未定義

宣言が割り当てられていない場合、結果は未定義です

注：任意の値にundefinedを追加すると、結果はNaN（数値ではありません）になります



    <script>
        // 声明未赋值的 其结果为undefined
        var age;
        console.log(age);//undefined

        var result= age+"2";
        console.log(result);//undefined2
        
         var result2 = age+2;
        console.log(result2)//NaN
        
    </script>

ここに画像の説明を挿入

ヌル

Null：nullポインタオブジェクトを表します。加算操作で値を加算すると、Nullは0に変換されます。


<script>
    // Null表示空对象指针
    var car = null;
    console.log(car + 1); //1
    console.log(car + "2020"); //null2020
</script>

ここに画像の説明を挿入

typeof

typeof：検出データタイプ


<script>
    //使用typeof 检测数据类型
    var num = 10;
    console.log(typeof num); //number

    var str = "hello";
    console.log(typeof str); //string

    var flag = true;
    console.log(typeof flag); //boolean

    var age;
    console.log(typeof age); //undefined 

    var N = null;
    console.log(typeof null) //object
</script>

ここに画像の説明を挿入

コンソールの色でデータ型を区別します


 <script>
        console.log(10); 
        console.log("尧子陌"); 
        console.log(true) 
        console.log(undefined) 
        console.log(null) 
    </script>

ここに画像の説明を挿入

リテラル

リテラル：固定値表現

数値リテラル：8 2050など
文字列リテラル： "hello" "work"
ブール表記：true false

データ型変換

あるデータ型の変数を別のデータ型に変換する

文字列型に変換する

toString（）メソッドを使用して文字列に変換します
文字列関数を使用して変換する
暗黙的な変換には+記号を使用します
toString（）を使用して、2進数を8進数、10進数、16進数に変換します


    <script>
        // 利用toString()方法转换成字符串
        var  num = 20;
        console.log(num.toString()) //转换成字符串

        //利用String函数进行转换
        var num2 = 25;
        console.log(String(num2));

        //利用+号进行隐式转换
        var num4 = 30;
        console.log(""+num4);

        // 利用toString()可以输出2进制 8进制 16进制等等

        var num6 = 20;
        console.log(num6.toString(2)) //转换成2进制
        console.log(num6.toString(8)) //转换成8进制
        console.log(num6.toString(10)) //转换成10进制
        console.log(num6.toString(16)) //转换成16进制
        
    </script>

ここに画像の説明を挿入

数値に変換する

parseInt（）：整数に変換
parseFloat（）：浮動小数点に変換します
Number（）：強制変換 ""は0に変換されますtrueは1に変換されますfalseは0に変換されます
暗黙の変換のための算術演算子で-* /を使用します
parseInt、parseFloat、およびnumberが、numberで始まらないパラメーターに遭遇すると、NaNが表示されます。


    <script>
        /*              parseInt():转换成整数
                        parseFloat():转换成浮点数
                        Number():强制转换 ""会转换成0 true会转换成1 false会被转换成0
                        利用算数运算符中的 - * / 进行隐式转换
                        parseInt和parseFloat及number遇到非数字开头的参数，会显示NaN
          */

        var num = '20';
        console.log(parseInt(num)); //20

        var num2 = '1.1314';
        console.log(parseFloat(num2)); //1.1314

        var num3 = '';
        console.log(Number(num3)); //0

        var num4 = '520';
        console.log(num4 - ''); //520

        var num5 = 'bull2020';
        console.log(parseInt(num5)); //NaN
    </script>

ここに画像の説明を挿入

ユーザーの年齢を計算する例

入力ボックスがポップアップし、ユーザーが生年月日を入力します
ユーザーの年齢を変数として保存し、ユーザーが入力した変数の値から今年の年を引いて、独自の結果を取得します（プログラム内で処理されます）。
警告ボックスをポップアップし、結果をポップアップします


    <script>
        var username = prompt('请输入出生的日期');

        var age = 2020 - Number(username);

        alert('你今年' + age + '岁')
    </script>

ここに画像の説明を挿入

単純な加算器

1.最初の入力ボックスがポップアップし、ユーザーが数値を入力して変数として保存します
2. 2番目の入力ボックスがポップアップし、ユーザーが数値を入力して変数として保存します
3.データ変換にparseFloatを使用し、2つの変数を追加します
4.アラートを使用して結果をポップアップします


  <script>
        var username1 = prompt('请输入第一个数值');
        var username2 = prompt('请输入第二个数值');

        var result = parseFloat(username1) + parseFloat(username2);
        alert(result)
    </script>

ここに画像の説明を挿入

ブール値

Boolean（）：負の値はfalseに変換されます他の値はtrueに変換されます

0 "" null undefinedNaNはfalseに変換されます
残りの値はtrueに変換されます

<script>
        //下面的值会被转换成false
        console.log(Boolean('')) //false
        console.log(Boolean(null)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(0)); //false
        console.log(Boolean(undefined)); // false
        
        //下面的值会被转换成true
        
        console.log(Boolean('hello'));
        console.log(Boolean(2020));
        
             
    </script>

ここに画像の説明を挿入

個人情報ケース

注：入力ボックスアラートポップアップボックス文字列スプライシングエスケープ文字などを使用する必要があります。


   <script>


        var name = prompt("请输入名字");
        var age = prompt("请输入年龄");
        var sex = prompt("请输入性别");
        alert('姓名:'+name+'\n'+'年龄:'+age+'\n'+'性别:'+sex+'\n')

    </script>

ここに画像の説明を挿入

コンパイル言語とインタプリタ言語の違い

コンパイル言語とインタプリタ言語の唯一の違いは、翻訳の時点が異なることです。

例は次のとおりです

夕食会と同じように、コンパイルされた言語は料理を一緒に食べることに相当し、解釈された言語は鍋を食べ、煮て、同時に食べることに相当します。

ここに画像の説明を挿入

識別子の予約語のキーワード

識別子は、開発者が可変関数属性に付けた名前を指します。
キーワードはJSが使用した単語を指し、変数名、関数名として使用できません
予約語は、将来使用されるキーワードです

総括する

NaN == NaNこの文は間違っています、NaNはNaN自体を含むどの値とも等しくありません
isNaN（）関数は、内部のパラメーターが数値でないかどうかを検出するために使用されます。isNaN（true）の値はfalseです。これは、trueがデフォルトで1に変換されるためです。
falseはデフォルトで0に変換されるため、isNaN（false）の値はfalseです。
undefined == nullこの文は正しいです、undefinedはNullから派生しています
jsのコンマは元のデータ型を保持し、プラス記号は連結された文字列です（コンソール用）