关于js初步学习_sky.js-CSDN博客

本文链接：https://blog.csdn.net/Skyloer/article/details/122410044

学习自【HTML+CSS+JS】基础知识介绍，靠谱学院星月主讲_哔哩哔哩_bilibili

1.js初步

使用方法与css相同，文档内嵌或外置，效果相同。

2.变量

变量名称:小写字母，大写字母，数字，$，_

数字不能放在最前面

变量名称尽量避免和函数库有关系

<!DOCTYPE html><html lang="en">
    <head>
<meta charset="UTF-8">
<title>创建变量</title>
</head>
<script>
var kaopu="靠谱学院";
//变量名称:小写字母，大写字母，数字，$，_
//数字不能放在最前面
//变量名称尽量避免和函数库有关系
alert(kaopu);
</script>
<body>
</body>
</html>

3.变量使用

纯数字即数字，“数字”即字符

示例

<!DOCTYPE html><html lang="en">
    <head>
<meta charset="UTF-8">
<title>创建变量</title>
</head>
<script>
var name=prompt("你的名字是:",name);//"你的名字是:"用于显示，后续才是内容(后面name可用""代替）
document.write("<h1>"+name+"</h1>");// document.write在文档内书写
</script>
<body>
</body>
</html>

4.判断语句

核心

if(……){……；

}else{

；

}

示例

登录确认

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <script>
    var pwd = prompt("请输入您的密码:","");// pwd是一个字符串
        if( pwd == "123456com"){
            document.write("登陆成功!");
    //布尔函数true false 1 0真假
    }else{
            document.write("登录失败!");
    }
    </script>
    </head>
    <body>
    </body>
    </html>

猜一猜

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <script>
    var number = prompt("输入数字(1-100):","");
    if(number < 50 && number > 20){
        document.write("bingo!");
    }else if(101 > number > 50){
        document.write("too big!");
    }else if(number<20 && number > 0){
        document.writeln("try a bigger one!")
    }else{
        document.write("wrong number~")
    }
    // &&意思是and，同时满足，需要两个一起用
    </script>
    </head>
    <body>
    </body>
    </html>

5.while循环语句

if在前面的话，若执行while，则当符合if，无法显示文本

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>while语句</title>
    <script>
   var pwd=prompt("请输入密码哟~","");
   while(pwd !== "123456"){
       pwd=prompt("错咯错咯！try it again！")
   }if (pwd == "123456"){
       document.write("bingo!登录成功咯~");
   }// if在前面的话，若执行while，则当符合if，无法显示文本
    </script>
    </head>
    <body>
    </body></html>

6.for语句

for语句一次性写多个条件，必须每句都出现变量，能用for尽量使用for

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>for语句</title>
    <script>
        for(var num=1;num<=10;num++){
            document.write(num+"<br>");
        }
// for语句一次性写多个条件，必须每句都出现变量，能用for尽量使用for



   //while语句实现方法：
//    var num=1;
//    while(num<=10){
//        document.write(num+"<br>")
//        num=num+1;}
    </script>
    </head>
    <body>
    </body></html>

7.js数组

var num=new Array(10);//意思是数组内含十个元素，也可以直接填入，如（"快跑",1,100）

num[1]=10;//意指数组中第一个元素为10,未定义元素默认为空，元素之间以逗号隔开

一维数组示例

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>js数组</title>
    <script>
    var num=new Array(10);//意思是数组内含十个元素，也可以直接填入，如（"快跑",1,100） 
    num[1]=10;//意指数组中第一个元素为10,未定义元素默认为空，元素之间以逗号隔开
    document.write(num)
    </script>
    </head>
    <body>
    </body></html>

二维数组示例

其实质就是数组里面套数组

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>js数组</title>
    <script>
    var person=new Array();
    person[0]=new Array();
    person[0][0]="王耀";//定义需要从0开始
    person[0][1]="Ch";
    person[0][2]="男";
    person[0][3]="5000岁";
    person[0][4]="我老婆";
    document.write("姓名："+person[0][0]+"<br>");
    document.write("代表："+person[0][1]+"<br>");
    document.write("性别："+person[0][2]+"<br>");
    document.write("年龄；"+person[0][3]+"<br>");
    document.write("身份："+person[0][4]+"<br>");
    </script>
    </head>
    <body>
    </body></html>