Webコレクション04（JavaScript Cognition、基本文法）

その他 2021-03-23 05:06:09 訪問数: null

記事のディレクトリ

1.JavaScriptの概要

1.JavaScriptとは

1）JSの紹介

JSと呼ばれるこの言語は、ブラウザーで解釈される言語であり、HTMLファイルにネストされ、解釈と実行のためにブラウザーに渡されます。主に、Webページの動的効果、ユーザーインタラクション、およびフロントエンドとバックエンド間のデータ転送を実現するために使用されます。

2）JS構成

  1. コア文法-ECMAScriptはJSの基本的な文法を標準化します

  2. ブラウザのオブジェクトモデル- BOMブラウザのオブジェクトモデルは、ブラウザを操作するための一連のメソッドを提供します
  3. ドキュメントオブジェクトモデル-DOM
    ドキュメントオブジェクトモデルは、ドキュメントを操作するための一連のメソッドを提供します

2.使用方法

[1]要素バインディングイベント

  • イベント：ユーザーの動作（クリック、ダブルクリックなど）または要素の状態（入力ボックスのフォーカス状態など）を参照します。

  • イベント処理：要素は特定のイベントをリッスンし、イベントの発生後にイベント処理機能を自動的に実行します。

  • 一般的に使用されるイベント：onclick（クリックイベント）

  • 構文：イベント名をラベル属性の形式で要素にバインドし、イベント処理をカスタマイズします。

    <!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>

[2]ドキュメントが埋め込まれています。タグを使用してJSコードを記述します

  • 文法：
<script type="text/javascript">
  alert("网页警告框");
</script>
  • 注：タグはドキュメントの任意の位置に書き込むことができ、複数回書き込まれます。スクリプトタグに読み込まれると、内部JSコードがすぐに実行されるため、位置が異なるとコードの最終的な実行効果に影響します。 。

[3]外部リンク

  • 外部JSファイルXX.jsを作成し、HTMLドキュメントで使用します
<script src="index.js"></script>
  • 注：埋め込みJSコードを実装することも、外部JSファイルをインポートすることもできますが、選択できるのは2つのうちの1つだけです。

2.基本的な文法

1.文法仕様

[1] JSは、キーワード、変数、定数、演算子、およびメソッドで構成される文で構成されます。セミコロンは、文の終わりの記号として使用することも、省略してもかまいません
[2] JSは厳密に省略されます。大文字と小文字を区別する
[3]コメント構文

 单行注释使用 //
 多行注释使用 /* */

2.JS変数と定数

1）変数

【1】機能：プログラム実行中に動的に変更できるデータを格納するために使用します

[2]構文：キー変数宣言、カスタム変数名を使用します

var a;		//变量声明
a = 100;	//变量赋值
var b = 200; //声明并赋值
var m,n,k;	//同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

[3]命名規則：

  • 変数名、定数名、関数名、メソッド名はカスタマイズ可能で、数字、文字、アンダースコア、および$で構成でき、数字で始めることは禁止されています
  • キーワードとの競合を禁止します（var const function if else for while do break case switch return class）
  • 変数名では大文字と小文字が厳密に区別されます
  • 変数名はできるだけ明確にする必要があり、複数の単語は小さなラクダで構成する必要があります（例： "userName"

[4]使用上の注意：

  • varキーワードが省略され、変数が割り当てられていない場合、直接アクセスはエラーを報告します
  • 変数はvarキーワードで宣言されていますが、割り当てられておらず、変数の初期値は未定義です。
  • 変数はvarキーワード宣言を省略し、割り当てられており、通常どおりに使用できます。変数のスコープに影響します。

2）定数

【1】機能：一度定義すると変更できないデータを保存する

[2]構文：宣言と割り当てを同時に行う必要があります

const PI = 3.14;

【3】注：

  • 定数が定義されると、それを変更することはできず、変更を強制されるとエラーが報告されます
  • 命名規則は変数と同じです。変数を区別するために、定数名はすべて大文字で表記されています。

3.データ型

1）基本データ型（単純データ型）

整数

（1）10進表現

var a = 100;

（2）8進表現（接頭辞0）

var b = 021; //结果为十进制的 17

（3）16進表現（接頭辞0x）

