JS基础

最新推荐文章于 2024-04-24 19:31:26 发布
最新推荐文章于 2024-04-24 19:31:26 发布
阅读量316 收藏 1
点赞数 1
分类专栏： JS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X18621144576/article/details/79592718
版权

JS基础语法

1.基础语法
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基础语法</title>
    </head>
    <body>
    </body>
    <!-- 1. JS的引入 -->
    <!-- 内部引入 -->
    <script type="text/javascript">
        // 变量 - 内存
        // JS声明变量都用var关键字
        // 五种基本数据积类型
        // 变量名要求:
        // 1.数字 字母 下划线和$符号的组合
        // 2.不能以数字开头
        // 3.不能是关键字和保留字
        // 4.区分大小写
        // 规范: 可以使用驼峰命名法
        var a = 10; // 数值 Number
        var b = "123" // 字符串 String
        var c = '123' // 字符串 String
        var d = true; //布尔类型 boolean
        var e = false; // 布尔类型 boolean

        var f = null; //空对象
        var g; //未定义类型 undefined;

        // 1字节 = 8个二进制位
        // java 强类型语言
        // JS 弱类型语言

        // 判断相等 == ===
        // == 会判断两个值是否相等
        // === 除了判断值之外,还会判断类型
        console.log("5" == 5); //true
        console.log("5" === 5); //false

        console.log("5" != 5); //false
        console.log("5" !== 5); //true

        for(var a = 3; a < 10; a+=5){
            console.log(a);
        }

        // 类型转换
        // 查看类型
        console.log(typeof a);
        // 转数字 (true, false)
        console.log(Number(true));//1
        console.log(Number(false));//0
        console.log(Number("123"));//123
        console.log(Number("abc"));//NaN
        console.log(Number("a1"));//NaN
        console.log(Number("1a"));//NaN
        console.log(Number(""));//0
        console.log(Number(" "));//0
        console.log(Number(undefined));//NaN
        console.log(Number(null));//0

        // 转字符串
        console.log(String(true))//"true"
        // 转布尔值
        // 非0为真 非空为真
        console.log(Boolean(1231212));
        console.log(Boolean(""));
        // 隐式转换
        // 加号两边如果有一个是字符串,就是拼接字符串
        // 其他算数运算符是转化为数值计算
        console.log(3 + true);//4
        console.log(null + 5);//5
        console.log(false + "2");//false2
        console.log(5 - true);//4
        console.log(7 + null);//7
        console.log(6 + undefined);//NaN

        // 转数字 parseInt()
        console.log(parseInt(5.6));//5
        console.log(parseInt("5.6"));//5
        console.log(parseInt("34a6"));//34
        console.log(parseInt("a1"));//NaN

        // 10进制转2进制
        console.log(parseInt(15,8));

        //生成随机数
        var num = parseInt(Math.random() * (30 - 20 + 1) + 20);
        console.log(num);

        // 函数  JS里面的变量只分为函数内部的局部变量 和 函数外面的全局变量
        function test(a,b){
            console.log(a + b)
            return a * b;
        }
        var c = test(10,20,30);
        console.log(c);

        // 匿名函数
        var fn = function (){
            console.log("匿名函数")
        };

        // 匿名函数自执行
        (function (){
            console.log("匿名函数1")
        })();

        (function (){
            console.log("匿名函数2")
        }());

        fn();

        console.log("hello word");
    </script>
    <!-- 外部引入 -->
    <script type="text/javascript" src="xx.js"></script>
</html>

简单的DOM操作

1.基础的DOM操作
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        <style type="text/css">
        #first{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        </style>
    </head>
    <body>
        <div id="first"></div>
        <input type="text" class="uName" />
        <input type="button" value="点击" />
    </body>
    <script type="text/javascript">
        // 获取元素 并修改背景颜色
        var first = document.getElementById('first');
        first.style.backgroundColor = "blue";
        first.style.border = "5px gray solid";
        first.style.borderRadius = "15px";
        first.style.margin = "50px auto"
        first.style.transform = "rotate(45deg)"

        // 修改内容 innerHTML可以解析字符串里面的标签
        // innerText不能解析 可以写留言板
        first.innerHTML = "<p>福<p>";
        first.innerText = "<p>福<p>";
        console.log(first.innerHTML);
        // 通过类名获取一组元素
        var uNames = document.getElementsByClassName("uName");
        // uNames是所有类名为uName的集合(先当数组使用)
        // 获取 修改输入框都是用value
        uNames[0].value = "我是一个输入框"
        console.log(uNames[0].value);
        // 两种获取方式 三种修改内容 一种修改样式


        // 通过标签名获取
        var button = document.getElementsByTagName("input");
        var a = 1;
        // 添加点击方法 每次点击都会执行下面这个函数
        button[1].onclick = function(){
            uNames[0].value = a++;
            first.style.width = a * 10 + "px";
            first.style.height = "100px";
            first.style.transition = "1s";
            console.log(uNames[0].value);
        }
    </script>
</html>

定时器

