JavaScript+JQuery——初始JavaScript（Chrome开发工具）

最新推荐文章于 2023-07-31 17:54:12 发布

大大大野

最新推荐文章于 2023-07-31 17:54:12 发布

阅读量1.2k

点赞数

分类专栏：初学者文章标签： javascript jquery chrome

本文链接：https://blog.csdn.net/HGninjago/article/details/125032160

版权

初学者专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本次文章主要对第一章最后的Chrome开发工具进行讲解然后合着一起讲一下js的系统函数与自定义函数

一.Chrome开发者工具这属于所有浏览器都有的东西按下F12或者在浏览器上右击就可以看到 Chrome自带js调试工具具有强大的代码调试功能其中关于语法错误的排除尤为重要

Chrome开发工具分为八个模块

Element 标签页：用于查看和编辑当前页面中的 HTML 和 CSS 元素。
Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。对于此标签页使用比较频繁它可以对代码内容进行逻辑错误的排除其设置断点、单步调试的功能很是强大

TimeLine 标签页：用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
Audits 标签页：用于优化前端页面，加速网页加载速度等。
Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

二.系统函数以及自定义函数

系统函数js提供了两个把非数子的原始值转换成数字的函数 parseInt（）和parseFloat（）两个函数还提供了一个检查是否非数字的函数isNaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统函数</title>
</head>
<body>
    <script type="text/javascript">
        document.write("系统函数parseInt()<br/>");  //此函数用于解析一个字符串返回一个整数
        document.write("此函数用于解析一个字符串返回一个整数<br/>");
        var str1=prompt("请输入第一个数:","");
        var str2=prompt("请输入第二个数:","");
        var x=parseInt(str1);//此处要注意一定要注意函数书写的大小写大写就是大写小写就是小写
        var y=parseInt(str2);
        var result=x+y;
        document.write("str1+str2="+result+"<br/>");
        document.write("系统函数parseFloat()<br/>");  //此函数用于解析一个字符串返回一个浮点数
        document.write("此函数用于解析一个字符串返回一个浮点数<br/>");
        var str1=prompt("请输入第一个数:","");
        var str2=prompt("请输入第二个数:","");
        var x=parseFloat(str1);//此处要注意一定要注意函数书写的大小写大写就是大写小写就是小写
        var y=parseFloat(str2);
        var result=x+y;
        document.write("str1+str2="+result+"<br/>");
        document.write("系统函数isNaN()<br/>");  //此函数用于检查参数是否为非数字
        var str1=prompt("请输入第一个数:","");
        var x=isNaN(str1);
        document.write(x);
    </script>
</body>
</html>

自定义函数由关键字function+函数名+参数组成语法格式如下：

    <input type="button" value="点击调用函数" onclick="str(prompt('请输入第一个数',))">
    <script type="text/javascript">
        function str(str1){  //function是自定义函数的关键字 第一个参数为函数名然后括号内表示要传递进来的参数与C语言一样
            for(i=0;i<str1;i++){
                document.write("自定义函数<br/>");
                // return; //返回值
            }
        }
    </script>

自定义函数要自主调用或者由事件触发接下来就要讲一下js内常见的事件

三.js事件

前期只需了解事件是什么比如你点击按钮啊，键盘输入等都可以理解为一个事件的发生一下就写一个页面自动触发的事件onload和鼠标点击事件onlick示范对于更多的如键盘按下触发的事件可以自行百度查询一下哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面事件</title>
    <style>
        #text-button
         {
            display: block;
            cursor: pointer;
            width: 160px;
            text-align: center;
            border: 1px solid #232323;
        }
        #text-button.blue {
        background: #21759b;
        }
    </style>
</head>
<body onload="str"> 
    <!-- onload事件会在页面加载完成时立即发生 -->
    <div id="text-button">
        <p id="text">点击</p>
    </div>
    <script type="text/javascript">
        function str(){
            document.write("加载完成");
        }
        //js onlick点击事件
        document.getElementById("text-button").onclick = function() { //document.getElementById可以理解为获取id
            document.getElementById("text").innerHTML = "我点击了！";  //innerHTML更改文本内容为
            this.classList.toggle("blue"); //暂且理解为更改原有的css属性吧
            };
    </script>
    
</body>
</html>

第一章的内容到这里就真真正正的结束了真的不会再有续章了QAQ