JavaScript学习

最新推荐文章于 2024-05-03 23:30:14 发布
最新推荐文章于 2024-05-03 23:30:14 发布
阅读量253 收藏
点赞数
分类专栏： android 前端 文章标签： android 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pgg_cold/article/details/81433810
版权

1.js嵌入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js嵌入方式</title>
    <!--嵌入式-->
    <script type="text/javascript">
        alert('hello,again');
    </script>

    <!--外联式-->
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>
<!--行间事件，不推荐使用-->
<input type="button" name="" value="弹框" onclick="alert('hello')">


</body>
</html>

2.js点击事件实现换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤</title>

    <link id="link1" rel="stylesheet" type="text/css" href="1.css">

    <script type="text/javascript">

        window.onload=function () {
            var box1=document.getElementById("div1");
            var box2=document.getElementById("div2");

            box1.onclick=aa;
            box2.onclick=bb;
        }

        function aa() {
            var oLink=document.getElementById('link1');

            oLink.href='2.css';
        }

        function bb() {
            var oLink=document.getElementById('link1');

            oLink.href='1.css';
        }

    </script>
</head>
<body>

<div id="div1" class="box01">

</div>

<div id="div2" class="box02">

</div>

</body>
</html>

3.js中括号操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js中括号操作属性</title>

    <script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            var attr='color'
            oDiv.style[attr]='red';
        //    innerHtml可以读写元素包括的内容
            oDiv.innerHTML='ddddddd';
            alert(oDiv.innerHTML);
        }
    </script>
</head>
<body>
<div id="div1"> </div>
</body>

4.js操作class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作class</title>
    <style type="text/css">
        .box01{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box02{
            width: 300px;
            height: 300px;
            background-color: gold;
        }
    </style>


    <script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            oDiv.className='box02';
        }
    </script>
</head>
<body>
<div class="box01" id="div1"></div>
</body>
</html>

5.js操作style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作style属性</title>

    <script type="text/javascript">

        window.onload=function () {
            var  oDiv=document.getElementById('div1');
            oDiv.style.color='red';

            oDiv.style.background='gold';

            oDiv.style.fontSize='30px';
        }
    </script>
</head>
<body>

<div class="div" id="div1">div</div>
</body>
</html>

6.js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数</title>

    <script type="text/javascript">
        function aa() {
            alert("hello");
        }

    </script>
</head>
<body>
<input type="button" value="弹框" onclick="aa()">
</body>
</html>

7.js函数传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数传参</title>
    <script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById("div1");
            function changeStyle(sty,val) {
                oDiv.style[sty]=val;
            }

            changeStyle('color','red');
        }
    </script>
</head>
<body>
<div id="div1">div元素</div>
</body>
</html>

8.js return

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的return语句</title>
    <script type="text/javascript">
        window.onload=function () {
            var input1=document.getElementById('input1');
            var input2=document.getElementById('input2');
            var button=document.getElementById('btn_add');

            button.onclick=pop;

            function pop() {
                var ll=getResult();
                alert(ll);
            }
            function getResult() {
                var num1=input1.value;
                var num2=input2.value;
                return parseInt(num1)+parseInt(num2);
            }


        }
    </script>
</head>
<body>
<input type="text" name="" id="input1">
<input type="text" name="" id="input2">
<input type="button" name="" value="相加" id="btn_add">
</body>
</html>

9.js数组常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js数组常用方法</title>

    <script type="text/javascript">
        var aRr=[1,2,3,4];
        var sTr=aRr.join('-');//1-2-3-4
        var srt=aRr.join("");//1234
        aRr.push(5);//尾部添加
        // alert(aRr.pop());//尾部删除

        aRr.unshift(12);//头部添加
        // alert(aRr.shift());//头部删除
        // alert(aRr.reverse());//反转数组
        // alert(aRr.indexOf(12));//返回元素第一次出现的下标
        aRr.splice(2,2,'a','b','c');//参数：No1：从第几个开始；No2：删除几个元素；No3,4,5:在No1后添加的元素
        alert(aRr);


    </script>
</head>
<body>

</body>
</html>

 

