js引入方式、调试语句、变量（基本数据类型和引用数据类型）

最新推荐文章于 2023-08-12 11:58:00 发布

傻乎乎的小不点

最新推荐文章于 2023-08-12 11:58:00 发布

阅读量441

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_62697897/article/details/126999570

版权

1.js引入方式

（1）内部引入方式：在script标签里写js代码

（2）外部引入方式：使用script标签引入外部js文件

代码：

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 20px;
            text-align: center;
            background-color: black;
            color: white;
        }
    </style>
    <script>
        alert("我目前在head标签中  滴滴滴")
    </script>
</head>
<body>
    <!-- js的引入方式：
         1.行间引入   几乎不用
         2.内部引入   head标签中(一般不用)  body里面  body下面 
    -->
    <!-- onclick：单击事件  alert：提示语句 -->
    <div onclick="alert('我是提示按钮')">我是提示按钮</div>
    <a href="javascript:alert('我是a标签')">我是test按钮</a>

    <script>
        alert("我目前在body中  哒哒哒")
    </script>
</body>
<!-- 外部引入   src放置外部文件路径   项目中最常用-->
<script src="js/index.js"></script>
<script>
    alert("我目前在body下面 啦啦啦")
</script>
</html>

运行结果：

2.调试语句

（1）alert：弹窗

（2）console：控制台输出

<1>log：日志

<2>error：错误

<3>warn：警告

代码：

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    // 调试语句
    // alert()  给一些有好的提示会用到
    console.log("我是一条咸鱼!")   //打印日志  最常用
    console.error("我不是故意的")  //打印错误
    console.warn("我警告你离我远一点")   //打印警告

    //document.write("一枝红杏出墙来")

    //1.声明变量  var
    //定义一个变量
    var num=10   //num  变量名 = (赋值)  10变量值
    console.log(num);
    // 定义多个变量
    var num1=20,num2=30;
    var num4=null;

    //  定义变量注意点：
    //        1. 变量声明后再使用
    //        2.变量声明要赋值

    //注释：单行注释//   多行注释/**/

    /*变量命名规则：
             1.变量名区分大小写 x和X不一样  
             2.变量名由字母、数字、￥$美元符号、 _下划线组成，不包含空格或者其他特殊符号  不可以用数字开头
             3.不可以用js中关键字和保留字  eg：class  const  for  
             4.如果变量名由多个单词组成的话  用驼峰命名法或者下划线-隔开 eg：boxDiv  box-div  BoxDiv
    */
   var  x=999
   var  x=666

//    var  f1=
</script>

</html>

运行结果：

3.定义变量

（1）定义一个变量：var变量名=变量值

（2）定义多个变量：var变量名1=变量值1，变量名2=变量值2，变量名3=变量值3······

注意：变量声明后再使用，变量声明后要赋值

（3）变量命名的规则：

<1>变量名区分大小写（x和X不是同一个变量）

<2>变量名由字母、数字、美元符号、_下划线组成，不包含空格和其它标点符号，但第一个字符不允许是数字，可以用$和_开头

<3>禁止使用js关键词、保留字命名

<4>当变量由两个或者两个以上单词组成，用驼峰命名或者_隔开 eg：var showDiv var show_div varShowDiv

4.数据类型

（1）Number：数字

（2）String：字符串

（3）Boolean：布尔值

<1>false

<2>true

（4）Undefined：未定义

（5）Object：对象

<1>array：数组使用索引取值，索引从0开始

<2>object：对象对象名.属性名可以拿到属性值

<3>null：空对象

（6）function：函数

（7）基本数据类型和引用数据类型的区别：

<1>Object和function属于引用数据类型，其它属于基本数据类型

<2>基本数据类型：值在栈区（内存）所有的变量都在栈区

<3>引用数据类型：值在堆区（内存）

注意：输出变量类型：typeof(变量)

代码：

<!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>数据类型</title>
</head>
<body>
    