var c = 0x35;//结果为十进制的 53

使用法：整数はさまざまな16進数で表すことができ、コンソールから出力する場合は常に10進数で出力されます。

10進数

（1）小数点はvar m = 1.2345を意味します。

（2）科学的記数法

  1. 文字列文字列型
    文字列：「」または「」で表される1つ以上の文字で構成され、各文字には対応するUnicodeコードがあります。

    var s = "100";
var s1 = "张三";

  2. booleanブール型
    trueとfalseの2つの値のみがあり、ブール値と数値は相互に変換できます。trueは1、falseは0

    var isSave = true;
var isChecked = false;

  3. undefined（プログラムによって返される値）
    特別な値、undefinedは変数宣言が割り当てられていない場合に表示されます

    var a;
console.log(a);//undefined

  4. null空の型（アクティブに使用）
    オブジェクトを逆参照するときにnullを使用し、オブジェクトが空であることを示します

2）参照データ型

主にオブジェクト、関数などを指します。

3）検出データタイプ

typeof変数または式
typeof（変数または式）

var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4.データ型変換

運用に参加する際には、さまざまな種類のデータを変換する必要があります

1）強制型変換

[1]文字列型の変換
メソッド：toString（）
は変換された文字列を返します

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

[2]数値型を変換する

  • Number（param）
    パラメーターは、データ型に変換される変数または値であり、
    変換後の結果
    が返されます。変換が成功した場合は、数値が返されます。変換が失敗した場合は、NaN、（データに数値以外の文字が含まれている限り、数値）が返されます。常に変換に失敗し、NaNを返します。
デモ
    Number("abc")
    typeof NaN
    Number(undefined)
    Number(null)
デモ
/*整体转number,使用Number()*/
var s1 = '123';
var s2 = '101a';
var s3 = true;
var s4 = 'true';
var s5 = null;
var s6;
console.log(Number(s1),s1)    //123 '123'
console.log(Number(s2),s2)    //NaN '101a'
console.log(Number(s3),s3)    //1 true
console.log(Number(s4),s4)    //NaN 'true'
console.log(Number(s5),s5)    //0 null
console.log(Number(s6),s6)    //NaN undefined
  • parseInt（param）
    パラメーターは、解析されるデータです。
    機能：データから整数値を解析します。
    プロセス：
    1。パラメーターが非文字列タイプの場合、自動的に文字列に変換され
    ます。2。それぞれを回転させます。文字から数字へ左から右へ。、変換が失敗した場合、逆方向の解析が停止され、結果が返されます。
/*
提取字符串中的number部分：会将非字符串的数据自动转换成字符串
parseInt(n)
parseFloat(n)
*/
console.log(parseInt(35.5))            //35
console.log(parseInt("35.5"))          //35
console.log(parseFloat('35.5.6.6'))    //35.5
console.log(parseFloat('a35.5'))       //NaN
console.log(parseFloat('101a'))        //101
  • parseFloat（param）
    関数：整数と小数部分を含む数値を抽出します

2）暗黙的な型変換（自動変換）

  1. 文字列およびその他のデータ型が「+」演算の対象となる場合、それは文字列がスプライスされることを意味し、数学演算ではなくなります。
    変換規則：文字列以外のデータを文字列に変換した後、スプライスすると、最終結果が得られます。文字列です

  2. それ以外の場合は、数学演算のために常にオペランドを数値に変換してください

デモ
var r1 = "我学"+"Python";
console.log(r1,typeof r1)　　//我学Python string
var r2 = 'maple'+31;
console.log(r2,typeof r2)　　//maple31 string
var r3 = 'maple'+true;
console.log(r3,typeof r3)　　//mapletrue string
var r4 = 'maple'+null;
console.log(r4,typeof r4)　　//maplenull string
var r5 = 'maple'+undefined;
console.log(r5,typeof r5)　　//mapleundefined string
var r6 = 'maple'+NaN;
console.log(r6,typeof r6)　　//mapleNaN string        
var r7 = 'maple'+5+10;
console.log(r7,typeof r7)　　//maple510 string
var r8 = 10+5+'maple';  
console.log(r8,typeof r8)　　//15maple string

5.オペレーター

1）代入演算子

= 将右边的值赋给左边变量

