JavaScript代码

最新推荐文章于 2023-04-20 10:30:00 发布
VIP文章 最新推荐文章于 2023-04-20 10:30:00 发布
阅读量541 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46393353/article/details/107019393
版权

test01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
   
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <!--1.内嵌方式-->
    <script>
        //alert("hello JavaScript");//弹出一个窗口
    </script>
    <!--3.引用外部的js脚本文件-->
    <script type="text/javascript" src="/js/hello.js">
        <!--在此处不可以再写js代码-->
    </script>
</head>
<body>
第一个JavaScript程序
<!--<script>-->
<!--alert("hello JavaScript");//弹出一个窗口-->
<!--</script>  写在body中也可以-->

<hr>
<!--2.内部方式-->
<input type="button" value="点我" onclick="alert('我被点了，晕了！')">

<!--<div onmouseover="alert('走开')">把鼠标移上来</div>-->

<!--<a href="alert('超链接被触发')">我是超链接</a>   这种方式不可以，它认为链接一个资源-->

<!--<a href="" onclick="alert('超链接被触发了')">我是超链接</a>-->

<a href="javascript:alert('超链接被触发了')">我是超链接</a>
</body>
</html>

test02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //变量
        var name;
        name = 'tom';
        //name=20;
        //name=180.5;
        var age = 18;
        var 姓名 = "张无忌";
        //汉字也可以
        //var=var 这个不可以

        sex="male";//强烈不建议
        var a=5,b=2,c=7;
        {
   
            var x=6;
            // alert(a);
            // alert(x);
            let y=7;
        }
        alert(x);
        alert(y);
        alert(sex);
    </script>
</head>
<body>

</body>
</html>

test03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 输出信息
        // alert("嘿嘿");
        // console.log("哈哈");//通过开发人员工具的console窗口验证结果
        // document.write("嘻嘻");
        //
        // 输入
        // var name = prompt("请输入你的姓名：");
        // console.log(name);
        // var age = prompt("请输入你的年龄：");
        // console.log(age);
        // console.log(age + 2);
        // console.log(typeof age);
        // age = Number(age);
        // console.log(age + 2);

        //转义字符
        console.log("he\tllo\nworld");
        console.log('wel\'come');

        // 注释
        // 单行注释
        /*
            这是多行注释
        */
    </script>
</head>
<body>

</body>
</html>

test04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        数据类型
         */
        var name ='tom';
        var age=18;
        var height=180.5;

        var flag=true;

        var hobby=null;

        var date=new Date();

        var arr=new Array();
        var sex;//当定义了变量，但是未赋值，则返回undefined
        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log("hello"-5);//返回NaN
        // console.log(typeof flag);
        // console.log(typeof hobby);//如果数据是null、Date、Array等，返回object
        // console.log(typeof date);
        // console.log(typeof arr);
        // console.log(typeof sex);
        /*
        类型转换
         */
        //1.转换为number
        var a='12';
        // console.log(typeof a);

        // 方式一：使用Number()
        // a=Number(a);
        // a=Number('12.5');
        // a=Number('12abc')
        a=Number('abc12');
        // console.log(12,'aaa',4,6);
        // console.log(Number(a),typeof a);

        //方式二：使用parseInt()
        // a=parseInt('12');
        // a=parseInt('12.5');
        // a=parseInt('12abc');//按字符顺序进行解析
        // a=parseInt('abc12');
        // console.log(a,typeof a);

        // 方式三：使用parseFloat()
        // a=parseFloat('12');
        // a=parseFloat('12.5');
        // a=parseFloat('12abc');//按字符顺序进行解析
        // a=parseFloat('abc12');
        // console.log(a,typeof a);
        //
        // a=Number(true);//boolean在内存中使用数字表示，true为1，false为0
        // console.log(a,typeof a);

        /*
        转换为字符串
         */
        // var a=12;
        // var a=true;
        // a=a+'';
        // console.log(a,typeof a);

        /*
        转换为布尔
         */
        // var a=Boolean(0);
        // var a=Boolean('');
        // var a=Boolean(null);
        // var a=Boolean(undefined);
        // var a=Boolean(NaN);
        // var a=Boolean(4);
        // var a=Boolean('tom');
        var name='tom';
        a=Boolean(name);
        console.log(a,typeof a);
        if (name){
   
            console.log('哈哈');
        }
    </script>
</head>
<body>

</body>
</html>

