Javascript-2.js变量数据类型

最新推荐文章于 2022-06-14 21:00:00 发布

牛马小龙

最新推荐文章于 2022-06-14 21:00:00 发布

阅读量145

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_65769258/article/details/122141287

版权

一.变量

变量用于存储编程所使用的数据和方法。

声明一般变量关键字： var，let，const。其中let和const是es6语法。

声明其他特殊变量关键字： function，class，import（先了解）等

1.声明变量

变量用于存储数据，因此可以认为变量实际上就是一个容器

存储在变量中的数据，叫做变量的值。

<!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>
    
    <script>
        // 声明变量, var声明(定义), age变量的名称
        var age;
        var num;
        var username;
        // 同时声明多个变量
        var a,b,c;
    </script>
</body>
</html>

2.变量赋值

如何给变量存储数据？

给变量存储数据的过程，叫给变量赋值。符号是 ‘=’。

ps:这里的 = 不是数学上的 =。


// 声明变量
var age; 
var username; 
// 变量赋值
age = 100; 
username = '张三';
// 变量的声明和赋值可以同时进行
var age2 = 80;

// 把一个变量的值赋给另外一个变量
var a = 100;
var b = a;

3.变量必须先声明后使用，否则报错。

例如企图获取一个未声明的变量的值，或者给一个未声明的变量赋值，都会导致错误，声明了没赋值，输出值为undefined。

<!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>
    
    <script>
        var age = 100;
        console.log(age);

        // 变量没声明就使用, 会报错
        var b = a;
    </script>
</body>
</html>

二.标识符命名规则

标识符：编程中的各种名字，例如变量名，属性名，函数名，数组名，对象名，等等。

编程中起名字（标识符的命名）的规则；

1：以字母、下划线、$开头, 其它字符可以是字母、下划线、$、数字

2：区分大小写(html不区分)

3：不能和关键字保留字冲突, 比如function, if, continue.......

标识符命名习惯：

使用英文单词, 比如:
```
var username = '张三';
var age = 100;
```

单词+数据类型。例如:

var foodName = '番茄炒蛋';
var foodPrice = 100.00;

3.驼峰命名。多个单词构成一个标识符，则第一个单词首字母小写(小驼峰)，后续单词首字母大写。例如：

var foodName = '番茄炒蛋';
var foodPrice = 100.00;
var getEleById;

三.常量（先了解）

常量，意即值不能修改的数据。

常量的值就是常量的本身。

例如10就是一个数据，它的值就是10本身。它的值不能修改。不能把10变成

ES6使用const声明一个常量。

const声明常量是必须同时赋值，并且后续不可再修改。

const x = 100; 
x = 111; // 会报错

四.数据类型

[思维导图](【腾讯文档】无标题思维导图腾讯文档)

1.数字number

<script>
    // 整数
    var num1 = 100; // -100
    // 小数
    var num2 = 88.88; // -88.88
    // 无穷大
    var num3 = Infinity; // -Infinity
    // 不是一个数字
    var num4 = NaN; 
</script>

2.字符串string

用来在编程中描述文字的变量

<script>
    // 表达方式1
    var str1 = "hi";
    // 表达方式2
    var str2 = 'hello';
    // 表达方式3(es6)
    var str3 = `hello web`;
</script>

字符串的拼接

<script>
    // 字符串拼接(es5)
    var str = 'hello' + 'web';
    var str1 = '胡';
    var str2 = '儒清';
    var str3 = str1 + str2;
    console.log(str3);

    // 字符串拼接(es6)
    var y = '2021';
    var m = '12';
    var d = '20';
    // es5
    var today1 = y+'年'+m+'月'+d+'日';
    // es6
    var today2 = `${y}年${m}月${d}日`; 
    console.log('today1',today1)
    console.log('today2',today2)
</script>

3.布尔bollean

用来表示真假的俩种情况

<script>
    // 表示门的开关状态
    var isOpen = true;
    var opened = false;

    // 表示是否已经登录
    var isLogin = true; 
</script>

4.undefined

<script>
   var age;
   console.log(age);
</script>

5.null

声明一个变量打算将来存放对象, 可以先给它赋值null

<script>
  var obj = null;
</script>

6.object之纯对象

对象用来描述一个人或者一个物体的很多特征的一个组合

<script>
  // 声明一个对象
  var person = {
    name: '张三',
    age: 100,
    address: '广东深圳'
  }
  console.log('person', person);

  // 获取对象属性
  var username = person.name;
  var age = person['age'];
  console.log('username',username);
  console.log('age',age);

  // 修改对象属性
  person.age = 20;
  person.name = '李四';
  console.log('修改后的对象',person);
  

  // 删除对象属性
  delete person.address;
  console.log('删除后的对象',person); 
</script>

7.object之数组

数组用来存放一组数据, 对象是无序的, 但数组是有序的, 数组可以存放任意类型, 但通常一个数组只会存放同一种类型的数据

<script>
   // 声明一个数组
   var arr = ['a','b','c','d','e','f'];
   // 获取数组长度
   var len = arr.length;
   console.log('数组长度',len);
   // 第一个成员
   var first = arr[0];
   var second = arr[1];
   var last = arr[len-1];
   console.log('第一个',first);
   console.log('第二个',second);
   console.log('最后一个',last);  
</script>

8.object之函数

