JavaScriptの基本(自習)

1.JavaScriptの紹介知識の紹介

JavaScriptでは大文字と小文字が厳密に区別されることに注意してください。コードのすべての文は、最後にセミコロンを付けて追加する必要があります。

(1)JavaScriptコードの書き方

1):インラインスタイル:ラベルに書き込みます。
<divοnclick=“ alert( 'Inj 666')”> </ div>

2):インラインスタイル:<head> </ head>タグのペアで記述されます。
<head> <script> alert( 'Inj 666'); </ script> </ head>

3):外部リンクスタイル:別の.jsファイルに書き込んでから、インポートします。
<script src =“ 01-javascript.js”> </ script>

注意点:
1.インライン形式はお勧めしません。
* 2.デフォルトでは、Webページの解析は上から下に実行されます。インラインスタイルを使用して、headタグのコンテンツのスクリプトにjsコードを記述した場合、ページのコンテンツを操作することはできません。2つの解決策があります。1つは、元のjavascriptコードの外にwindow.οnlοad= function()
{ javascriptcode; }を追加することです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
    <script>
        window.onload=function(){    /*等到界面上所有内容都加载完毕,再执行大括号内的东西*/
            var oDiv=document.querySelector("div");
            var text=oDiv.innerText;
            alert(text);
        }
    </script>

<body>
    <div>生活无非是痛苦和美丽</div>
</body>
</html>

3. 3番目の解決策は、本体の最後の位置にjsコードを記述することです。*

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>

<body>
    <div>生活无非是痛苦和美丽</div>
    <script>  /*将代码写在所有代码结束前即body的最后位置*/
        var oDiv=document.querySelector("div");
        var text=oDiv.innerText;
        alert(text);
    </script>
</body>
</html>

ここに画像の説明を挿入
ここでjsコードをインポートすることは、jsファイル内のコードを対応する場所に直接貼り付けることと同じであるため、必要なものはすべて、上記で直接記述したコードと同じであることに注意してください。
また、scriptタグにコードを記述した場合、jsファイルを呼び出すことはできません。

(2)一般的な出力方法

1)ポップアップウィンドウの形式:警告、確認、プロンプト
数字は直接書き込むことができますが、数字以外は二重引用符/一重引用符で出力する必要があることに注意してください。

*通常のポップアップウィンドウに警告:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>

<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        alert("生活无非是痛苦和美丽");
    </script>
</body>
</html>

ここに画像の説明を挿入
*ポップアップウィンドウを確認します(キャンセルするボタンがもう1つあります):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        confirm("生活无非是痛苦和美丽");
    </script>
</body>
</html>

ここに画像の説明を挿入
*プロンプト(追加の入力ボックスが追加されます):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        prompt("生活无非是痛苦和美丽");
    </script>
</body>
</html>

ここに画像の説明を挿入
2)Webコンテンツの形式で出力します。document.write(content)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
       document.write("生活无非是痛苦和美丽!");
    </script>
</body>
</html>

ここに画像の説明を挿入
3)開発者ツールコンソールの形式で出力します。console.log(content)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        console.log("生活无非是痛苦和美丽!");
        console.log(123);
        console.warn("错误输出");
    </script>
</body>
</html>

ここに画像の説明を挿入

2.JavaScriptの基本構文

1.定数、変数、ブール定数

定数:変更できないデータ
*整数定数:6…*
実定数:任意の小数。
文字列定数:一重引用符または二重引用符で囲まれた文字。「a」も文字列です
ブール定数:true(true)とfalse(false)の2つの値のみがあります
カスタム定数(定数固定定数):形式-----定数定数名=定数値;

b。変数:変更可能なデータを示します
変数の定義:var variable name;
== Use variable:==取得したメモリスペースにデータを保存します。-----変数名=保存するデータ==変数に保存されているデータを
取得します:==変数名を直接使用します。
変数の追加:
変数を直接変更して、再度割り当てます。
初期化されていない場合、未定義のvarnumがメモリに保存されます。
次のコードで説明されている割り当て方法もいくつかあります。これはC言語と非常によく似ています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript基本语法</title>
</head>
<body>
   <script type="text/javascript">
       const NUM=666;      //常量
       console.log(NUM);
       var name;           //变量
       name="生活无非是痛苦和美丽";
       console.log(name);
       var use="独自美丽";  //定义的时候初始化
       console.log(use);
       var num1,num2,num3; //同时定义多个变量
       var val1=1, vla2=2,val=3;  //定义的时候同时初始化多个不同而变量。
       val1=val2=100;      //也可以同时用一个表达式对多个相同值的变量赋值。
       name=123;           //修改变量,会直接丢弃旧的值,放入新的值。
       console.log(name); 
       var test;           //未初始化的变量
       console.log(test);
   </script>
</body>
</html>

