基础JavaScript(一)

最新推荐文章于 2024-07-09 18:13:44 发布

小邪铭

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量341

点赞数

分类专栏：前端文章标签： javascript

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript基础(一)

1.JavaScript控制样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="demo01"></div>
</body>
</html>
<script>
 // 获取对象
 document.getElementById("demo01").style.backgroundColor = "blue";
 document.getElementById("demo01").style.width = "200px";
</script>

总结：通过使用obj.style.*控制dom对象的css样式，而且js操作css具有一定的规律:
1.如果css属性没有中划线(-)的，可以直接用style.属性名：
比如：obj.style.background，obj.style.height,obj.style.left，obj.style.position等等。
2.对于含有中划线(-)的属性，将中划线去掉，并将中划线后的第一个字母转为大写字母：
比如：（margin-top,background-image,font-size）转为：obj.style.marginTop,obj.style.backgroundImage，obj.style.fontSize等等。

2.数据类型

字符串(string)、数字(number)、布尔(bool)、数组(Array)、对象(obj)、Null、Undefined

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

2.1 字符串型

    var n1 = 10;
    var n2 = "2";
    console.log(n1 - n2); // 8  在javascript里面，当字符串和数字进行算术运算的时候，系统会先把字符串转换为数字再计算
    console.log("10"+2-"1"); // 101 先执行减号(-) 再执行 +
    console.log(11 == "11"); // true 只是比较值，不比较数据类型。
    console.log(11 === "11");// false 即比较值，也比较数据类型。

总结：
1.一般加引号的都是字符型。比如”123”，”abc”等等。
2.数字转为字符型有两种方法：
a. +”” 转为字符串
b. String(num) 强制转换

2.2 布尔类型

<script>
    console.log(1+true); // 2  true默认为1
    var num = 10;
    console.log(!num);  // false
    console.log(!!num);  // true  强制转换为布尔型
    var n = 0; // 0 就相当于false
    console.log(!n);  // true
</script>

总结：true 和 1 比较是相同，false 和 0 比较是相同（是 “==” 比较），因为系统会实现数据类型的转化，将true 转换成1，将false 转换成0

2.3 number类型

    console.log(1+2); // 3
    console.log(0.1+0.2); // 0.30000000000000004
    console.log(0xb);   // 11 十六进制  转换为  10进制
    console.log(020);  // 八进制 16
    var num = "10";
    console.log(typeof num); // string
    console.log(typeof Number(num)); // 转为数字类型
    console.log(typeof (num-0));// 转为数字类型
    console.log(parseInt(10.35));  // 10
    console.log(parseInt(10.99));  // 10
    console.log(parseInt(7,8));  // 7
    console.log(parseInt("11",2));  //  “11” 是 2 进制  的值， 输出结果是 3（10进制）
    console.log(parseInt("15px"));  //  只取到前面的数字 15
    console.log(parseInt("15px13"));  //  只取到前面的数字 15
    console.log(parseInt("px13"));  //  NaN 不是一个数字

2.4 null 以及 undefined

    var num = 10;
    var txt = "abc"
    var boo = true;
    var timer = null;    // 空类型
    var test;   //  声明变量未给值为  undefined 
    console.log(typeof num);  // number
    console.log(typeof txt);  // string
    console.log(typeof boo);  // boolean
    console.log(typeof timer);  // object
    console.log(typeof test);  // undefined
    var e= [1,2,3]; // 数组
    console.log(typeof e); // object
    console.log(e instanceof Array); // true ->表示 e是数组。

    console.log(timer == test);  // true    ->他们都没有值
    console.log(timer === test);  // false -> 类型不同
    console.log(timer + 10);   // 10
    console.log(test + 10);   // NaN

总结:
1.typeof 可以判断变量的类型，但唯独数组不能判断出来。number, string, undefined, function，boolean类型均能通过typeof方法判断，而array类型输出object，因为typeof方法只能判断基本类型类型（number, string, undefined，boolean），除此之外（包括Date, RegExp，null等都只是object的扩展！）都不靠谱数组一般情况下可以用instanceof来判断。

3.变量以及作用域

3.1 变量

JavaScript 是一种弱类型的脚本语言，即定义变量的时候没有确定他具体是什么类型，都是统一用var关键字来定义；
var x = 3；即变量的声明(变量使用之前必须加var声明，编程规范)

变量的命名规则!
1.变量命名必须以字母或是下标符号”_”或者”$”为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)

3.2 变量作用域

