javascript基础笔记1

最新推荐文章于 2021-03-09 18:42:21 发布
最新推荐文章于 2021-03-09 18:42:21 发布
阅读量100 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42243957/article/details/107690382
版权

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
typeof运算：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>

    <script >

        //定义变量
       /* var a  = 3;
        alert(a);

        a = "abc";
        alert(a);*/

       //定义number类型

        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //输出到页面上
        document.write(num+"---"+typeof(num)+"<br>");
        document.write(num2+"---"+typeof(num2)+"<br>");
        document.write(num3+"---"+typeof(num3)+"<br>");

        //定义string类型

        var str = "abc";
        var str2 = 'edf';
        document.write(str+"---"+typeof(str)+"<br>");
        document.write(str2+"---"+typeof(str2)+"<br>");

        //定义boolean
        var flag = true;
        document.write(flag+"---"+typeof(flag)+"<br>");

        // 定义null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"---"+typeof(obj)+"<br>");
        document.write(obj2+"---"+typeof(obj2)+"<br>");
        document.write(obj3+"---"+typeof(obj3)+"<br>");

    </script>


</head>
<body>

</body>
</html>

在这里插入图片描述
简单流程控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制语句</title>
    <script>

       //1 ~ 100 求和  5050（for）
        var sum = 0;
        for (var i = 1; i <= 100; i ++){
            sum += i;
        }
        //switch
       var a;
       switch (a){
           case 1:
               alert("number");
               break;
           case "abc":
               alert("string");
               break;
           case true:
               alert("true");
               break;
           case null:
               alert("null");
               break;
           case undefined:
               alert("undefined");
               break;
       }
       //1 ~ 100 求和  5050(while)
       var sum = 0;
       var num = 1;
       while(num <= 100){
           sum += num;
           num ++;
       }
    </script>
</head>
<body>