test05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            算术运算符,+、-、*、/、%、**、++、--
        */
        // var a=5;
        // var b=3;
        // var c='aaa';//var c ='aaa'
        // var d=true;
        //console.log(a+b);
        //console.log(a-b);
        //console.log(a*b);
        //console.log(a/b);
        //console.log(a%b);
        //console.log(a**b);//a的b次方
        //console.log(a+c);//将a转换为字符串，在和c字符进行首尾相连
        //console.log(a-c);//将c字符转换为数值，和a进行算术减运算

        var a=1;
        var b=2;
        //console.log(a++);//先引用，后自加减，表达式会返回变化前a的值，然后a再自加减 a = a + 1
        //console.log(a);//表达式执行完，a的值为2
        //console.log(++a);//先自加减，后引用，表达式会返回变化后a的值，表达式执行完a是变化后的值
        //console.log(a);
        console.log(b--);//表达式返回变化前b的值，表达式执行完b自减
        console.log(b);//变化后b的值1
        console.log(--b);//表达式返回变化后b的值0，表达式执行完b为0
        console.log(b);

        /*
            比较运算符,>、>=、<、<=、==、= = =、!=
        */
        // console.log(a>b);
        // console.log(a<b);
        // console.log(a>=b);
        // console.log(a<=b);
        // var a=5;
        // var b='5';
        //
        // console.log(a==b);//只判断内容是否相等
        //
        // console.log(a===b);//全等于，既要判断内容，也要判断数据类型
        // console.log(a+b);
        // console.log(a==d);//var a=1;测试 true表示1 false表示0

        /*
            赋值运算符
        */
        // a=8;
        // a+=2;//a=a+2
        // a-=2;
        // console.log(a);

        /*
            逻辑运算符
        */
        var x=true;
        var y=false;
        // console.log(x&&y);
        // console.log(x||y);
        // console.log(!x);
        // a=0;
        // b=5;
        // console.log(a&&b);
        // console.log(a||b);

        /*
            条件运算符：条件？表达式1：表达式2
         */
        //var a=5;
        //var b=3;
        //console.log(a>b?a+b:a-b);
    </script>
</head>
<body>

</body>
</html>

test06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用Math对象进行数学运算，用法Math.方法名(参数)
        //1、绝对值
        console.log(Math.abs(-5));

        //2、计算次方
        console.log(Math.pow(2,4));

        //3、四舍五入
        console.log(Math.round(3,14))

        //4、向上取整，向下取整
        console.log(Math.ceil(3,4));//返回大于3，4的最小整数
        console.log(Math.floor(3,5));//返回小于3，5的最大整数

        //5、生成一个[0,0,1)之间的随机浮点数
        console.log(Math.random());

        //6、最大值，最小值
        console.log(Math.max(23,1,54,2,-6));
        console.log(Math.min(23,1,54,2,-6));

        //7、圆角率的值
        console.log(Math.PI);
    </script>
</head>
<body>

</body>
</html>

test07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age=23;
        if(age>=60)
            console.log('老年');
        else if(age>=30)
            console.log('中年');
        else if(age>=16)
            console.log('少年');
        else
            console.log('童年');

        var day='星期五';
        switch(day)
        {
   
            case'星期一':
                console.log('吃包子');
                break;
            case'星期二':
                console.log('吃油条');
                break;
            case'星期三':
            case'星期四':
                console.log('吃面条');
                break;
            case'星期五':
                console.log('吃馒头');
                break;
            default:
                console.log('不吃');

        }
    </script>
</head>
<body>

</body>
</html>

test08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //while
//        var i = 1;//循环变量赋初值
//        var sum = 0;//累加器
//        while (i <= 100)//循环控制条件
//        {
   
//            //i在每次循环过程中就可以取遍1-100之间的每一个数
//            sum = sum + i;
//            i++;//使循环趋于结束的每一条语句
//        }
//        console.log(sum);
        //do...while
        //打印输出1-100之间能被7整除的这些数的和，及他们的个数
        var i=1;
        var sum=0;
        var cnt=0;
        do
        {
   
            if(i%7==0)
            {
   
                sum+=i;
                cnt++;
            }
            i++;
        }while(i<=100);
        console.log(sum,cnt);

        //for循环
        var sum=0;
        var cnt=0;
        for(var i=1;i<=100;i++)
            if(i%7==0)
            {
   
                sum+=i;
                cnt++;
            }
            console.log(sum,cnt);
        //for...in...对集合类型的数据进行遍历
        var str='welcome to javascript'
        for(var s in str)
            //console.log(s)
            console.log(str[s])
        //打印输出1-100之间所有的素数，并统计他们的个数

    </script>
</head>
<body>

</body>
</html>

