day 34 JavaScript

最新推荐文章于 2024-08-09 21:30:00 发布
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量76 收藏
点赞数
分类专栏： 前端 文章标签： javascript node.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_1617271856/article/details/120228149
版权

day 34 JavaScript

1.js简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="myjs.js"></script>
</head>
<body>
<!-- js的书写位置-->
<div></div>

<script>
    // js的单行注释
    /*
        js的多行注释
        js的多行注释
        js的多行注释
        js的行注释
    */
    var a = 1;
    a = 10;
    console.log(a)
    // 定义常量
    const pi = 3.14
    console.log(pi)

    let b = 1
    console.log(b)


</script>
</body>
</html>

2.js数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //  c = 123e5 => 123 * 10 ** 5  =》 1.23 * 10 7
    //  c = 123e-5 => 123 * 10 ** 5

    var a = '123'
    var b = 123
    var c = 123.12
    var d = '123.12'

    // console.log(typeof a);
    // console.log(typeof b);
    // console.log(typeof c);
    // console.log('hello' + 'world');
    // console.log(b + a)
    // console.log(b + parseInt(a))
    // console.log(b + parseFloat(d))
    // console.log(typeof Number(a))
    // console.log(typeof Number(d))
    // a = parseInt(a)
    // console.log(parseInt(a))
    // console.log(typeof a)
    // console.log(typeof parseInt(a))
    // console.log(Number(a))
    // console.log(typeof a)

    // console.log(parseInt('123fssdfds423432dfsdfd'))
    // console.log(parseInt('fsdfsdfs123fsdfsdfd'))

    // var s = 's'
    // var s1 = "a"

    var s = 'hello babydsadasbaby'
    var s1 = 'oldboy';
    var s2 = 'ly';
    // console.log(s.length)
    // console.log(s.charAt(7))
    // console.log(s.concat(s1,' ',s2,s3,s4))
    // console.log(s + ' ' + s1 + s2)

    // console.log(s.indexOf('baby'))
    // console.log(s.indexOf('baby1')  == -1)
    // s.toUpperCase()

    // var s = 'my name is ly, my age is 18'
    var name = 'ly'
    var age = 18
    // s = 'my name is ' + name + ', my age is ' + age
    // console.log(s)

    // 模板语法， es6的语法
    var s = `my name is ${name}, my age is ${age}`
    console.log(s)

    var s1;



</script>
</body>
</html>

3.数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // var a = [1, 2, 3]

    // console.log(a.length)
    // console.log(a[0])
    // console.log(a[1])
    // console.log(a[2])
    // a.push(4)
    // console.log(a)

    // var b = ['a', 'b', 'c']
    // console.log(b.join(','))
    // var c = 'a|b|c|d'
    // console.log(c.split('|'))

    var arr = [1, 4, 6, 783, 3, 5, 7]
    // arr.sort()
    // console.log(arr)
    // console.log(arr.reverse())

    // arr.forEach(function (value, index) {
    //     console.log(value, index)
    // })

    var a = [10, 20, 30, 40];
    for (var i = 0;i < a.length;i++) {
        console.log(i);
    }
    //
    // var i=0;
    // for (;i<a.length;) {
    //     console.log(a[i])
    //     i += 1
    // }


</script>
</body>
</html>

4.运算符

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

<script>
    var x = 10;
    var res1 = x++;// 先赋值在加1
    var res2 = ++x;// 先加1，在赋值
    console.log(res1)
    console.log(res2)


    var a = 10;
    // if (a > 5) {
    //     console.log("yes");
    //     console.log("yes");
    //     console.log("yes");
    //     console.log("yes");
    //     console.log("yes");
    //     console.log("yes");
    //     console.log("yes");
    // } else {
    //     console.log("no");
    // }

    // var a = 10;
    // if (a > 5) {
    //     console.log("a > 5");
    // } else if (a < 5) {
    //     console.log("a < 5");
    // } else {
    //     console.log("a = 5");
    // }

    var day = new Date().getDay();
    console.log(day)
    switch (day) {
        case 0:
            console.log(123)
            break
        case 1:
            console.log("Monday");
            break;

    }
