Javascript 全英入门＜一＞

最新推荐文章于 2024-10-16 17:24:41 发布

Freyua_xx

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量99

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Freyua_xx/article/details/119382808

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基本结构，并深入讲解了JavaScript的基础语法，包括变量、布尔判断、类型转换和循环结构。此外，还涵盖了函数的使用，Math库的函数以及字符串操作。文章通过实例演示了如何在VScode中编写和运行这些代码，对于初学者来说是一份很好的学习资源。

摘要由CSDN通过智能技术生成

基于VScode

基本HTML的file 格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>freyua's page</title>
</head>
<body>
    <h1>heading</h1>
    
    <script>
         var viable ="hello world";
         console.log(viable);　//在浏览器中查看console时显示
    </script>
</body>
</html>

script part

基本判断 booleans

 <script>
         var red =true;
         var blue= false;
         if(red){
            console.log("we are blue");
         }
         else{
         console.log("we are red");
         }
    </script>

此时，如果定义 var green 或者 var green=0 或者 var green=null;
JS默认其为 false 参与 if 判断其它情况都是true

Comparing values

         var offnum = 100 ;
         var num = "100";
         if(offnum == num){
            console.log("it's right");
         }
         else{
         console.log("it's wrong");
         }

可见JS 对类型不敏感 type coercion表示不同类型也是相等的

当你不需要这种 type coercion 时，使用 if(offnum===num) 三个加号
当两个不同类型进行运算时只会得到 NaN （错误）

switch for comparing

 <script>
         var colors =["red","blue","green","yellow","black"];
         var selectedColors = colors[2];
         switch(selectedColors){
           case"red": console.log("the color is red");break;
           case"blue": console.log("the color is blue");break;
           case"green": console.log("the color is green");break;
           case"yellow": console.log("the color is yellow");break;
           case"black": console.log("the color is black");break;
           default:console.log("error");
         }       
    </script>

loops

  <script>
         var colors =["red","blue","green","yellow","black"];
         for(var i=0;i<colors.length;i++){
            console.log(colors[i]+'\n');
         }
    </script>

for of loops

 <script>
         var myString ="we are the champions";
         for(var eachLetter of myString){
            console.log(eachLetter);
         }
    </script>

while

在语句中用 ${} 表示变量

<script>
        var incrementor =0;
        var text="";
        while( incrementor <10){
            text +=`The incrementor has up to ${incrementor}\n`;
            incrementor++;
        }
        console.log(text);
    </script>

序列 Sequence

尝试一些新的函数吧

 <script>
        var myString ="we are the champions";
        console.log(myString);
        var myUpperString = myString.toUpperCase();
        console.log(myUpperString);
        var StringLocation = myString.search("the");
        var word = myString.substr(StringLocation,3);
        word = word.toUpperCase();
        var newString = myString.replace("the",word);
        console.log(newString);
         
    </script>

注意一些细节包括：数组里面用 ’ ‘ 表示string
toUpperCase 函数后面有（）
${} 前后有 ` 表示

<script>
        var myString ="I am hungry for some";
        var foods =['bread','milk','cheese','ham'];
        for( var i=0;i<foods.length;i++){
        //checking to see if the incrementor is even
            if(i%2 ===0){
            //if it's even, make the array element uppercase
                var FOODS =foods[i].toUpperCase();
                console.log(`${myString} ${FOODS}`); 
            }
            else{
                console.log(`${myString} ${foods[i]}`);
            }
        }
    </script>

function

To create a generalized reusable block of code that encapsulates a task.

Functions can be assigned to variables.
Functions can be named, or be anonymous.函数一般有命名普通函数和匿名回调函数
Functions can take other functions passed in as arguments.函数可以传入其它参数
There are a few different syntactical options for defining and writing functions in JavaScript.

 <script>
       function returnSum(num1,num2){
           var sum =num1+num2;
           return sum;
       }
       console.log(returnSum(45,32));
    </script>

在Math里的函数

<script>
        var foods =['bread','milk','cheese','ham'];
       function randomint(num1,num2){
           var numvalue =num2-num1+1;
           var randomnum=Math.random();
           var randomval=randomnum*numvalue;
           var randomrounder =Math.floor(randomval);
           return randomrounder;
           //return Math.floor(Math.random()*(num2-num1+1))+ num1;
       }
       
       console.log(foods[randomint(0,3)]);
    </script>

匿名回调函数 Anonymous function

<script>
       var greeting = function(){
           var name= prompt("call me by your name", "");
           console.log(`${name}, how are you ?`);
       }
    greeting();   
       
    </script>