2）算術演算子

+ - * / %  加 减 乘 除 取余

3）複合演算子

+= -= *= /= %=

4）インクリメントまたはデクリメント演算子

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作
デモ
var s = true;
s++;
console.log(s,typeof s)        //2 Number


var n =5;
var r =n++ + ++n + n++ + ++n +n;
        //5+   7+  7+     9+  9
//分解
var r1=n++;    //r1=5 n=6
var r2=++n;    //r2=7 n=7
var r3=n++;    //r3=7 n=8
var r4=++n;    //r4=9 n=9
var r5=+n;    //r5=9 n=9

注意：

  • インクリメント演算子またはデクリメント演算子を変数のみと組み合わせると、前後に違いはありません。
  • インクリメント演算子またはデクリメント演算子を他の演算子と組み合わせて使用​​する場合は、プレフィックスとサフィックスを区別する必要があります。プレフィックスとして、最初に++ / –を実行してから、代入またはその他の操作を実行します。サフィックスを実行する場合は、組み合わせます。最初に他の演算子。続行++ / –

5）関係演算子/比較演算子

> <     
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)

[1]関係演算子は式間の関係を決定するために使用され、結果は常にブール値のtrue / falseになります

【2】用途

  • 文字列と文字列の比較
    文字が結果を比較する限り、各文字のUnicodeコードを順番に比較します。最終結果が返されます。
  • それ以外の場合、
    オペランドは数値比較のために常に数値に変換されます。オペランドが数値に変換できない場合、オペランドはNaNになり、比較演算に参加し、結果は常にfalseになります。
null和其他数据类型做等值比较运算 不转换成数字
null和undefined相等 但是 null和undefined不全等
デモ
var res1=10>2;
var res2='10'>'2';                    //'1'>'2'
var res3 = '人生苦短'>'我学Python';     //'人'>'我';
console.log(res1,res2,res3)           //true false false
var s1 = '人';
var s2 = '我';
//获取字符的 Unicode编码charCodeAt(index)
console.log(s1.charCodeAt(),s2.charCodeAt(),res3)//20154 25105 false

var res4 = '10'>2;
var res5 = '10'>true;            //10>1
var res6 = true > false;         //1>0
console.log(res4,res5,res6)      //true true true

var res7 = '10'>undefined;       //10>NaN  false
var res8 = '10'>null;            //10>0
var res9 = 'true' > false;       //NaN>0
console.log(res7,res8,res9)      //false true false

[3]平等と合同

  • 同等性：データ型に関係なく、値の比較のみ（自動型変換を含む）
  • 合同：データ型変換は実行されません。データ型は一貫している必要があり、値は合同を判断するために等しくなります。
デモ
var r1 = 10=='10';
var r2 = 10==='10';
console.log(r1,r2);    //true false

6）論理演算子

  1. &&論理と条件1 &&条件2（および）
    式が同時に確立され、最終結果は真になります。1はすべて1です。
  2. ||論理OR条件1 ||条件2（または）
    式の1つが真である限り、最終結果は真です。1がある場合は、1
デモ
//给出闰年判断的条件 能被4整除，不能被100整除，或者被400整除
var year=2015;
var r=year%4==0&&year%100!==0 ||year%400==0;
console.log(typeof year,r)        

//"number" false
  1. ！論理否定！条件（ではない）
    は既存の式の結果を否定します
    注：ゼロを除くすべての値が真です
デモ
var r1 = !5;        　//false
//逻辑非的优先级高于关系运算
var r2 = !5<3;        //true  false<3
console.log(r1,r2)    //false true

7）三項演算子

構文：

表达式1 ? 表达式2 : 表达式3;

処理する：

	判断表达式1是否成立,返回布尔值
​	如果表达式1成立,执行表达式2;
​	如果表达式1不成立,执行表达式3;
デモ
var a = 10;
if (a>5){
    
    
    console.log('成立');    //成立
}else{
    
    
    console.log('不成立');
}
var res=a>5?'ok':'error';
console.log(res)    //ok
a = 3;
var res2 = a>5?'ok':a>=3?'>=3':'<3';
console.log(res2)    //>=3

おすすめ

転載: blog.csdn.net/weixin_38640052/article/details/107220593
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com