c。ブール変数:論理式

//逻辑短路(与、或)
console.log(11||12||0||-1);   //逻辑||遇到真就停止,作为最后结果
console.log(0||13||12||-1);
console.log(11&&12&&0&&-1);   //逻辑&&遇到假就停止,作为最后结果
console.log(0&&11&&12&&-1);

ここに画像の説明を挿入
d。文字列変数と定数

2.基本的なデータ構造:配列、関数

(1)配列:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js重要数据结构</title>
</head>

<body>
    <script type="text/javascript">
        //生成数组的三种方式;
        var arr1=new Array(6);
        arr1[0]="Romantic";   //数组赋值
        console.log(arr1);       
        var arr2=new Array(1,2,3,4,5,6);
        console.log(arr2);
        var arr3=[1,2,3,4,5,6];
        console.log(arr3);
    </script>
</body>
</html>

ここに画像の説明を挿入

(2)機能:

a。静的関数の作成形式:(基本的な構文はC言語の構文とほぼ同じです)

function  函数名(形参1,形参2,...){
    函数体;
   (return 返回值) //可有可无;
}

例えば:

   //函数
        function max(a,b){
            var max_a_b;
            max_a_b= a>=b? a:b;
            return max_a_b;
        }
        var a=10,b=5;
        var max_a_b;
        max_a_b=max(a,b);
        console.log(max_a_b);    

ここに画像の説明を挿入
b。関数を呼び出すメソッドは次のとおりです。

var myVar=函数名;
myVar(实际参数...);

例えば:

 var fun1=max;
 console.log(fun1(2,100));

ここに画像の説明を挿入
c。関数に渡されたすべてのパラメーターにアクセスするために、関数内に組み込みの引数変数があります

注意:関数のパラメータリストは任意の数、データ型は任意の型にすることができます。JavaScript関数は当然変数パラメータをサポートします。JavaScriptには、関数に渡されるすべてのパラメータにアクセスできる引数変数があります。

<script type="text/javascript">
    /*add函数是一个参数可变的函数*/
    function add(){
        var result=0;
        for(var i=0;i<arguments.length;i++){
            //alert(arguments[i]);
            result+=arguments[i];
        }

        return result;
    }
    alert("add(1,2,3)="+add(1,2,3));//调用add函数时传入3个参数
    alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6));//调用add函数时传入6个参数
    alert("add()="+add());//调用add函数时不传入参数
    alert("add(1,\"HelloWorld\")="+add(1,"HelloWorld"));//调用add函数时传入不同类型的参数
  </script>

d。javascriptは動的関数を作成します
動的関数を作成するための基本的な形式:var variable name = new Function( "parameter 1"、 "parameter 2"、 "parameter n"、 "execution statement");
ここでは、関数オブジェクトを作成してから、そのオブジェクトを変数名に割り当てることに注意してください。

var sum=new Function("x","y","var sum;sum=x+y;return sum");
alert("sum(3+4)="+sum(3,4));

等价于静态函数:
 function square (x,y){
    var sum;
    sum = x+y;
    return sum;
}

ここに画像の説明を挿入
e。静的関数と動的関数の違い:
各文が引用符 "x"、 "y"、および "var sum; sum = x + y ;; return sum;"で囲まれていることがわかります。これらは両方とも引用符で囲まれています。つまり、新しい関数の後の括弧は引用符で囲まれています。つまり、すべて文字列の形式で表現および呼び出され、文字列は変数によって定義または変更できます。つまり、変数の値が次のようになるように変数を定義できます。変数は次の文字列と同じです。

<script type="text/javascript">
    var a = "var sum;";
    var b = "sum = x + y;";
    var c = "return sum;";
    var square = new Function ( "x", "y", a+b+c);
    alert(square (2,3));
</script>

ここでは、変数a、b、cを定義し、a = "var sum;"、b = "sum = x + y;"、c = "returnsum;"とします。

最適:var square = new Function( "x"、 "y"、 "var sum; sum = x + y; return sum;");

1)次のように記述できます。varsquare= new Function( "x"、 "y"、a + b + c); a、b、およびcは3つの文字列であるため、文字列の追加は引き続き文字列です。
2)なぜコードを小さなコードに分割するのですか?、文字列をいくつかの独立した文字列に分割する利点は、いくつかの文字列を変更することで、いつでも関数の機能を変更できることです。

<script type="text/javascript">
    var a = "var sum;";
    var b = "sum = x + y;";
    var c = "return sum;";
    var square = new Function ( "x", "y", a+b+c);
    alert(square (2,3));
    b = "sum = x -y;";//就可以将函数的功能改成减法运算
    square = new Function ( " x", "y",a+b+c);
    alert(square (2,3));
</script>

