JavaScript基础

最新推荐文章于 2023-11-19 21:10:03 发布

troysps

最新推荐文章于 2023-11-19 21:10:03 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

文章标签：前端 JavaScript

本文链接：https://blog.youkuaiyun.com/troysps/article/details/80217878

本文介绍了JavaScript的基础知识，包括语言特性、变量类型、语法规范、函数、条件语句等内容，并通过实例展示了如何操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript介绍

--运行在浏览器端的脚步语言
--主要解决前端与用户交互的问题 包括交互与数据交互
--由浏览器解释执行的

前端三大块
html 页面结构
css  页面表现
JavaScript 页面行为

JavaScript页面的嵌入方式

行间事件(主要用于事件)
内嵌式 页面script标签嵌入
外链式 外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 外链式 引入JavaScript -->
    <script src="./js/hello.js"></script>
    <!-- 内嵌式 引入JavaScript -->
    <script>
        alert("hello world, JS");
    </script>
</head>
<body>
    <!-- 行间事件引入JavaScript  "不建议这么写"-->
    <input type="button" value="弹出弹框" onclick="alert('hello world')">

</body>
</html>

变量数据类型以及基本语法规范

JavaScript是一种弱类型语言 javascript的变量类型由它的值来决定
定义变量使用关键字 var

拓展: 强类型弱类型静态类型动态类型是什么

类型系统设计
在程序设计之前都会设计Forbidden behaviours

Forbidden behaviours中包含两种情况

    --1.trapped error程序终止
    --2.untrapped error出错后继续执行

行为划分
    --well behaved
    程序执行不出现Forbidden behaviours
    --ill behaved
    程序执行会出现Forbidden behaviours

强类型：偏向于不容忍隐式类型转换 – 显示声明变量类型。譬如说haskell的int就不能变成double
弱类型：偏向于容忍隐式类型转换 –隐式声明变量类型。譬如说C语言的int可以变成double
静态类型：编译的时候就知道每一个变量的类型，因为类型错误而不能做的事情是语法错误。
动态类型：编译的时候不知道每一个变量的类型，因为类型错误而不能做的事情是运行时错误。譬如说你不能对一个数字a写a[10]当数组用。

拓展知识点来源
链接：https://www.zhihu.com/question/19918532
来源：知乎

变量类型

1.nunber 数字类型
2.string 字符串类型
3.boolean 布尔类型
4.undefined undefined类型声明变量未初始化 值就是undefined
例子 var iNum02;
5.null  null类型 空对象
1种复合类型
object

变量命名小技巧

    匈牙利命名风格：
    对象o Object 比如：oDiv
    数组a Array 比如：aItems
    字符串s String 比如：sUserName            
    整数i Integer 比如：iItemCount
    布尔值b Boolean 比如：bIsComplete
    浮点数f Float 比如：fPrice
    函数fn Function 比如：fnHandler
    正则表达式re RegExp 比如：reEmailCheck

变量命名规范

    1、区分大小写
    2、第一个字符必须是字母、下划线（_）或者美元符号（$）
    3、其他字符可以是字母、下划线、美元符或数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 单行注释
        /* 
            多行注释
        */

        // 定义变量
        /*
        var iNum01 = 12;
        var sTr = 'abc';
        var bIsMove = true;
        */

        var iNum01 = 12, sTr = 'abc', bIsMove = true;
        var iNum02; //声明变量不赋值 值就是undefined

        alert(iNum01);
        alert(sTr);
        alert(bIsMove);
        alert(iNum02);
    </script>
</head>
<body>

</body>
</html>

函数

函数特性

JavaScript预解析

函数的预解析是由作用的
变量的预解析是undefined
js预解析 hoisting机制
在JavaScript中 hoisting机制会将所有function定义的代码段提前处理
例子:
(function outer(){ 
inner(); 
function inner(){ console.log("inner"); } 
})();
实际上对于编译器来说 是这样的
(function outer(){ 
function inner(){ console.log("inner"); } 
inner(); 
})();


问题：
(function f(){ 
function f(){ return 1; } 
return f(); 
function f(){ return 2; } 
})();
在js中会输出什么？

在编译器中
(function f(){ 
function f(){ return 1; } 
function f(){ return 2; } 
return f(); 
})();
等同于
(function f(){ 
var f = function() { return 1; };
var f = function() { return 2; };
return f(); 
})();
显而易见
(function f(){ 
var f = 1;
var f = 2;
return f; //显然f=2
})();

