初识js小结二

最新推荐文章于 2023-03-05 10:03:16 发布

fxqyilu

最新推荐文章于 2023-03-05 10:03:16 发布

阅读量110

点赞数

分类专栏： JavaScript总结文章标签： JavaScript

本文链接：https://blog.csdn.net/fxqyilu/article/details/80355717

版权

JavaScript总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上节讲到数据类型，此处接着讲。

四、数据类型

我们上节讲到数据类型有5种，那么我们来看看例子。

    var a = 1;      // 数值类型，number
    var b = 'hello world';    // 字符串类型(使用单引号或双引号使用的数据)，string
    var c;          // 未定义类型(从来没有给变量赋过值)，undefined
    var d = true;   // 布尔值类型(结果只有true真或false假)，boolean
    var e = 'helloworld' / b;
                    // 不是一个数字类型，NaN
    var f = null;   // 对象类型(通过getElementById获取一个不存在的标签时，得到的结果就是null)，object

（假如你想验证它的数据类型，可如下：）

       console.log('a是', typeof a);
       console.log('b是', typeof b);
       console.log('c是', typeof c);
       console.log('d是', typeof d);
       console.log('e是', typeof e);
       console.log('f是', typeof f);

程序员一般用console.log()打印来检测代码。

在此，值得注意的是：

1. 任意类型+''或""，数据类型都会转变为字符串

+号在这里不是做加法运算，它是把两个内容给连接在一起。例如'a'+'b'='ab'

如下比较：

console.log(typeof (1 + ''), 1+''); //string 1

console.log(typeof String(12), String(12)); //string 12

console.log(0.1+0.2) //0.30000000000000004 (在这里的number类型，js会丢失精度)

2. false, 0, '', null, undefined都是false

true, 非0数字，' ', [object], '1234'都是ture

3. 任何数据类型和undefined运算都是NaN。

在实际应用当中，我们常常要将其它装换成数据类型。

一般有：parseInt()，parseFloat()，Number()……（还有，暂时等补充)。

注意，看例子：

    // parseInt()尝试把字符串转换为整数
    console.log(parseInt('px111.111px'));       // 以非数字开始的，转换结果为NaN
    console.log(parseInt('111.111px'));         // 以数字开始，带有小数点，转换结果为111
    console.log(parseInt('123px111.111px'));    // 以数字开始，数字与数字之间带有非数字类型，转换结果123
    console.log(parseInt('111.111'));           // 纯数字(小数)，转换结果为111
    console.log('=========================================');
    // parseFloat()尝试把字符串转换为浮点数，浮点数和小数是同一概念，区别小数可以精确而浮点的结果是不精确
    console.log(parseFloat('px111.111px'));       // 以非数字开始的，转换结果为NaN
    console.log(parseFloat('111.111px'));         // 以数字开始，以数字作为结束，转换结果为111.111
    console.log(parseFloat('123px111.111px'));    // 以数字开始，数字与数字之间带有非数字类型，转换结果123
    console.log(parseFloat('111.111'));           // 纯数字(小数)，转换结果为111.111
    console.log('=========================================');
    // Number()尝试把字符串转换为数字，只要字符串带有非数据类型的结果都会是NaN
    console.log(Number('px111.111px'));       // 带有非数字类型，转换结果为NaN
    console.log(Number('111.111px'));         // 带有非数字类型，转换结果为NaN
    console.log(Number('123px111.111px'));    // 带有非数字类型，转换结果为NaN
    console.log(Number('111.111'));           // 纯数字(小数)，转换结果为111.111

除此，还有注意进制转换。

  /*
    0000    0
    0001    1
    0010    2
    0011    3
    0100    4
     */
    console.log(parseInt(100, 2));      //第二个数说明第一个是几进制。// 把一个二进制数字转换为10进制，二进制只能出现0和1
    console.log(parseInt(177, 8));

五、事件

事件三要素：事件源事件事件驱动。举例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 50px;
            background: lightblue;
        }
    </style>
</head>
<body>
    <div><input type="button" value="点击变宽" id="btn" /></div>
    <div id="box"></div>
</body>
<script>
    // 点击按钮改变div的宽度
    // 1. 获取产生事件的标签
    var btn = document.getElementById('btn');
    // 2. 给标签绑定一个事件
    btn.onclick = function(){
        // 3. 实现事件驱动程序
        // 3.1 获取id是box的标签
        var box = document.getElementById('box');
        // 3.2 修改个标签的宽度
        box.style.width = '100%';
    };

</script>
</html>

常见的事件有：

js的使用方式有三种：

第一种js使用方式：行内式（不常用）如：

<input type="button" value="别摸我" οnclick="alert('都说不要摸我');alert('这是第二个alert');" />

第二种js使用方式：内嵌式如：

    // 1. 获取标签
    var btn = document.getElementById('btn');
    // 2. 绑定事件
    btn.onclick = function() {
        // 3. 事件驱动
        btn.style.width = '100px';
    }

第三种js使用方式：外链式如：<script src="js/simple.js"></script>

事件一：onload。

window.onlaod的作用是：等待页面结构加载完成以后再执行function里的代码(延迟执行)
注意：
所有代码里只能出现一次window.onload，如果写了多次最一次会把前面的代码给覆盖掉

fxqyilu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识js小结二

上节讲到数据类型，此处接着讲。四、数据类型我们上节讲到数据类型有5种，那么我们来看看例子。 var a = 1; // 数值类型，number var b = 'hello world'; // 字符串类型(使用单引号或双引号使用的数据)，string var c; // 未定义类型(从来没有给变量赋过值)，undefined...
复制链接

扫一扫