胖哥哥飘过
关注
专栏目录
JavaScript学习总结
qq_53069622的博客
07-08 1924
JavaScript学习总结
19 JavaScript学习：调试
百锦再的博客
04-28 8万+
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
10 JavaScript学习：函数
百锦再的博客
04-23 7万+
使用 function 关键字：// 函数体使用函数表达式：// 函数体使用箭头函数（ES6）：// 函数体// result 等于 5// result 等于 6。
18 JavaScript学习：错误
百锦再的博客
04-26 8万+
try…catch语句用于捕获可能出现的错误，并在出错时执行相应的错误处理代码。在JavaScript中，try块中的代码是被监视的，如果其中的代码出现了错误，就会立即跳到catch块中执行错误处理代码。try {// 可能会抛出错误的代码throw new Error('这是一个自定义错误！');// 处理错误的代码在这个例子中，try块中的代码是被监视的，如果条件condition为true，就会抛出一个自定义错误对象。
22 JavaScript学习：表单验证
热门推荐
百锦再的博客
04-30 9万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
26 JavaScript学习：JSON和void
最新发布
百锦再的博客
05-03 9万+
在 JavaScript 中，JSON 格式是一种常见的数据交换格式，它与 JavaScript 对象有着相似的结构，但在一些细节上有所不同。在 JSON 中，每个键值对由一个名称和一个值组成，名称是一个字符串，值可以是字符串、数字、布尔值、Null、数组或嵌套对象等不同类型的数据。是一个特殊的表达式，通常用于在 href 属性中作为超链接的 URL，以防止页面跳转。在 JavaScript 中，可以使用内置的 JSON 对象提供的方法将 JSON 字符串转换为 JavaScript 对象。
15 JavaScript学习：循环
百锦再的博客
04-25 8万+
JavaScript中的循环语句用于重复执行特定的代码块，直到指定的条件不再满足。条件判断：在每次迭代开始前都会检查的条件，如果条件为真，则继续执行循环体内的代码块；条件判断：在每次迭代开始前都会检查的条件，如果条件为真，则继续执行循环体内的代码块；循环是 JavaScript 中最常用的循环语句之一，它允许在一定次数的循环中重复执行代码块。在这个示例中，无论条件是否满足，循环体内的代码块至少会执行一次。循环更适合在条件为真时重复执行代码块，或者在需要至少执行一次循环体的情况下使用。
13 JavaScript学习：运算符
百锦再的博客
04-25 7万+
JavaScript 中的算术运算符用于执行基本的数学运算，常见的算术运算符包括加法（+）、减法（-）、乘法（*）、除法（/）和求余（%）。：将数字的二进制码向右移动指定的位数，高位补符号位（正数补0，负数补1）。减等赋值（-=）：将右侧的值从左侧的变量中减去，并将结果赋给左侧的变量。加等赋值（+=）：将右侧的值加到左侧的变量上，并将结果赋给左侧的变量。乘等赋值（*=）：将左侧的变量乘以右侧的值，并将结果赋给左侧的变量。除等赋值（/=）：将左侧的变量除以右侧的值，并将结果赋给左侧的变量。
JavaScript学习目录
过客如期的博客
06-07 1119
背景介绍 语言特性 代码流程控制 数值介绍 字符串介绍 数组介绍 对象介绍 函数介绍 函数中this指向 闭包函数 面向对象编程 代码预解析 JavaScript执行机制
11 JavaScript学习：事件
百锦再的博客
04-23 7万+
事件是指用户在页面上执行的动作（如点击按钮、鼠标移动、键盘输入等）或者浏览器本身触发的动作（如页面加载完成、窗口尺寸改变等）。JavaScript 可以通过事件监听器来捕获这些事件，并对其做出相应的处理，从而实现页面的动态交互效果。这些是一些常见的 HTML 事件，还有许多其他事件可以用于不同的交互行为。通过事件属性和相应的 JavaScript 函数，可以实现丰富的用户交互功能。通过监听用户的操作并进行合适的响应，可以提升用户体验并实现更多交互功能。
JavaScript学习指南
03-20
JavaScript学习指南 JavaScript，一种广泛应用于网页和网络应用的脚本语言，是互联网上最流行的编程语言之一。它主要用于客户端的交互式网页开发，也可以在服务器端通过Node.js平台进行后端开发。JavaScript与Java...
JavaScript学习指南 高清 PDF
10-20
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
JavaScript学习（一）
05-25
JavaScript学习（一） JavaScript是一种广泛应用于网页和网络应用的脚本语言，由 Netscape 的 Brendan Eich 在1995年发明。它主要用于客户端的网页交互，赋予网页动态功能，如响应用户操作、处理数据、与服务器通信...
javascript 学习
04-09
在本文中，我们将深入探讨JavaScript的学习路径、重要概念以及如何利用它来增强网页交互性。 首先，让我们从基础开始。JavaScript是ECMAScript规范的实现，它的主要用途是使网页动态化，提供用户交互、页面更新、与...
Android面试题（27）-android的事件分发机制
pgg_cold的博客
03-07 1万+
今天开始写一点关于view的知识，先从最基本的讲吧，android的事件分发机制，其实在我看来，android的事件分发机制在现实生活中经常能看到，所以我觉得还是很好理解的；先看看生活中常见的一种情形吧；比如说，现在你所在的公司中有一项任务被派发下来了，项目经理把项目交给你的老大，你的老大老大手下有很多人，看了看觉得你做很合适，把这个任务交给你了；你一看觉得还行，你就接下来了；这么一个小小场景大概...
RxJava2+Retrofit2+okHttp的二次封装
pgg_cold的博客
01-20 1万+
项目Demo已经上传至github链接本人android小白一枚，在学习android的过程中，我感受很深，在做了这么多练手的项目之后，我觉得android就像一块画板，画板是白纸，作为android的开发人员，要做的就是运用一切可能，去在画板上画出让人看的懂并且美观的画。说起来，我们却也属于艺术家这一行了。。。在我看来，android是为了展示数据的，这里就要分两个步骤了，第一就是怎样去展示，这...
Android面试题（31）-App启动流程
pgg_cold的博客
03-08 1万+
先贴个链接，总结的挺全面 在看这篇文章之前，希望先看完我的之前的博客 android面试（6）-Binder机制，因为关于App启动流程设计很多Binder通信； 先将“三个进程”，“六个大类”进行介绍： 三个进程： Launcher进程：整个App启动流程的起点，负责接收用户点击屏幕事件，它其实就是一个Activity，里面实现了点击事件，长按事件，触摸等事件，可以这么理解，把Launc...
flutter学习--搜索框
pgg_cold的博客
05-26 1万+
主入口文件 继承StatelessWidget,然后在home属性中加入SearchBarDemo，这是一个自定义的Widget，主要代码都在这个文件中。 import 'package:flutter/material.dart'; import 'search_bar_demo.dart'; void main() =>runApp(MyApp()); class MyApp ext...
JavaScript学习资源大全
"JavaScript学习指南" JavaScript，又称为JS，是一种广泛应用于网页和互联网应用的轻量级编程语言，它主要用于客户端的网页脚本编写，使网页具有动态交互性。JavaScript可以操控HTML元素、处理用户输入、操作DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值