test09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr=new Array();
        // arr[0]=12;
        // arr[1]=9;
        // //可以放任意多个
        // console.log(arr.length)
        // console.log(arr[2])

        // var arr=new Array('tom','jack','alice');
        // console.log(arr);
        // console.log(arr[0]);
        // console.log(arr[arr.length-1])

        // var arr=['tom','jack','alice','mike'];
        // console.log(arr);
        // console.log(arr[0]);
        // console.log(arr[arr.length-1])

        //将1-100之间所有的素数放到nums数组中，输出
        var nums = new Array();
        var cnt = 0;
        for (var m = 1; m <= 100; m++)
        {
   
            //m就取遍了1-100之间每一个数
            /*
                素数，m是素数，除了能被1和m本身整除外，在不能被其他数整除
                1、2、3、4......m-1
             */
            for (var n = 2; n < m; n++) {
   
                if (m % n == 0)
                    break;
            }
            if (n==m) {
   
                    nums[cnt] = m;
                    cnt++;
                }

        }
        // console.log(nums);
        // var arr=new Array('tom','jack','alice','admin');
        // var arr=[12,3,34,465,2,32,545,76];
        // console.log(arr);
        // arr.sort();
        // console.log(arr);

        var arr=new Array('tom','jack','alice','jack');
        // console.log(arr);
        // console.log(arr.reverse());
        // console.log(arr.join());
        // console.log(arr.join('-'));

        console.log(arr.indexOf('jack'));
        console.log(arr.lastIndexOf('jack'));//最后一次出现的位置

        console.log(arr.slice(1,3));
        console.log(arr.slice(1));

        console.log(arr.toString());
    </script>
</head>
<body>

</body>
</html>