プログラムを実行する過程で、b = "sum = x + y;";を "sum = xy;";に変更します。このようにして、変更した変数bをvar square = new Function( "X" 、 "y"、a + b + c); in、then( "x"、 "y"、 "var sum; sum = x + y; return sum;");は次のようになります:( "x"、 "y" 、 "var sum; sum = xy; return sum;");この動的関数に渡されたパラメーター2と3を入力すると、2-3になり、結果は-1になります。

f。匿名関数:

var f1 = function(i1, i2) {  //方法一
     return i1 + i2;
}
alert(function(i1, i2) { return i1 + i2; }(10,10));  //方法二
alert(f1(1,2));

この種の匿名関数の使用法はJQueryで非常に多く、匿名関数を直接宣言してすぐに使用します。匿名関数を使用する利点は、一度も使用されない関数を定義する必要がなく、名前の競合の問題が回避されることです。jsには名前空間の概念がないため、関数名と簡単に競合できます。名前の競合がある場合は、最終的な宣言が優先されます。
注:JavaScriptは関数のオーバーロードをサポートしていません。JavaScriptはメソッドのオーバーロードがないとは言いません。2つのメソッドの名前が同じである場合、パラメーターの数が異なっていても、後で定義が前の定義をオーバーライドします。が呼び出されると、常に呼び出し後に定義されます。

(3)c.Math(数学的対象):

Math.abs(...)------>絶対値を
取るMath.celi(...)------>切り上げ
Math.floor(...)------ >ラウンドダウン
数学は最も近い整数に------>ラウンド(...).round
------>の最大値を取るMath.max(A、B、C、...)複数の数値
Math.min(a、b、c、...)------>複数の数値の最小値を
取得Math.sin(Math.PI / 6)—> sin値を見つける他のcos()と同様

(4)配列配列オブジェクト

(1)arr1.concat(arr2);
配列スプライシング、結果はarr1の終わりにarr2をスプライシングします。

(2)arr.join();
配列文字列出力、要素接続の記号は括弧内に指定できます。

eg:
arr=["a","b","c","d"];
console.log(arr.join("|")); (结果为"a|b|c|d")

(3)arr.pop();
配列の最後の要素を切り取り、戻り値はその要素です。

(4)arr.slice(start、end)
1)配列の指定されたフラグメントを取得、取得します。開始には、パラメーターが負の場合は最後から選択する必要があります
。2)戻り値は、断片;

(5)arr.push
1)Add、配列の最後に新しい要素を追加するために使用されます。パラメーターは複数にすることができます
。2)戻り値は配列の新しい長さです。

(6)arr.splice
1)は、配列内の指定されたインデックスに要素を追加するために使用されます;
arr.splice(2、0、“ William”、“ asdfasdf”);
2番目の要素から開始して、要素の数削除され(0から最後まで0が可能)、要素を「William」、「asdfasdf」として追加します。

2)配列内の要素を置き換えるために使用されます;
arr.splice(2,1、 "William");
3)配列内の要素を削除するために使用されます;
arr.splice(2,2);

(7)arr.indexOf(element);
配列内の要素を検索、検索します戻り値はインデックスです。そのような要素がない場合は、-1を返します。

(8)arr.sort(function);
sort、functionは関数です。

 eg:
 function sortNumber(a,b){
 return a-b;
}
arr.sort(sortNumber);(从小到大排序)
tips:如果a-b改成b-a,那么执行的操作为从大到小;
tips:字符串对象(String)的方法与Array的方法类似;

(4)日付日付オブジェクト

date.getTime()
date.getMilliseconds()
date.getSeconds()
date.getMinutes()
date.getHours()
date.getDay()
date.getDate()
date.getMonth()
date.getFullYear()

var time=new Date();
        alert(time);
        var year=time.getFullYear();
        var month=time.getMonth();
        var day=time.getDay();
        alert(year+"-"+month+'-'+day);

ここに画像の説明を挿入

ヒント:たくさん、ドキュメントを確認してください

(4)文字列オブジェクト

charAt(index)
str [index]文字列の指定された位置にある文字を取得します

concat()連結文字列
slice(start、end)/ substring(start、end)は、開始から終了までの文字をインターセプトし、新しい文字列を返します。startが負の数の場合は、最後の文字から開始します。

substr(start、length)は、開始文字と長さの長さから始まる文字をインターセプトして、新しい文字列を取得します

indexOf(char)文字列内の指定された文字の最初の位置を取得します
lastIndexOf(char)文字列内の指定された文字の最後の位置を取得します

トリム()文字列の前後に空白を取り除く
のtoUpperCase()
toLocaleUpperCase()変換大文字に
toLowerCaseメソッド()
toLocaleLowerCawse()小文字に変換
(置換)文字置き換える
(分割)配列に文字列を分割

おすすめ

転載: blog.csdn.net/qq_43978754/article/details/110092615