JavaScript基础——变量、运算、循环、对象

最新推荐文章于 2024-08-14 21:21:15 发布

零怀念

最新推荐文章于 2024-08-14 21:21:15 发布

阅读量183

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/linghuainian/article/details/81557889

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS基础

JS与DOM的关系

浏览器拿到DOM这棵树，将其渲染成html，加上各种漂亮的css，呈现给我们。

浏览器内部有一个js的解释器执行，我们在html里写一个js代码，js代码被引擎所执行，执行的结果，就是对DOM的操作，而对DOM的操作结果，就是我们常看到的特效，比如漂浮，变色。

javascript是操作dom，处理完dom，浏览器接着渲染，这样有了页面的变化。

DOM对对象——把body,div,p等节点树看成一个对象。

JS如何引入

1.页面内script代码

<script>
code......
</script>

2.引入外部js文件

<script src="./in.js"></script>

script标签在页面内的任意处都可以写，多段script代码的执行顺序是按引入顺序，逐段执行。

变量声明

JS的变量名由_，数字，字母，$组成，但是数字不能开头。用var 变量名来声明变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var A=3;
        var a=4;
        console.log(A,a);
        var $="hello world";
        console.log($);
    </script>
</head>
<body>
</body>
</html>

变量名区分大小写，A和a不是一个变量。不用var声明变量会污染全局变量，至于为什么可以看我的另一篇文章JavaScript中用var声明变量有什么意义

变量类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //数值类型
        var a=3;
        var b=1.3;

        //字符串类型
        var c="hello";
        var d='world';

        //布尔型
        var e=true;

        //对象类型未定义为null
        var f=null;

        //原生类型未定义为undefined
        var g=undefined;

        //对象类型
        var h={name:"mike",'age':23};

        //数组，也是对象类型
        var arr=[2,'hello',true,h];

        //undefined
        var m;

        console.log(typeof b+":"+b)//number:1.3
        console.log(typeof e+":"+e);//boolean:true
        console.log(typeof f+":"+f);//object:null
        console.log(typeof g+":"+g);//undefined:undefined
        console.log(typeof h+":"+h);//object:[object Object]
        console.log(typeof arr+":"+arr);//object:2,hello,true,[object Object]
        console.log(typeof m+":"+m);//undefined:undefined
        console.log(h)//{name: "mike", age: 23}
        console.log(h.name);//mike
        console.log(h['name']);//mike
        console.log(arr[3]);//{name: "mike", age: 23}
    </script>
</head>
<body>
</body>
</html>

运行结果：

运算符

1."+"

一旦碰到非法数字，后面的一律理解为字符串的拼接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(2+3);
        console.log("hello"+" "+"world");
        console.log(2+3+4+"hello "+"world"+5+6);
    </script>
</head>
<body>
</body>
</html>

运行结果：

2."&&"

返回最早代表的false的那个值，如果全是true，那么返回最后一个值。

true:数值（除了0），字符串（包括" "，不包括""），true

false:0，""，null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a=true;
        var b="hello";
        var c=6;
        var d=false;
        var e=null;

        console.log(a && e && d && c);
        console.log(a && b && c);
    </script>
</head>
<body>
</body>
</html>

运行结果：

3."||"

返回最早代表true的那个值，如果全都是false，则返回最后一个值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a=true;
        var b="hello";
        var c=6;
        var d=false;
        var e=null;
        var f=0;
        var g="";

        console.log(d || f||a||b);
        console.log(d || f ||g|| e);

    </script>
</head>
<body>
</body>
</html>

运行结果：

循环结构

字符串，数组有length属性，可以用for循环遍历。

对象类型用for(k in person)的结构遍历，k遍历person的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //字符串
        var string="hello world";
        for(var i=0;i<string.length;i++){
            console.log(string[i]);
        }

        //数组
        var arr=["hello",4,"world"];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i])
        }

        //对象
        var person={name:"mike",age:10}
        for(var i in person){
            console.log(i+":"+person[i])
        }
    </script>
</head>
<body>
</body>
</html>

运行结果：

注意：对象中的属性可以用引号也可以不用引号，但是属性值如果是字符串的话一定要用引号。想要输出对象的属性值有“.”和"[]"两种方法，例如上面的代码"person.name"，"person['name']"都可以打印出"mike"。中括号里面的name加了引号，表示要打印的是属性名为"name"的属性值；如果不加引号，表示要打印的是属性名为变量name代表的字符串的属性值。所以上面循环遍历只能使用person[k]，而不能使用person.k或者person["k"]。

JS对象

内置对象

所有事物都是对象。JavaScript提供多个内置对象，拥有属性和方法。如布尔型、数字型、字符串、日期、数组、正则表达式、甚至函数都可以看成是对象。对象的属性和方法可参考JavaScript 对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var string="hello world";
        console.log(string.length);
        console.log(string.substr(2,3));
        console.log(string.substring(2,3));
        console.log(string.indexOf("llo"));//返回下标，没找到返回-1

        var arr=["春","夏","秋","冬"];
        console.log(arr.join("_"));
        console.log(string.split(" "))

        var date=new Date();
        console.log(date.getFullYear());

        console.log(Math.floor(3.7));//返回不大于3.7的最大整数
        console.log(Math.random());//返回[0,-1)
        console.log(5+Math.random()*10);//返回[5,15)
    </script>
</head>
<body>
</body>
</html>

运行结果：

window对象

window对象是浏览器宿主对象，和js语言无关。window对象的方法可参考JavaScript Window - 浏览器对象模型

1.window.alert("hello world");

2.window.confirm("你确定要删除文件么？")

3.window.prompt("请输入你的用户名","hello world")

4.window.close()//直接关闭该标签页

5.window.open("http://www.baidu.com")//新开一个百度的标签页

6.window.print();

window的子对象

1.navigator——浏览器信息对象

console.log(window.navigator)

2.location——地址栏对象

console.log(window.location)

window.location.href="http:/www.baidu.com";//改变href属性可以让网页跳转到百度的页面

3.history——历史对象

console.log(window.history)

其中，有forward(),back(),go()等方法。

4.screen——屏幕对象

console.log(window.screen)

5.document——HTML文档对象

是html代码形成的对象，操作此对象，可动态的改变页面的内容。

零怀念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——变量、运算、循环、对象

JS基础JS与DOM的关系浏览器拿到DOM这棵树，将其渲染成html，加上各种漂亮的css，呈现给我们。浏览器内部有一个js的解释器执行，我们在html里写一个js代码，js代码被引擎所执行，执行的结果，就是对DOM的操作，而对DOM的操作结果，就是我们常看到的特效，比如漂浮，变色。javascript是操作dom，处理完dom，浏览器接着渲染，这样有了页面的变化。DOM对对象...
复制链接

扫一扫

专栏目录