</script>
</body>
</html>

5.三元运算符

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

<script>
    // var a = 1;
    // var b = 2;
    // var c = a > b ? a : b
    // console.log(c)

    var a = 10, b = 20;
    var x = a > b ? a : (b == "20") ? a : b;
</script>
</body>
</html>

6.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 定义函数
    function f() {
        // console.log(123)
        // console.log(123)
        // console.log(123)
        // console.log(123)

        // console.log(a, b)
        // console.log(c, d)
        // console.log(a)
        // console.log(arguments)
        // console.log(arguments[1])
        // console.log(arguments[2])
        // console.log(arguments[3])
        // console.log(arguments[4])
        // console.log(arguments.length)
        console.log(123)
        return [1, 2, 3, 4]
    }

    // // 调用函数
    // var res = f(1, 2, 3, 4, 5)
    // console.log(res)

    // 匿名函数方式
    var sum = function (a, b) {
        return a + b;
    }
    sum(1,2)

</script>
</body>
</html>

7.局部变量和全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // var city = "BeiJing";

    // function f() {
    //     // var city = "ShangHai";
    //
    //     function inner() {
    //         // var city = "ShenZhen";
    //         console.log(city);
    //     }
    //
    //     inner();
    // }
    //
    // f();  //输出结果是？

    // var city = "BeiJing";
    //
    // function Bar() {
    //     console.log(city);
    // }
    //
    // function f() {
    //     var city = "ShangHai";
    //     return Bar;
    // }
    //
    // var ret = f();
    // ret();  // 打印结果是？

    var city = "BeiJing";

    function f() {

        var city = "ShangHai";

        function inner() {
            console.log(city);
        }

        return inner;
    }

    var ret = f();
    ret();
</script>
</body>
</html>

8.自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 自定义对象,两种方式
    // 1. 第一种方式
    var obj = {'username': 'egon'}  // object, 空对象
    // 增加
    // obj.age = 10;
    // obj['gender'] = 'male';
    //
    // // 修改
    // obj.age = 11
    //
    // // 删除
    // delete obj.age
    // console.log(typeof obj)
    // console.log(obj)

    // 第二种方式
    var obj1 = new Object()// {} object, 空对象
    obj1.age = 10;
    obj1['gender'] = 'male';

    // 修改
    obj1.age = 11

    console.log(typeof obj1)
    console.log(obj1)
    // console.log(obj.age)
    console.log(obj1.age)

    // {'username':'aaa', 'password':'123'}

    var a = {"name": "Alex", "age": 18};

    // 遍历对象的
    for (var i in a) {
        console.log(i, a[i]);
    }
</script>
</body>
</html>

9.date对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    var d = new Date();
    // getDate()                 获取日
    // getDay ()                 获取星期
    // getMonth ()               获取月（0-11）
    // getFullYear ()            获取完整年份
    // getYear ()                获取年
    // getHours ()               获取小时
    // getMinutes ()             获取分钟
    // getSeconds ()             获取秒
    // getMilliseconds ()        获取毫秒
    // getTime ()                返回累计毫秒数(从1970/1/1午夜)

    // console.log(d.getDate())
    // console.log(d.getDay())
    // console.log(d.getMonth())
    // console.log(d.getFullYear())
    // console.log(d.getYear())
    // console.log(d.getMinutes())
    // console.log(d.getSeconds())
    // console.log(d.getMilliseconds())
    // console.log(d.getTime())

    console.log(d.toLocaleString())
</script>
</body>
</html>

10.json对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // json
    // dumps     JSON.stringify(obj1)      object类型转换string
    // loads       JSON.parse(str1)         string转换object对象类型

    var str1 = '{"name": "Alex", "age": 18}';
    var obj1 = {"name": "Alex", "age": 18};
    console.log(typeof obj1)
    console.log(JSON.stringify(obj1))
    console.log(typeof JSON.stringify(obj1))
    // str_obj = JSON.parse(str1) // 反序列化
    // console.log(str_obj)
    // console.log(str_obj.name)
    // console.log(typeof str1)
    // console.log(typeof str_obj)

