Javascript

最新推荐文章于 2023-05-02 11:32:14 发布

羊咩咩a284811

最新推荐文章于 2023-05-02 11:32:14 发布

阅读量236

点赞数

分类专栏：学习经验

本文链接：https://blog.csdn.net/qq_43477676/article/details/111579701

版权

本文详细介绍了JavaScript在网页交互中的作用，包括HTML、CSS和JS的职责。探讨了JavaScript的基础知识，如变量定义、数据类型、常用函数、类型转换、运算符、流程控制、函数以及内置对象如String、Number、Array和RegExp。此外，还提到了正则表达式的应用，用于数据验证，以及自定义对象的创建方法和原型的概念。

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

简介及作用

作用：为了在浏览器端进行数据处理。
html：负责网页的结构。
css：负责网页的美化。
js：负责网页的交互（数据验证，网页特效）
Javascript的知识体系：
常用函数：
//单行注释
/多行注释/
常用函数
alert(“提示框”);
document.write(“输出内容”);//类似输出打印

如何使用 1.内部js

特点：
1.使用

2.外部js
特点：
1.独立一个js文件，编写js内容，在html导入js文件。
2.好处:和html文件进行分离，利于维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
     <script type="text/javascript">
         //单行注释
         /*多行注释*/
         //常用函数
         //alert("提示框");
         //document.write("输出内容");//类似输出打印
     </script>
     <!--导入外部js文件-->
     <script type="text/javascript" src="js.js"></script>
<body>
   羊咩咩
</body>
</html>

基础语法

定义变量：var 变量名
js的数据类型：
number:不管整数还是小数。
string:不管是字符串还是字符。
boolean:布尔值。
object:对象类型。
js弱类型语言：对类型的检查比较宽松。
java强类型语言：对类型的检查比较严格。
undefined：是变量没有赋值的时候，该变量不能使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
     <script type="text/javascript">
         //单定义变量 var 变量名：定义变量时类型不确定，给变量赋值时类型才确定，可以省略var，但是不建议省略。
         var a;
         //赋值
         a = 10;
         var b = 3.14;
         var c = "hello";
         var d = 'h';
         var e = true;
         var f = new Object();
         document.write("a的值:"+a+",类型是:"+typeof(a)+"<br/>");//number
         document.write("b的值:"+b+",类型是:"+typeof(b)+"<br/>");//number
         document.write("c的值:"+c+",类型是:"+typeof(c)+"<br/>");//String
         document.write("d的值:"+d+",类型是:"+typeof(d)+"<br/>");//String
         document.write("e的值:"+e+",类型是:"+typeof(e)+"<br/>");//boolean
         document.write("f的值:"+f+",类型是:"+typeof(f)+"<br/>");//对象类型
     </script>
<body>

</body>
</html>

常用的转换函数
字符串->整数
java:Integer.parseInt(“字符串”)
js:parseInt(“字符串”)
注意：
1.可以转换10进制
2.可以转换16进制
3.如果第一个字符是数值类型，则继续转换，直到非数值类型，否则转换错误(NaN)
字符串->小数
java:Float.parseFloat(“字符串”)
js:parseFloat(“字符串”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    /*可以转换10进制的整数*/
        var a ="10";
        document.write(a+"转换前是"+typeof(a)+"<br/>");
        //转换
        a=parseInt(a);
        document.write(a+"转换后是"+typeof(a)+"<br/>");
    /*可以转换16进制的整数*/
        var b ="0x10";
        document.write(b+"转换前是"+typeof(b)+"<br/>");
        //转换
        b=parseInt(b);
        document.write(b+"转换后是"+typeof(b)+"<br/>");
     /*NaN:Not a Number 不是数值，转换错误*/
     /*如果第一个字符是数值类型，则继续转换，直到非数值类型，否则转换错误*/
         var c ="3.1415926";
        document.write(c+"转换前是"+typeof(c)+"<br/>");
        //转换
        c=parseInt(c);
        document.write(c+"转换后是"+typeof(c));

    </script>
</head>
<body>

</body>
</html>

运算符
算数运算符：+ - * / %
在js中，boolean类型可以使用1和0来表示true和false
比较运算符：> >= < <= == !=
逻辑运算符：&&(与) ||(或) !(非)
&& || ：具有短路功能*
赋值运算符：= += -= *= /=
三目运算符：表达式 ?: true的情况:false的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //算术运算符
       var a = 80;
       var b = 10;
       var c = true;
       document.write("和是"+(a+b)+"<br/>");//number+number
       document.write("hello"+(a+b)+"<br/>");//string+number
       document.write(c+(a+b)+"<br/>");//bollean+number 在js中，boolean类型可以使用1和0来表示true和false
       //比较运算符
        document.write((a>b)+"<br/>");
        //==:比较的是值内容
        //===:比较的是值和类型
        //逻辑运算符
        document.write(((a>b)&& false)+"<br/>");
        document.write(((a>b)|| false)+"<br/>");
        //赋值运算符
        a+=100;
        document.write(a+"<br/>");
        //三目运算符
        document.write((a>100)? "大于100":"小于100">+"<br/>");
    </script>
</head>
<body>

</body>
</html>

在js中如何让使用debug功能
使用插件Firebug。
流程控制语法
条件：if(){ }elseif { }…else{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
         /*if的条件可以写的内容:
            boolean:  true:成立;false:不成立
            Number:   非0数值:成立;0:成立
            string:   非字符串:成立;空字符串:不成立
            object:   new object() 非null的对象代表成立;null:不成立
            */
         if(100>99){
    
            alert("大于");
         }else{
    
            alert("小于");
         }
    </script>
</head>
<body>

</body>
</html>

条件：swtch(){ case1: case2: case3: }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
         /*case可以写的内容:
            常量 变量 表达式
            */
         /*
         var a ="A";
         switch(a){
         case "A":
              alert("A");
              break;//如果不break，继续执行下一个条件。
         case "B":
              alert("b");
              break;
         default:
              alert("c");
         }
         */
         var a =100;
         switch(true){
    
         case a>=80:
              alert("大于80");
              break;//如果不break，继续执行下一个条件。
         case a<80:
              alert("小于80");
              break;
         }
          
    </script>
</head>
<body>

</body>
</html>

循环：for(int i=0;i<10;i++){ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
         var result = 0;
         for(var i=1;i<=100;i++){
    
            result += i;
         }
          alert(result);
    </script>
</head>
<body>

</body>
</html>

循环：while(x>10){ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      var x = 1;
      while(x<=10){
    
          document.write("羊咩咩");
          x++;
      }
    </script>
</head>
<body>

</body>
</html>