test10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arrr=new Array();
        // arr[0]=new Array();
        // arr[1]=new Array();
        // arr[0][0]=12;
        // arr[0][1]=9;
        // arr[1][0]=10;
        // console.log(arr);

        var arr=[
            [12,54,2,67],
            [1,32,45,3],
            [1,43,65,87]
        ];
        console.log(arr);

        for(var i=0;i<arr.length;i++)
        {
   
            for(var j=0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp&nbsp&nbsp&nbsp');
        document.write('<br>')
        }
    </script>
</head>
<body>

</body>
</html>

test11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            自定义函数
         */
        function show()
        {
   
            console.log('嘿嘿');
        }
        function calc(num1,num2,num3)
        {
   
            console.log(num1,num2,num3);
        //     var sum=num1+num2+num3;
        //     console.log(sum);
        //     return sum;//返回值
         }
        // //2、调用函数
        // show();
        // var result =calc(12,6,3);
        // console.log(result);

        /*
            变量的作用域
            1.局部作用域
         */
        //var c=6;//全局变量
        // function fn(){
   
        //     var a=5;
        //     console.log(a);
        //     console.log(c);
        // }//定义函数，定义了函数，如果函数不调用，函数体是不执行的
        // fn();//调用函数
        function fn() {
   

        } fn()
        {
   
            if(true)
            {
   
                var a=5;//局部变量
                let a=5;//块级变量
                console.log(a);
            }
            console.log(a);
        }
        // {
最低0.47元/天 解锁文章
m0_46393353
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分享 30 个基础而实用的 JavaScript 代码片段
前端达人
06-21 1016
今天这篇文章，想跟大家分享 30 个基本并实用的 JavaScript 代码片段，它们将帮助你提升你的 Web 开发能力。从用于提高性能的去抖动和节流功能，到数组操作、字符串操作和数字验证等等。了解如何实施这些节省时间的技术并增强你的开发工作流程。通过这些不可或缺的 JavaScript 代码片段，提升你的技能并在不断发展的 Web 开发世界中保持领先地位。01、去抖函数以限制它被调用的次数.fu...
javascript常用代码大全,javascript简单代码
chatgpt001的博客
11-20 492
书写在在脚本标签中，一般放在body标签后边。变量是计算机内存中存储数据的标准符，根据变量名称可以获取内存中存储的数据。1、在一对的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行2、如果第一对的标签中有错误,不会影响后面的标签中的js代码执行3、的标签中可以写type="text/java"标准写法或者写language="JavaScript"都可以。但是，目前在我们的html页面中，type和language都可以省略，原因：html是遵循h5的标准。
JavaScript新手学习手册-基础代码（一）
m0_52479012的博客
03-06 2223
JavaScript新手学习，了解基础代码的用法，以及认识JavaScript是怎样的语言环境，新手晋级手册
13个有用的JavaScript代码
JINGZzhuo的博客
08-14 2151
JavaScript 有很多实用例子，它们可以做很多强大的事情,在今天的文中，我们将分享一些 JavaScript 特别好用的代码,无论你是 JavaScript 新手还是经验丰富的开发人员，学习些新东西总是好的。希望能帮助您解决一些日常开发中遇到的JavaScript 问题....
JavaScript 代码教程
余笙.'的博客
02-28 7049
JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器中的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。 特点： 1、弱语言 2、区分大小写 3、面向对象 4、跨平台 页面中添加JavaScript代码 语法： <script type="text/javascript"> //js相关代码 </scr
JavaScript 代码规范.pdf
最新发布
03-02
javascript 代码规范通常包括以下几个方面: 变量和函数的命名规则 空格，缩进，注释的使用规则。 其他常用规范…… 规范的代码可以更易于阅读与维护。 代码规范一般在开发前规定，可以跟你的团队成员来协商设置。
Javascript代码集
11-24
Javascript代码集Javascript代码集Javascript代码集Javascript代码集
JavaScript代码应该放在HTML代码哪个位置比较好？
12-11
在哪里放置 JavaScript 代码？ 通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所...
果断收藏9个Javascript代码高亮脚本
10-23
主要为大家分享了9个实用的Javascript代码高亮脚本，相信一定对大家的学习有所帮助，感兴趣的小伙伴们可以参考一下
Java执行JavaScript代码
10-22
主要为大家详细介绍了Java执行JavaScript代码的具体操作方法，感兴趣的小伙伴们可以参考一下
JSMagic:您好JavaScript
05-28
JSMagic 整理JavaScript的一些原理实现。很多都是顺手的草稿代码，不要在意这些细节哈哈 目录 简单的Promise原理实现 单页面应用路由 对象描述符与响应式数据 next中间件原理 前端模板引擎的实现思路 节流、去抖 大文件上传 JSONP Vnode相关实现，包括diff算法、将vnode转换成DOM节点或HTML字符串即可 在浏览器运行可交互Python代码 加密解密 错误处理封装 oAuth授权demo
100个JavaScript代码片段
GarfieldEr007的专栏
02-02 2612
实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { ...
分享29个超有用的 JavaScript 单行代码
前端达人
02-06 520
在这篇文章中，我列出了一系列 29 个 JavaScript 单行代码，它们在使用原生JS（≥ ES6）进行开发时非常有用。它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式。我将它们分为以下几类：日期字符串数字数组工具函数事不宜迟，废话不多说，希望这些代码对大家有所帮助。一、日期处理部分1、如何确认给定的日期是否是当前日期其思路，就像将两个日期转换为相同格式并进行简单的比较。...
javascript 常用代码大全
u010129251的专栏
04-06 1407
把如下代码加入区域中:    后退 前进                                         返回                     查看源码                      禁止查看源码                      刷新按钮一                              
js基础实例代码详细
12-22 1253
js:嵌入在html中，处理数据，其实和as差不多，个人理解是html展示界面，js处理数据 嵌入在html中使用script document.write 用于像页面输出语句 document.write("hello world"); 生成普通文件和标签 document.write("hello world");
JavaScript常用代码总结
丘秋的博客
01-19 1309
JavaScript常用代码总结 在初学JavaScript时积累不少的js代码块（脑子记不住） 在这里给大家分享一下，也顺便当做保存 可能有点乱，可以自己再梳理总结一下 js特殊字符 \b 退格字符 \f换页符 \n换行字符 \r回车字符 \t制表符tab \’转义 空格 \0 常用代码总结 提示框 alert(); 选择框 confirm(); 对话框 pro...
38 个非常有用的 JavaScript 单行代码汇总
web前端开发
09-02 400
在今天的文章中，我们整理了38个JavaScript 单行代码可以实现的功能技巧，这些技巧都是我平时收集整理下来的，有的一个功能的实现，可能会有两种方法，具体用那种，可以根据自己的情况来选择，其实，技术有时候真的没有最优解，只有最合适，因此，还是根据具体开发来选择就好了。今天的这些技巧的汇总，希望可以帮助到你。1.判断日期是否正确此方法用于检查给定日期是否有效。const isDateValid ...
30个超级有用的JavaScript单行代码
qq_41838305的博客
04-20 483
在这篇文章中，我列出了一个系列的 30 个 JavaScript 单行代码，它们在使用 vanilla js（≥ ES6）进行开发时非常有用。它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式。我们可以利用内置的 Array 方法，如 reverse() 和 join() 来创建一个做同样事情的单行代码。我们可以使用 Array.sort() 和 Array.join() 方法来检查两个数组是否包含相同的值。这是一种非常方便的方法来检查用户是否在其浏览器上启用了黑暗模式。
Javascript 技巧大全
01-19 1175
Event 事件 事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture();event.srcElement.releaseCapture();事件按键event.keyCodeevent.shiftKeyevent.altKeyevent.ctrlKey事件返回值event.retu
javascript代码
07-14
Kettle JavaScript代码是指使用JavaScript语言编写的Kettle数据集成工具的代码。Kettle是一款开源的ETL工具，可以用于数据抽取、转换和加载等操作。在Kettle中，JavaScript是一种常用的脚本语言，可以用于编写各种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值