</body>
<script>
    // 数据类型：数字、字符串、boolean、undefined、object 函数
    // 1.数字类型 number
    var num1=50,num2=60;
    var num3=num1+num2
    // alert(num3)
    // typeof()  判断某个变量的数据类型
    console.log(typeof(num1));

    // 2.字符串  用引号"" ''包起来的就是字符串
    var str='hello world'
    var str1='10'
    // 任何数据类型和字符串进行拼接都会变成字符串
    var newStr1=str1/1+20
    console.log(newStr1);
    console.log(typeof(newStr1));

    // 如何把字符串类型转换为数字类型
    // 1.Number(字符串)  
    // 2.字符串*、-、/数字
    // 3.布尔值 true和false   一般在判断语句当中
    var bool=true
    console.log(typeof(bool));
    if(bool){
        console.log("符合条件测试");
    }

    // 4.undefined
    var str5;
    console.log(typeof(str5));

    // 5.Object  null空对象   array数组   object对象
    var  x=null
    console.log(typeof(x));

    // 数组 将同一类型的数据放到一起  length获取数组长度
    var fruits=['苹果','荔枝','橘子','葡萄','榴莲','菠萝']
    // 数组中取值  通过数组名[索引值]   数组里的索引从0开始
    console.log(fruits);
    // console.log(fruits[0]);
    // console.log(fruits[1]);
    // console.log(fruits[2]);
    // console.log(fruits[3]);
    for(var i=0;i<fruits.length;i++){
        console.log(fruits[i]);
    }

    // object 对某一个东西的具体描述  key:value
    var cat={name:'汤姆',like:'老鼠',color:'yellow'}
    // 对象取值  对象名.key cat.like
    console.log(cat.name);

    // 6.函数  function

    /*
      ***基本数据类型：数字、字符串、undefined、boolean
      引用数据类型：对象和函数
      区别：基本数据类型实现拷贝的时候  俩值互不影响
           引用数据类型实现拷贝的时候  俩值互相影响

            基本数据类型：值在栈区(内存)
            引用数据类型：值在堆区

            深浅拷贝：
            浅拷贝：拷贝了地址
            深拷贝：拷贝了内容

    */

    var  x=10;
    var  y=x;
    console.log(y);
    newNum10=20;
    console.log(x);

    var arr=[1,2,3,4,5]
    var newArr=arr;
    console.log(newArr);
    newArr[0]=100;
    console.log(arr);
</script>
</html>

运行结果：

5.数据类型转换（字符串和数字）

（1）数字转化为字符串

<1>变量.toString

<2>String(变量)

<3>变量+"字符串"，任何数据类型和字符串相加都变成字符串

（2）字符串转化为数字

<1>Number(变量)

<2>变量 ×、-、/ 1

注意：如果字符串无法转化为数字类型会输出NaN（NaN是Number类型）

代码：

<!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>字符串和数字相互转换</title>
</head>
<body>
    
</body>
<script>
    // 字符串转数字
    // 1.Number()
    // 2.字符串*、-、/

    var str='999'
    console.log(typeof(str));
    var newStr=Number(str);
    console.log(typeof(newStr));
    console.log(newStr+1);

    // 数字转字符串
    // 1.用数字拼接字符串  eg：1+''
    // 2.数字.toString()
    // 3.String(数字)

    var n=100;
    var n1=n+'';
    var n2=n.toString();
    var n3=String(n);
    console.log(typeof(n3));

    //NaN not  a  number   数据类型:number
    var  str='abc';
    var  newStr=str*1;
    console.log(typeof(newStr));
    alert(newStr);
</script>
</html>

运行结果：

傻乎乎的小不点

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js引入方式、调试语句、变量（基本数据类型和引用数据类型）

（1）定义一个变量：var变量名=变量值（2）定义多个变量：var变量名1=变量值1，变量名2=变量值2，变量名3=变量值3······注意：变量声明后再使用，变量声明后要赋值（3）变量命名的规则：变量名区分大小写（x和X不是同一个变量）变量名由字母、数字、美元符号、_下划线组成，不包含空格和其它标点符号，但第一个字符不允许是数字，可以用$和_开头禁止使用js关键词、保留字命名。
复制链接

扫一扫