函数用来实现某个功能, 函数可以"打包"多条语句一起执行, 函数可以重复调用

比如做一顿饭,需要做的事情有:
1. 买菜
2. 洗菜
3. 做饭  
4. 炒菜
5. 端上桌子

// function声明函数的关键字
// cooking 函数名称    
function cooking() {
    // 函数体-需要运行代码
} 
// 运行(调用)函数
cooking();

五.检测数据类型

使用typeof

六.用js操作网页

js可以用来跟用户进行交互，具体就是用户发出一个动作，我们根据需要用js去操作网页，操作网页包括:添加事件，修改网页内容，修改网页样式，修改网页属性。

1.选择标签

querySelector（选择器）选择一个元素节点对象
querySelectorAll（选择器）选择多个元素节点对象

<!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>
   <div id="app">box1</div>
   <div class="aa">box2</div>

   <ul>
      <li>1.xxx</li>
      <li>2.xxx</li>
      <li>3.xxx</li>
   </ul>

   <script>
      // 选择(获取)#pp节点对象,querySelector只能选择一个
      var $app = document.querySelector('#app');
      console.log('$app',$app);
      var $aa = document.querySelector('.aa')
      console.log('$aa',$aa);

      var $liList = document.querySelectorAll('ul>li');
      console.log('$liList',$liList);
   </script>
</body>
</html>

2.添加事件

//方式1
<!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>
    <button onclick="alert('哈哈哈')">按钮1</button>
    <button onclick="say()">按钮2</button>
    <script>
        function say(){
            alert('你是牛马，哈哈哈');
        }
    </script>
</body>
</html>
//方式2
<!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>
    <button>
        按钮
    </button>
    <script>
        //1.获取dom节点对象
        var $btn = document.querySelector('button');
        console.log($btn);
        //2.给dom节点对象添加onclick属性
        $btn.onclick = function(){
            alert('你是牛马，哈哈哈');
        }
    </script>
</body>
</html>
//方式3
<!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>
    <ul>
        <li>1.xxxx</li>
        <li>2.xxxx</li>
        <li>3.xxxx</li>
        <li>4.xxxx</li>
        <li>5.xxxx</li>
    </ul>
    <script>
        var $li = document.querySelectorAll('ul>li');
        console.log('li',$li);
       for(var i=0;i<$li.length;i++){
           $li[i].onclick=function(){
               this.style.background='red';
           }
       }
    // var ul=document.querySelector('ul');
    // ul.addEventListener('click',function(e){
    //     e.target.style.background='red';
    // }) 事件监听(目前不懂)
    </script>
</body>
</html>

3.操作网页

1.元素的内容

2.元素的样式

3.元素的属性

1.获取和修改元素内容

innerText 只能获取元素内的文本
innerHTML获取元素内容包含了标签
给上面俩个重新赋值可以修改其内容

<!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>
    <div class="box1">box1</div> 
    <div class="box2">
        大萨达
       <button>按钮</button>
       <span>啊啊啊</span>
    </div>
    <div class="box3"></div>
    <script>
        var $box1 = document.querySelector('.box1');
        console.log($box1);//获取元素节点
        var $box2 = document.querySelector('.box2');
        console.log('$box2',$box2);//获取元素节点
        console.log('$box2.innerText',$box2.innerText);//只获取的元素（包括子元素）里面的文本内容
        console.log('$box2.innerHTML',$box2.innerHTML);//获取本元素的文本和子元素的标签和标签内容，
        var $box3 = document.querySelector('.box3');
        $box3.innerHTML = '<input/> <button>按钮</button>';//会被下一句的设置文本或者
                                                        //设置标签文本给覆盖，只能存在一句
        $box3.innerHTML = 'niuma';
    </script>
</body>
</html>

2.获取和修改元素样式

以下所讲例子仅限于行内样式

1.获取元素节点对象

2.获取节点样式

dom对象.style.color //获取颜色
dom对象.style。fontSize //获取字体大小 -符号要去掉，改用大写字母连接

<!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>
    <div style="color:red;font-size:22px;">元素节点样式</div>
    <script>
        var $sty = document.querySelector('div');
        $sty.style.color = 'yellow';//颜色改为黄色  
        $sty.style.fontSize = '30px';//字体大小改为30px
    </script>
</body>

</html>

3.获取和修改元素属性

1.获取dom节点

2.获取元素属性：dom对象.属性名（ps：获取类名是dom对象.className）

3.修改元素属性: dom对象.属性名 = ‘新的值’；

<!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>
    <input id="inp1" type="text" name="username"> 
    <input id="inp2" type="checkbox">
    <a href="http://www.baidu.com">百度</a>
    <script>
        var $inp1 = document.querySelector('#inp1');
        $inp1.type = 'password';
        var $inp2 = document.querySelector('#inp2');
        console.log($inp2.checked);
        $inp2.checked = 'true';
        var $a = document.querySelector('a');
        $a.href = 'http://sina.com';
        $a.innerHTML = 'xinlang';
    </script>
</body>
</html>

牛马小龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-2.js变量数据类型

变量用于存储编程所使用的数据和方法。声明一般变量关键字： var，let，const。其中let和const是es6语法。声明其他特殊变量关键字： function，class，import（先了解）等1.声明变量变量用于存储数据，因此可以认为变量实际上就是一个容器存储在变量中的数据，叫做变量的值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-.
复制链接

扫一扫