</body>
</html>
  1. 练习：99乘法表：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table  align='center'>");
        //1.完成基本的for循环嵌套，展示乘法表
        for (var i = 1; i <= 9 ; i++) {
            document.write("<tr>");
            for (var j = 1; j <=i ; j++) {
                document.write("<td>");
                //输出  1 * 1 = 1
                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/
            document.write("</tr>");
        }
        //2.完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script >
        //1.创建方式1
        var fun1 = new Function("a","b","c","alert(a);");
        //调用方法
       // fun1(3,4);
       // alert(fun1.length);
       //2. 创建方式2
        function fun2(a , b){
            alert(a + b);
        }
        //fun2(3,4);
        //alert(fun2.length);
        //2. 创建方式3
        var fun3 = function(a,b){
            alert(a+b);

        }
        //alert(fun3.length);
       // fun3(3,4);
        /*fun2 = function(a , b){
            alert(a - b);
        }*/
        function fun2(a , b){
            //alert(a - b);
            alert(a);
            alert(b);
        }
        //fun2(3,4);
        //方法调用
        //fun2(1,2);
        //fun2(1);
        //fun2();
        //fun2(1,2,3);
        /*
         * 求两个数的和
         */
        /*function  add(a , b){
            return a + b;
        }*/
        /**
         * 求任意个数的和
         */
        function add (){
           var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        var sum = add(1,2,3,4);
        alert(sum);
        //add(1,3);

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述
array:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
    <script >
        
        //1.创建方式1
       /* var arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4];

        var arr4 = new Array();

        document.write(arr1 +"<br>");
        document.write(arr2 +"<br>");
        document.write(arr3 +"<br>");
        document.write(arr4 +"<br>");*/


       var arr = [1,"abc",true];
        document.write(arr +"<br>");

        document.write(arr[0] +"<br>");
        document.write(arr[1] +"<br>");
        document.write(arr[2] +"<br>");

        //document.write(arr[10] +"<br>");
        arr[10] = "hehe";
        document.write(arr[10] +"<br>");
        document.write(arr[9] +"<br>");

        //alert(arr.length);//11
        document.write(arr.join("--")+"<br>");
        arr.push(11);
        document.write(arr.join("--")+"<br>");
    </script>
</head>
<body>

</body>
</html>

Date:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date对象</title>
    <script >
        
        var date = new Date();
        document.write(date + "<br>");

        document.write(date.toLocaleString() + "<br>");

        document.write(date.getTime() + "<br>");

    </script>
</head>
<body>

Math:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math对象</title>
    <script >
        document.write(Math.PI +"<br>");
        document.write(Math.random() +"<br>");
        document.write(Math.round(3.14) +"<br>");
        document.write(Math.ceil(3.14) +"<br>");
        document.write(Math.floor(3.14) +"<br>");

        /**
         * 取 1~100之间的随机整数
         *      1. Math.random()产生随机数：范围 [0,1)小数
         *      2. 乘以 100 --> [0,99.9999] 小数
         *      3. 舍弃小数部分 ：floor --> [0,99] 整数
         *      4. +1 -->[0,99] 整数 [1,100]
         *
         *
         */

       var number =  Math.floor((Math.random() * 100)) + 1;
       document.write(number);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述
RegExp:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp对象</title>
    <script >
        //1.
        var reg = new RegExp("^\\w{6,12}$");
        //2.
        var reg2= /^\w{6,12}$/;
        /*alert(reg);
        alert(reg2);*/
        var username = "zhangsan";
        //验证
        var flag = reg.test(username);
        alert(flag);

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
    <script >

     
        var str = "http://www.baidu.com?wd=深圳";
        var encode = encodeURI(str);
        document.write(encode +"<br>");
        var s = decodeURI(encode);
        document.write(s +"<br>");


        var str1 = "http://www.baidu.com?wd=深圳";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1 +"<br>");
        var s1 = decodeURIComponent(encode);
        document.write(s1 +"<br>");
        
        var str = "a234abc";
        var number = parseInt(str);
        //alert(number + 1);

        var a = NaN;

        document.write(a == NaN);
        document.write(isNaN(a));

        var jscode = "alert(123)";
        eval(jscode);

    </script>
</head>
<body>

</body>
</html>
随枫潜入夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
去掉你代码里的 document.write("<script...
weixin_34387468的博客
09-18 1927
在传统的浏览器中，同步的 script 标签是会阻塞 HTML 解析器的，无论是内联的还是外链的，比如： &lt;script src="a.js"&gt;&lt;/script&gt; &lt;script src="b.js"&gt;&lt;/script&gt; &lt;script src="c.js"&gt;&lt;/script&g
JavaScript的基础学习（3）
一只洒鹿
04-19 198
目录 视频23 break、continue语句的用法 视频24 函数 视频25 函数 视频26 递归 视频27 对象创建 视频23 break、continue语句的用法 break可以结束switch语句，同样，还可以结束其所在的循环 例子： for（var i=1；i<=5;i++） { if(i==3) break; document.write...
document.write()用法
hellosnowyy
10-09 1万+
1.document.open()功能：打开一个新文档，即打开一个流，并擦除当前文档的内容。 语法：document.open(mimetype,replace) 参数： mimetype：可选。规定正在写的文档的类型。默认值是”text/html”。 replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 注1：open()方法将擦除当前HTML文档的内容，开始一个新的
详解Document.write()方法
08-10 1395
document.write()方法可以用在两个方面： 1.页面载入过程中，用脚本加入新的页面内容。 2.用延时脚本创建本窗口或新窗口的内容。 该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括H...
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。...这些类型构成了JS编程的基础，理解和掌握它们是学习JavaScript的第一步。
Javascript基础笔记
最新发布
08-22
JavaScript 基础笔记 JavaScript 是一种高级的、动态的、基于对象的脚本语言，主要用于客户端的脚本编程。下面是 JavaScript 基础笔记的知识点总结： JS 的位置 * 行内式 JS：直接在 HTML 文件中编写 JavaScript ...
JavaScript基础语法笔记
04-12
此“JavaScript基础语法笔记”涵盖了学习JS所必需的关键概念，包括循环结构、对象以及基本语法。 一、for循环 在JavaScript中，`for`循环是一种常用的迭代结构，用于重复执行一段代码直到特定条件满足。基本语法...
JavaScript基础笔记.md
06-23
JavaScript基础学习笔记
JavaScript基础笔记
07-18
这份“JavaScript基础笔记”涵盖了JS学习的关键概念，包括变量、运算符、函数、对象以及常用的内置对象如Date、String和Array。 首先，让我们从变量开始。在JavaScript中，声明变量使用`var`、`let`或`const`关键字...
js学习笔记(1)之document.write()方法使用总结
LHS的专栏
08-02 6894
js方法document.write();用来向浏览器页面输出内容 具体用法： 用来输出字符串内容：document.write("输出字符串内容要使用双引号"); 用来输出变量的值：如var mynum="hello"; document.write(mynum); 用来输出html标签内容：如document.write("你好!"); 用来输出混合内容，使用”+“号来连接内容：如d
学习笔记—document write( )语法、功能、以及需要注意的‘坑’
热门推荐
公众号：前端蛋卷
04-21 3万+
语法：document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示)  (2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算  (3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用...
document.write()详解
qq_43383323的博客
10-19 1万+
原博客：https://blog.csdn.net/wei_ke_zhi/article/details/82153778 一、document.write()运行原理 首先我们先了解一下这条语句运行的原理： document.write()是Javascript中对document.open()所开启的文档流操作的API方法。 它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open()打开新的文档流并写入，此时原来的文档流会被清.
javascript学习总结（一）
xiaoyong5854的博客
07-25 1118
1 概念 javascript：一门客户端脚本语言 （1）运行在客户端浏览器中的，每一个浏览器都有javascript的解析引擎 （2）脚本语言：不需要编译，直接就可以被浏览器解析执行 功能：可以用来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户体验。 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) 2 ECMAscrpipt语法 2.1 与html结合方式 1.内部js 定义<script>，
JavaScript学习笔记（一）
Simon郎的博客
03-01 313
概念：一门客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能： 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 1997年，ECMA制定了客户端语言的标准：ECMAScript，统一了所有客户端语...
javaScript基础
qq_44333590的博客
03-09 494
ECMAScript 引入js的方式 内部方式 <script> document.getElementById("btn").onclick=function () { alert("点我干嘛？"); } + 外部方式 <script src="js/my.js"></script> 输入输出语句 输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”
ts的switch使用
qq_42243957的博客
09-27 7111
"李立超JavaScript基础篇教学视频笔记及教程概述
JavaScript李立超基础篇笔记是针对李立超老师所讲的JavaScript基础知识整理而成的笔记。这个笔记以教学视频的集数为目录，详细概括了李立超老师在每集视频中所介绍的所有内容。 在视频教程的第一集中，李立超老师对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值