より大きなスクリプトの場合、外部

。JS
<スクリプトsrc = \\\"myscript.js\\\">

これは、初心者から中級レベルへの私のJavaScript学習の旅を結論付けています！このガイドが役立つことを願っています。 コメントで独自の学習のヒントを共有したり、質問をしたりしてください！ハッピーコーディング！ ✨
","image":"http://www.luping.net/uploads/20250324/174281403267e13b504836d.jpg174281403267e13b5048375.jpg","datePublished":"2025-03-25T02:00:42+08:00","dateModified":"2025-03-25T02:00:42+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
  

  
    
    
    

  

    

      

        「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」      

      

    

  

  

    

      

        
        
      

      

        

          オンラインツール
        

        

          ソフトウェアチュートリアル
        

        

          サイトナビゲーション
        

        

          プログラミング
        

      

      
    

  






    
    
    

      

        
        表紙 > プログラミング > 基本から中級まで：私の旅はJavaScriptを学習します
      

      

        

          

            

              
基本から中級まで：私の旅はJavaScriptを学習します

              

                

                  2025-03-25に投稿されました                

                

                  
                  ブラウズ：340
                 
                

                
                
                
                
                
                
                
                
              

            

            

            

              
              
 From Basics to Intermediate: My Journey Learning JavaScript ✨ 


このガイドは、JavaScriptの基礎から中間概念まで、私の個人的な学習体験から描かれたコースをチャート化します。  あなたの学習の旅をよりスムーズにするために、重要なテイクアウト、実用的な例、そして役立つヒントをまとめました。飛び込みましょう！


目次


    

  1. 変数
    2. 

  2.  arrays 
    3. 

  3. 条件ステートメント
    4. 

  4. 関数
    5. 

  5. オブジェクト
    6. 

  6.  dom（ドキュメントオブジェクトモデル）
    7. 

  7. イベント
    8. 

  8.  htmlとjavascriptの統合
    9. 





  1。変数 


変数は、プログラムで使用されるデータのコンテナです。 JavaScriptは、それらを宣言する2つの主な方法を提供します。



     
  •  let ：値が変わる可能性のある変数の場合。

    •  
  •  const ：一定のままでなければならない値について。

    • 

例：

 
let age = 25;
const name = "Mario";
変数は、数字、テキスト（文字列）、真/偽の値（ブレア）、または未定義の値を保持できます。  JavaScriptは、標準の算術演算子（、 - 、*、 /、％）および指数オペレーター（**）を提供します。
。

 
console.log(2 ** 3); // Output: 8


 
 2。配列 

 arraysは単一の変数内に複数の値を保存します。  四角い括弧を使用して配列を定義します。

 
 let fruits = ["apple"、 "banana"、 "cherry"]; 
let fruits = ["apple", "banana", "cherry"];
 
 console.log（fruits [0]）; // output：apple 
 
console.log(fruits[0]); // Output: apple
 

アレイは動的です。それらを変更できます：



 
。push（）
    ：端に要素を追加します。
  • 
 。unshift（）
    • ：最初に要素を追加します。
  • 
 。pop（）
    • ：最後の要素を削除します。
  • 
 。shift（）
    • ：最初の要素を削除します。
  • 


    • 例：

  fruits.push（ "orange"）;
console.log（fruits）; //出力：["Apple"、 "Banana"、 "Cherry"、 "Orange"] 
 
fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]
 


 
。indexof（）
    ：値のインデックスを見つけます。
  • 
 。include（）
    • ：値が存在するかどうかをチェックします。
  • 

 
    •  console.log（fruits.indexof（ "banana"））; //出力：1
console.log（fruits.includes（ "grape"））; // output：false 
 
console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false
 3。条件付きステートメント
 

条件ステートメントにより、コードが決定を下すことができます。   
および
 else が一般的に使用されている場合：
  if（grade> 60）{
  console.log（ "you cassed！"）;
} それ以外 {
  console.log（ "you failed！"）;
} 
 
if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}
 

