js + js数据类型

1、JavaScript在HTML中的引入方式

1、直接在行内添加JavaScript代码：

    <a href="javascript:alert('hello');">hello</a>
    <div onclick="alert('123456')">点击我试试</div>
    <span onclick="alert('123456')">点击我试试</span>
    <p class="p1">鼠标悬浮</p>

2、写在body下面，有两种方式

1）在HTML文件内部编写代码：（"//"表示注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    // 在此处直接编写 js 代码
</script>
</html>

3）在HTML文件外部编写代码，HTML文件内部引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>

<script src="./js/index.js">
    // 在 script 标签中进行 src 引入
</script>
</html>

3、也可以在head中进行编写，但必须要使用 window.onload ,当页面加载完毕之后再执行js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    <script>
        // 使用 window.onload 函数，js 代码写在函数内部
        window.onload = function(){
        }
    </script>
</head>
<body>

2、js 的输出方式

1、弹窗输出

警告框：alert('hello world');

对话框：prompt('你叫什么名字？');

2、页面输出

document.write("hello world")

3、控制台输出（不是为了给用户看的，给开发者（程序员），错误信息）

console.log('hello world');

3、js的命名方式

var username = 'jack'; var 表示"声明", 意为声明一个变量，var 后面、等号左边，是变量的名称，等号右边是变量的值。

username = 'Tom'; 在var声明过后的变量可以不用添加var

name = "joan"; 注意，代码之前未有var声明，那么在未添加 "use stript" 严格声明之前，该方式依旧可用

console.log(username); 控制台输出（控制台位置在浏览器-->F12-->Console）

console.log(name);

4、变量

上一小节提到了js的命名方式，在其中我们提到了变量，可以知晓：=左边是变量名，=右边是变量的值
1、var name; // 变量的声明：name = 变量名
name = zichen; // 赋值：zichen = 变量的值
注意：如果只是声明了一个变量，但是没有给这个变量赋值，输出的时候,就是 undefined （翻译是：未定义的）

2、一般不要将var声明放在输出之后在给值或不给值的情况下，其结果相同，实例输出结果：

这样看起来仅仅只是变量值没有定义，那么下面这个例子，是在没有var声明情况下：

3、变量的类型
字符串：只要用引号包裹起来的,就是字符串
数字类型：0 18 -5 5.5 （零，正整数，负整数，正、负小数）

5、字符串类型 string

1. 只要用引号包裹起来的就是字符串(双引号,单引号)
var name = 'jack';
var age = "18";
console.log(name,age);
console.log(typeof name); 注意：typeof 的作用是检测当前变量值的类型
console.log(typeof(age));

2. 双引号里面不能写双引号，单引号里面不能写单引号
var say1 = "我今天学习了新知识 'javascript'";
var say2 = '我今天学习了新知识 "javascript"';
var say3 = "我今天学习了新知识 \"javascript\""; 注意新知识：反斜杠 "\"，是转义字符，\"表示双引号

console.log(say1);
console.log(say2);
console.log(say3);

<script>
    var say1 = "我今天学习了新知识 'javascript'";
    var say2 = '我今天学习了新知识 "javascript"';
    var say3 = "我今天学习了新知识 \"javascript\"";
    console.log(say1);
    console.log(say2);
    console.log(say3);
</script>

3. 可以添加转义字符
var str = "我想要换行\n黄行之后的内容"; \n 表示换行
document.write(str); 注意：换行在页面进行输出时，无法进行换行，在页面换行，只有<br/>才行
alert(str);
console.log(str)
var str1 = "\062"; // 2*8^0+6*8^1 = 2+48 = 50
console.log(str1); \0 表示转为字符

var str2 = 0b11010111;
console.log(str2); 0b只有二进制数才能连接，作用是将二进制数转为十进制数

4. 字符串中的特殊符号 +
注意:只要+两边,有任意一个是字符串类型,那么+就是字符串拼接的作用
console.log(1+'hello');
console.log(1+'100');
console.log(1+100);
var str = 'jack';
console.log(str + 100);