var num = 10;  // 全局变量
    var num = 10;  // 全局变量
    function fun() {
        var result = 20;  // 局部变量  这个变量只能在  fun 函数体内使用
        console.log(num);  // 10
    }
    fun();
    // console.log(result);
    var aa = 10;  // 全局变量
    function fn() { 
        bb = "我是全局变量"; // 注意，这里是全局变量，没有var声明的变量，即使在函数中也属于全局变量
    }
    fn();
    console.log(bb); // 我是全局变量

总结：
全局变量：
1. 写在最外层。函数体外面。
2. 写在函数体内部，但是没有var 声明的变量也是全局变量。

4.函数

 function fn(a,b) {
        console.log(a+b);
    }
    fn(1,3); // 4
    fn(6);  //  NaN -> 因为b是undefined。
    fn(1,2,3);  // 3 -> 只将1，2传递给了a和b，所以结果是3

4.1 arguments参数

在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。

 // 尽量要求形参和实参相互匹配
    function fn(a,b) {
        //  console.log(fn.length); 返回的是 函数的 形参的个数
        // console.log(arguments.length);  返回的是正在执行的函数的 实参的个数
        if(fn.length == arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.error("对不起，参数不匹配，参数正确的个数应该是" + fn.length);
        }
    }
    fn(1,2);

4.2 返回值

function fn() {
        return 8;  // 终止程序执行   不会执行return 下面的语句
        console.log(12);
    }
    fn();  //  函数返回的结果就是8
    console.log(fn());

5.数组声明以及遍历

    var arr = ["刘德华","郭富城","黎明","张学友"];
    console.log(arr[2]); // 黎明
    console.log(arr.length); // 4

    var arr = ["马超","关羽","张飞","赵云","黄忠"];
    console.log(arr[0]);
    //  遍历 数组
    for(var i=0; i<arr.length; i++){
        console.log(arr[i]);
    }
    for(var i= 0,len = arr.length;i<len;i++)  // 效率更高
    {
        console.log(arr[i]);
    }
    // 其他声明方式
    var arr = new Array("1","2");

5.1 数组使用注意

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;

        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
    var divs = document.getElementsByTagName("div");  // 伪数组
    // alert(divs.length);
    divs[0].style.backgroundColor = "red";
    for(var i=0;i<divs.length;i++)
    {
        divs[i].style.backgroundColor = "red";  // 给div 改样式 不是改 数组
    }

</script>

总结：
1.伪数组：能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。
特点：有length属性；按索引方式存储数据；没有数组的push或pop等方法；
jQuery中的$()对象都是伪数组对象。

6.for循环

<script>
     //  for 循环
    var sum = 0;
    for(var i=1;i<=100;i++) { // 从 1 累加 到 100
        sum = sum + i;
    }
    console.log(sum);

    // while
    var sumWhile = 0;
    var i = 1;
    while(i<=100) // 满足条件就执行下面{}的内容
    {
        sumWhile +=i;
        i++;
    }
    console.log(sumWhile);

     // do while   至少执行一次
    var sumDoWhile = 0;
    var j = 1;
    do {
        sumDoWhile += j;
        j++;
    }while(j<=100);
    console.log(sumDoWhile);
</script>

6.1 排他思想

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .current {
            background-color: #daa520;
        }
    </style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>
<script>
    var btns = document.getElementsByTagName("button");
    for(var i=0;i<btns.length;i++) {  // 遍历所有的按钮
        btns[i].onclick = function() {
            // 当我们每次点击， 首先先清除所有按钮的样式
            for(var j=0;j<btns.length;j++) {
                btns[j].className = "";
            }
            // 给当前这个点击的按钮添加样式。
            this.className = "current";
        }
    }
</script>

总结：排他思想就是先清除所有的样式，再给当前dom对象添加样式。

7.switch语句

<script>
    switch(4) {
        case 4:
            alert("我是4");
            break;
        case 5:
            alert("我是5");
            break;
        default:
            alert("没有");
    }
</script>

8.变量和属性

<script>
    var index = 10;    // 变量  里面值 10
    var arr = [];     // 数组  空数组  对象
    arr.index = 20;   //  我们自己定义的数组的属性
    arr.aa = 10;
    arr.bb  = "abc"
    arr.length  // 数组的长度    数组的属性
    console.log(index);  // 变量
    console.log(arr.index);   // 属性
</script>

小邪铭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础JavaScript(一)

基础JavaScript1.JavaScript控制样式<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 200px; height: 100px;
复制链接

扫一扫