</script>

</body>
</html>

11.正则对象

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

<script>
    // 定义正则表达式两种方式
    // var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
    // var reg1 = new RegExp("13[123569]{1}\\d{8}|15[1235689]\\d{8}|188\\d{8}");
    // var reg2  = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
    // var reg1 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/

    // console.log(reg1.test('31312312'))
    // console.log(reg1.test('a434'))
    // console.log(reg1.test('15838665930'))

    var s1 = 'egondsb dsb dSb';
    //             s
    console.log(s1.match(/s/gi))  // i => ignore

    console.log(Math.random())
    console.log(Math.round(4.55555))
</script>
</body>
</html>

12.定时器

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

<script>
    // 1, 几秒之后执行一次

    function f() {
        console.log(123)
    }

    // // 时间单位是毫秒
    // let t = setTimeout(f, 5000)
    //
    // // 清除定时器
    // clearTimeout(t)


    let t = setInterval(f, 2000)
    clearInterval(t)

</script>
</body>
</html>

13.BOM操作

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


<script>
    // BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

    /*
    * navigator.appName　　// Web浏览器全称
    navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
    navigator.userAgent　　// 客户端绝大部分信息
    navigator.platform　　　// 浏览器运行所在的操作系统
    * */


    /*
    * location.href  获取URL
     location.href="URL" // 跳转到指定页面
     location.reload() 重新加载页面
    *
    * */

    // alert("你看到了吗？");
    // var res = confirm("你确定吗？")
    // console.log(res)

    var res = prompt("请在下方输入","你的答案")
    console.log(res)

</script>
</body>
</html>

14.查找标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1" class="c1 c2">d1</div>
<div id="d2" class="c2">d2</div>

<script>
    // ID查找
    // var d1 = document.getElementById('d2')

    // class
    // var d1 = document.getElementsByClassName('c2')[0]

    // 标签名
    var d1 = document.getElementsByTagName('div')[0]
    console.log(d1)
</script>
</body>
</html>

15.间接查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1" class="">
    <p class="p1">p1
        <span class="span1"></span>
    </p>
    <p class="p2">
        p2
    </p>
</div>

<div id="d2">
    222
</div>

<!--<ul>-->
<!--    <li>1</li>-->
<!--    <li>2</li>-->
<!--    <li>3</li>-->
<!--    <li>4</li>-->
<!--    <li>5</li>-->
<!--</ul>-->

<script>
    // var p = document.getElementsByClassName('p1')[0]
    //
    // var div1 = p.parentElement
    // console.log(div1)


    // var span = document.getElementsByClassName('span1')[0]
    //
    // var div1 = span.parentElement.parentElement.parentElement
    // console.log(div1)

    // var div1 = document.getElementById('d1')
    // var p = div1.children[0]
    // console.log(p)

    var div = document.getElementById('d1')
    var p = div.firstElementChild
    console.log(p)