3.一次性定时器和循环定时器
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定时器</title>
        <style>
            #first{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 10px;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="first"></div>
    </body>
    <script type="text/javascript">
        // 一次性定时器 延时器
        setTimeout(f1,1000);
            function f1(){
                console.log("执行了f1");
        }
        // 循环定时器
        var timer = setInterval(function(){
            console.log("循环定时器")
        },2000);

        setTimeout(function(){
            // 清除定时器
            clearInterval(timer);
            // clearTimeout()
        },8000)

        var first = document.getElementById('first');
        first.onclick = function(){
            var move = setInterval(function(){
                first.style.left = first.offsetLeft + 5 + "px";
                if (first.offsetLeft >= 500) {
                    clearInterval(move);
                }
            },20);
        }
    </script>
</html>
丝路花雨-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS入门基础知识
weixin_53136302的博客
07-26 2573
核心（ECMAScript）：描述了该语言的语法和基本对象。 文档对象模型（DOM）：描述处理网页内容的方法和接口。 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。
JS基础篇
qq_44039897的博客
03-04 394
简单介绍JS的基础知识
JS常用语法归纳（全）
nx_live的博客
04-24 2457
JS基础语法归纳，快速掌握JS语言
JS基础知识汇总
S654240464的博客
12-03 1545
JS基础知识汇总
JS基础详细汇总（（入门级））
乐观李菇凉
12-10 8442
JS基础 js介绍 一门脚本语言 组成 ECMAScript 简称ES,ES5,ES6 js语法规范 DOM 文档对象模型 操作页面内容 BOM 浏览器对象模型 操作浏览器功能 js基础写法 三种书写方式 内联 写在标签里面 外联 js独立出来的文件 script配合src属性导入 注意：如果写了外联，那么在 script 标签里，就不要写其他JS代码，因为写了也没用 行内（了解） 点我，告诉你黑马最帅的男人 js注释 // 单行 /* */
JS入门到精通完整版
qq_46362763的博客
08-08 1万+
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。.....................
JavaScript js基础用法 示例代码
最新发布
06-07
本资源主要是关于js基础用法的示例代码 内容包含了js变量定义 js输入输出 js转义符 js注释和编码规范 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种...
jsjavascript基础教程.zip
05-09
javascript基础 javascript游戏开发之贪吃蛇项目 javascript高级 nodejs开发 nosql数据之Mongodb 【javascript基础】 01-javascript的概述.md 02-字面量和变量.md 03-数据类型和typeof操作符.md 04-运算符.md 05-...
js基础知识点思维导图
11-29
以上是JavaScript基础知识点的部分概述，理解并掌握这些概念是成为合格的JS开发者的基础。通过持续学习和实践，可以深入探索更高级的主题，如AJAX、前端框架（如React、Vue）、Node.js后端开发等。
Javascript基础.xmind
07-31
JavaScript基础三天总结
软件测试 基础班 JavaScript JS基础.ppt
10-03
软件测试基础班 JavaScript JS基础是软件测试的一门重要课程，本节课将对 JavaScript 的基础知识进行详细的介绍。 一、JavaScript 简介 JavaScript 是一种高级的、动态的、基于原型的编程语言，主要用于客户端的...
js基础知识
04-09
自己学习js做的笔记，懒得写博客了 JS功能 JS实现方式 JS语法 JS数据类型 JS运算符 JS窗口对象 JS文本对象 JS事件处理机制
JavaScript基础入门Demo
11-29
7个简单的JavaScript基础入门Demo，直接双击网页文件可查看效果，编辑网页查看代码。
Js基础知识总结
qq_43403676的博客
04-25 3752
Js基础知识包括逻辑运算符、比较运算符、条件运算符数据类型等
JavaScript基础学习
wl0326ghb的博客
12-30 2042
js
JS基础(一)
bujiongdan的博客
08-08 1190
浏览器分两部分，一部分是shell（外壳），另一部分是内核。 IE              ----------------               trident Chrome    ----------------               blink firefox      -----------------              Gecko Opera       -...
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
javaScript基础语法
LDC，公众号【轻松学编程】
06-09 557
JavaScript基础语法 一、JavaScript的诞生 JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha-&gt;LiveScript-&gt;JavaScript 二、js用途 它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度...
js基础总结
仨胖的博客
11-17 348
1js的组成部分 第一部分：ECMAScript 基础的语句，语法 第二部分：BOM 浏览器对象模型 第三部分：DOM 文档对象模型 2、js和html的结合方式,有二种方式 第一种：使用html中的标签 js代码 第二种：使用html的标签，引入外部的js文件 3、js的变量声明和数据类型(5种) String number boolean undefine
JavaScript基础
06-09
JavaScript是一种脚本语言，用于与网页交互，可以控制网页的行为。以下是JavaScript的基础知识点： 1. 数据类型：JavaScript有七种数据类型，分别是undefined、null、布尔值、数字、字符串、对象和Symbol。 2. 变量和常量：使用var、let、const等关键字声明变量和常量。 3. 运算符：JavaScript支持算术运算符、比较运算符、逻辑运算符等。 4. 控制流：JavaScript支持if语句、switch语句、for循环、while循环等控制流语句。 5. 函数：JavaScript支持函数的定义和调用，可以通过函数来实现代码的复用。 6. 对象和数组：JavaScript中的对象和数组是常用的数据结构，可以通过它们来存储和操作数据。 7. DOM操作：JavaScript可以通过DOM操作来改变网页的内容、样式和行为。 以上是JavaScript的基础知识点，掌握好这些知识点能够帮助你更好地使用JavaScript编写交互式网页。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值