これらの演算子は条件を評価するために不可欠です：



 
 === 
    （厳格な平等）
  • 
 ！== 
    • （厳格な不平等）
  • 
 > 
    • （より大きい）
  • 
  （以下）
  • 
 > = 
    • （以上）
  • 
  （以下）
  • 



    •  
 4。関数
 

関数は、再利用可能なコードブロックです。 関数
キーワードを使用してそれらを定義します：

  function greet（name）{
  `hello、$ {name}！`;
}
console.log（Greet（ "Alice"））; //出力：こんにちは、アリス！
 
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!
 

関数は、[パラメータ
）を使用することができ、
引数：で呼び出されたときにそれらを使用できます。
  function add（a、b）{
  bを返します。
}
console.log（add（2、3））; // output：5 
 
console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false
 5。オブジェクト
 

オブジェクトは、ミニデータベースのようなキー価値ペアのコレクションです：

 
 const car = {
  ブランド：「テスラ」、
  モデル：「モデル3」、
  年：2020年
};
console.log（car.brand）; // output：tesla 
 
const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2020
};
console.log(car.brand); // Output: Tesla
 

オブジェクトには関数（メソッド
）を含めることもできます。

  const phone = {
  ブランド：「Apple」、
  指輪（） {
    console.log（ "ring、ring！？"）;
  }
};
phone.ring（）;  


const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! ?");
  }
};
phone.ring();
 


 domはJavaScriptがHTML要素と対話するようにします。
 
要素の選択：
 


 ドキュメントオブジェクトを使用して要素を選択します：


  const heading = document.queryselector（ "h1"）;
console.log（heading.innertext）; // 
タグ内でテキストを記録します
 


const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text within the 
 tag


コンテンツを動的に変更する：
 
 heading.innertext = "javascriptへようこそ！"; 
 


heading.innerText = "Welcome to JavaScript!";
 


 を使用してユーザーアクション（クリック、キープレス）に応答します。
 
 button.addeventlistener（ "click"、（）=> {
  console.log（ "ボタンクリック！"）;
}）; 
 
 
例：カウンターの増加：
button.addEventListener("click", () => {
  console.log("Button clicked!");
});
 let count = 0;
button.addeventlistener（ "click"、（）=> {
  数;
  console.log（ `clicked $ {count} times`）;
}）; 
 


 
let count = 0;
button.addEventListener("click", () => {
  count  ;
  console.log(`Clicked ${count} times`);
});
 
  
 
より大きなスクリプトの場合、外部
。JS
   
 


これは、初心者から中級レベルへの私のJavaScript学習の旅を結論付けています！このガイドが役立つことを願っています。  コメントで独自の学習のヒントを共有したり、質問をしたりしてください！ハッピーコーディング！ ✨
            

            
            

                      

          

          

            

              最新のチュートリアル
              もっと>
            

            
          

        

        

          

            

              分類もっと>
            

            

                            日本語を学ぶ
                            韓国語を学ぶ
                            中国語を学びます
                            外国語を学ぶ
                            ゲーム
                            よくある問題
                            テクノロジー周辺機器
                            AI
                            ソフトウェアチュートリアル
                            プログラミング
                            記事
                          

          

          

            

              
中国語を勉強する

            

            
          

          

            

              道具もっと>
            

            

                            
                
                

                  
画像のbase64デコード

                

              
                            
                
                

                  
中国語のピンイン

                

              
                            
                
                

                  
Unicodeエンコーディング

                

              
                            
                
                

                  
JS難読化暗号化圧縮

                

              
                            
                
                

                  
URL 16 進暗号化ツール

                

              
                            
                
                

                  
UTF-8エンコード変換ツール

                

              
                            
                
                

                  
オンラインの Ascii エンコードおよびデコード ツール

                

              
                            
                
                

                  
MD5暗号化ツール

                

              
                            
                
                

                  
ハッシュ/ハッシュ テキストのオンライン暗号化および復号化ツール

                

              
                            
                
                

                  
オンライン SHA 暗号化

                

              
                          

          

          

        

      

    

    
    
    

    

        
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。
          できるだけ早く対応させていただきます。

        
Copyright© 2022 湘ICP备2022001581号-3