JavaScript预解析知识点来源
链接：https://www.zhihu.com/question/21517000/answer/18478914

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 函数预解析 函数先调用再定义 执行函数指向定义函数 可以无序执行
        fnMyalert();

        // 变量预先解析 只声明不定义
        alert(iNum01);
        // 定义函数
        function fnMyalert(){
            alert("hello");
        }
        // 调用函数
        // fnMyalert();

        var iNum01 = 12;
        // alert(iNum01);
    </script>
</head>
<body>

</body>
</html>

条件语句

条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否 – 取反)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum01 = 12;
        var sNum01 = '12';

        if(iNum01==12){
            alert("==");
        }
        else{
            alert("!=");
        };
        // == 在js中是隐式转化
        // 需要使用 === 三等于符号
        if(sNum01==12){
            alert("==");
        }
        else{
            alert("!=");
        };
        // and &&
        if(5>3 && 10>8){
            alert("都大于");
        }
        else{
            alert("有一个或多个实际是小于");
        };
        // or ||
        if(5>3 || 10>11){
            alert("至少一个大于");
        }
        else{
            alert("都不大于");
        };
        // 取反
        if(!10>5){
            alert("10大于5");
        }
        else{
            alert("10不大于5");
        };
        // 多重if else语句
        var iNum02 = 1;
        if(iNum02===1){
            alert('iNum02=1');
        }
        else if(iNum02===2){
            alert("iNum02=2");
        }
        else{
            alert("不是1也不是2");
        }



    </script>
</head>
<body>

</body>
</html>

获取元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 放在head中需要等待body执行完毕 然后再执行
        // 当整个页面加载完之后 再执行大括号里面的代码
        window.onload = function(){
            var oDemo = document.getElementById("demo");
            oDemo.style.color="red";
            oDemo.style.width="300px";
            oDemo.style.height="300px";
            oDemo.style.background="gold";
            oDemo.style.fontSize="30px";
            document.getElementById("demo").innerHTML="i love python";
            document.getElementById("demo").style.color="blue";
        };

    </script>
</head>
<body>
    <p id="demo">xxx</p>

</body>
</html>

操作元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .style01{
            color: red;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("demo")
            var oA = document.getElementById("link01")
            // 读取属性值
            var sId = oDiv.id
            alert(sId);

            // 写属性值 也叫做设置或者修改属性值
            oDiv.style.color = 'red';
            // 属性名中带"-"要写做成驼峰式
            oDiv.style.fontSize = "30px";

            // 操作class属性
            oA.className = "style02"

            // 操作元素包裹的内容

            // 读取元素包裹的内容
            var sTr = oDiv.innerHTML
            alert(sTr);

            // 写入也叫做设置或者修改元素包裹的内容
            oDiv.innerHTML = "change";
            oDiv.innerHTML = '<a href="http://www.baidu.com>百度</a>';
            oDiv.innerHTML = '<ul><li>list</li><li>list</li></ul>';


        }
    </script>
</head>
<body>
    <div id="demo">hello world</div>

    <a href="#" class="style01" id="link01">链接</a>
</body>
</html>

匿名函数

省略function xxx() xxx的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn01")
            var oDiv = document.getElementById("div01")

            function fnChange(){
                oDiv.style.width = "300px";
                oDiv.style.height = "200px";
                oDiv.style.background = "gold";
            }

            // oBtn.onclick = fnChange;

            // 匿名函数
            // oBtn.onclick = function(){
            //     oDiv.style.width = "300px";
            //     oDiv.style.height = "200px";
            //     oDiv.style.background = "gold";
            // }

        }
    </script>
</head>
<body>
    <input type="button" value="改变样式" id="btn01">
    <div id="div01">DIV</div>
</body>
</html>

小实例

网页换肤

实例结构
root
| --css skin01.css skin02.css
| --html JavaScript网页换肤.html

skin01.css

body{
    background: grey;

}

input{
    width: 200px;
    height: 50px;
    background: pink;
    border: 1px solid green;
    /* 设置圆角 */
    border-radius: 25px;
    font-size: 20px;
}

skin02.css

body{
    background: green;

}

input{
    width: 200px;
    height: 50px;
    background: yellow;
    border: 1px solid red;
    /* 设置圆角 */
    border-radius: 25px;
    font-size: 20px;
}

网页换肤.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/skin01.css" id="link01">
    <script>
        window.onload = function(){
            var oLink = document.getElementById("link01");
            var oBtn01 = document.getElementById("btn01");
            var oBtn02 = document.getElementById("btn02");


            oBtn01.onclick = function(){
                oLink.href = './css/skin01.css';
            };

            oBtn02.onclick = function(){
                oLink.href = './css/skin02.css';
            }



        }
    </script>

</head>
<body>
    <h1>title</h1>
    <input type="button" value="skin1" id="btn01">
    <input type="button" value="skin2" id="btn02">
</body>
</html>