</script>
</body>
</html>
迪迦张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript笔记(适合有语法基础的人看)
m0_71176060的博客
03-06 400
/完整格式for(var i=0;/*———————————————————————————————基本语法以结束———————————————————————————————*/const system = ["Linux", "Mac", "Windows",3,true] //用[]内加""创建。substring(起始,终止) //分割字符串,参数代表分割的字段,例如0,5那么就是输出Hello。
字符串的扩展
weixin_34239592的博客
05-09 74
<!--字符串的扩展--> <script type="text/javascript"> /*1.字符串的unicode表示法*/ function unicode(){ //JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Uni...
操作字符串
qq_45989363的博客
07-08 97
let s = "hello, world!" //取得字符串的一部分 console.log(s.substring(1,4)); //第2～4个字符 console.log(s.slice(1,4)); //同上 console.log(s.slice(-3)); //最后三个 console.log(s.split(", ")); //从界定符只中分开 //搜索字符串 console.log(s.indexOf("l")); //第一个l的位置 console.log(s.inde
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 473
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
【Vue3】图片未加载成功前占位
菜就多练
08-08 264
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 225
社交媒体分享链接时的预览图片和内容
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions
zzyp1927314的博客
08-05 497
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 978
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
【Material-UI】Autocomplete 组件的局限性（Limitations）详解
lph159的博客
08-05 730
在某些情况下，您可能需要为 Autocomplete 组件提供自定义的。此时，务必确保滚动容器具有属性。这样可以确保在使用键盘导航时，滚动行为的正确性。虽然 Material-UI 的 Autocomplete 组件提供了强大的功能，但开发者在使用时需要注意其一些局限性。通过合理设置组件属性和处理可能出现的问题，可以提升组件的用户体验和可访问性。希望本文能帮助您更好地理解和应用 Autocomplete 组件中的局限性。如果您有任何问题或建议，欢迎交流探讨。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 372
Json的序列化与反序列化
i5ting_toc工具优化
麦麦麦先森的小世界
08-07 563
markdown转换支持带左侧导航的html
第15节课：表单高级功能——提升用户填写体验与数据交互
学问小小谢的技术博客
08-07 673
在现代Web应用中，表单是用户与服务器交互的重要方式。HTML5引入了一系列高级表单属性和数据绑定技术，极大地提升了用户的填写体验和表单数据的处理效率。本节课将深入探讨`autocomplete`、`autofocus`、`placeholder`等表单属性，以及表单数据的动态绑定和更新技术。
初步认识vue
qq_64669006的博客
08-05 306
vue是一种自下而上的渐进式框架，当实现简单的应用时，只需一个轻量小巧的核心库；当实现复杂的应用时，可以引入各式各样的Vue插件。
[Vue3] - 5 watch与watchEffect用法
weixin_45291798的博客
08-09 395
一全部属性firstName:'张',lastName:'三',job:{name:'前端工程师'}});接收的参数newValue与oldValue，person下的job对象改变，watch也能监视到，在vue2中只有开启了deep深度监视才会生效1 无法获取正确的oldValue2 deep设置无效，强制开启深度监视watch监听的是RefImpl或Proxy结构watchEffect监听回调中用到额度属性。
colResizable插件实现网页中表格列宽自定义
每天学习一点点
08-09 172
解决方法：使用jQuery的一个插件，名称叫 colResizable，可以实现。需求：页面上每个字段的列宽，可以通过页面拖动的形式进行调整。该插件依赖jQuery，所以需要在使用前引用jQuery。.Table指表格中table的class名称。
Vue - 关于v-wave 波浪动画组件
miaomiaowins的博客
08-07 993
这个动画库可以在标签中添加新的v-wave属性，来让点击标签元素后添加漂亮的波纹效果，并且可以根据父元素自动形成波纹的颜色，也可以自定义波纹颜色，持续时间，透明度，触发的对象等。
【微信小程序实战教程】之微信小程序中的 JavaScript
柯晓楠
08-06 1132
小程序的开发框架被称为MINA框架，其框架结构如图1所示。图1 MINA框架结构通过上面的框架结构图，我们可以看到小程序的MINA框架有三个部分组成，首先是View视图层，其次是App Service逻辑层和Native系统层。小程序中所有的页面都在View视图层中，每个页面由WXML文件和WXSS文件来搭建页面视图的结构和展现样式。App Service逻辑层是由App Service线程来加载、运行的，其生命周期常驻内存。
H5页面返回时提示用户返回将丢失信息
no_one_but_you的博客
08-06 199
H5页面返回时提示用户返回将丢失信息
Javascript——原始数据类型的自动装箱
weixin_45705239的博客
08-06 280
在 JavaScript 中，自动装箱（Automatic Boxing）是指当对原始数据类型（如字符串、数字和布尔值）执行类似对象的操作时，JavaScript 引擎会临时将其转换成对应的对象类型，以便可以使用对象上的方法或属性。StringNumberBooleanSymbol (在 ES6 及之后的版本中)String 对象Number 对象Boolean 对象Symbol 对象。
JS 补充内容
2301_80441013的博客
08-06 721
注意：dataset 会得到所有的自定义属性，并且将其变为一个集合对象返回指定时间戳根据日期返回对应的星期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值