5. 所有的变量只要用引号包裹起来,就会变成字符串

6、数字类型

1. 进制表示数字
二进制 0b
八进制 0
十六进制 0x
最终输出的时候,一定是十进制

        var num1 = 014;   // 八进制 14 转十进制
        var num2 = 0b10110; // 二进制 10110 转十进制
        var num3 = 0x147;    // 十六进制 147 转十进制
        console.log(num1);
        console.log(num2);
        console.log(num3);

输出结果：

2. 整型和浮点型
var num1 = 10.5;
console.log(typeof num1); 输出结果是 number (数字类型)

3. number类型( number , NaN[not a number] )
任何一个 NaN 和另外一个 NaN，永远不相等
console.log(typeof 10);
console.log(10 - 'a'); 其结果就是NaN

4. toFixed ( 小数点后的位数 ) 保留小数点后的位数
特点：四舍五入
console.log(0.158);
console.log(0.158.toFixed(2));

5. 浮点数是一个近似值
所以,有时候得到的并不是我们期待的结果
console.log(0.1+0.2);
console.log(1-0.9);
6. parseInt 得到一个整型，没有四舍五入
parseFloat 得到一个浮点型
console.log(parseInt(25.123)); 其结果是25
console.log(parseInt(25.623)); 其结果时25
console.log(parseFloat(25.623)); 其结果是 25.623

console.log(parseFloat(25.686.toFixed(2))); 其结果时 25.69

7、布尔型 Boolean

布尔类型只有两个值

1、真 true

2、假 false

通常在判断的时候使用

8、未定义 undefined

1. 定义了一个变量，但没有为该变量赋值，使用了一个并未赋值的变量

var str;

console.log(str);

2. 使用了一个不存在的对象的属性时

1) 天生有对象

使用js自带的对象,日期事件,字符串,数组....

2) 没有对象,创建对象

创建,new Object

字面量的方式创建

var Dog = {
    // 属性
    'name':'旺财',
    'age':3,
    // 方法
    'eat':function(){
        // 在对象的方法中调用属性,this.name
        // console.log('我叫'+this.name+'我喜欢吃肉');
        // name 指的是,对象外面的name变量
        console.log('我叫'+name+'我喜欢吃肉');
    },
    'drunk':function(){
        console.log('喝酒');
    }
}
console.log(Dog.a);

当我们执行 Dog.a 时，返回的是 andefined

属性：本身所具有的

carObj.color = 'red';

carObj.brand = 'BMW';

方法：能做的事情

carObj.run = function(){

console.log('能跑...');

}

null 空值

9、数组 array

array 可以放个值的数据类型

创建

1、类 - 实例化对象 - 对象

var arr = new Array();

var arr2 = new Array();

arr2[0] = '苹果';

arr2[3] = '香蕉';

console.log(arr2);

var arr = new Array("焦作","武陟","云台山");

console.log(arr);

2、使用[]创建(使用的最多的,最方便)

var arr1 = ["上海","杭州","深圳"];

console.log(arr1);

获取里面的值

0,1,2 表示数组的键/下标

var arr1 = ["上海","杭州","深圳"];

console.log(arr1);

console.log(arr1[0]);

console.log(arr1[1]);

console.log(arr1[2]);

多维数组

var arr1 = [

[['高新区','金水区','中原区'],'开封','洛阳'],

['朝阳区','海淀区','丰台区'],

['宝山区','浦东新区','徐汇区']

];

console.log(arr1[1][2]); 表示 arr1 中的 [1] 下面的 [2]

console.log(arr1[0][0][0]); 表示 arr1 中的 [0] 下面的 [0] 下面的 [0]

10、严格模式

使用严格模式

        "use strict";
        x = 3.14; 
        console.log(x);

去掉严格模式

    <script>
        // "use strict";
        x = 3.14; 
        console.log(x);
    </script>

输出结果：

posted @ 2023-10-30 19:10 五季-子琛阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

izichen

js + js数据类型

公告