JS基础学习笔记

最新推荐文章于 2024-09-04 20:23:24 发布
最新推荐文章于 2024-09-04 20:23:24 发布
阅读量194 收藏 1
点赞数 1
分类专栏： HTML 文章标签： 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78955442/article/details/141694584
版权

1.引入方式

内部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 内部脚本 -->
    <script>
        alert('hello js');
    </script>
</body>
</html>

外部脚本

alert.js代码

alert("hello world");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script src="./JS/alert.js"></script>
</body>
</html>

书写语法

变量

数据类型

使用typeof  看他的类型

运算符

将其他类型转化成数字，用    parseInt （）

函数

对象

1.Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>
var arr=new Array(1,2,3);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

arr[10]=10;
console.log(arr);
console.log(arr[5]);



</script>

</html>

2.String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>
var str='helloworld';
console.log(str);
console.log(str.charAt(4));
console.log(str.length);
console.log(str.indexOf('wo'));
console.log(str.substring(5,10));


</script>

</html>

3.json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>

var user='{"name":"jack","age":18,"gender":"male"}';
var jsobsject=JSON.parse(user);
alert(jsobsject.name);

    var jsonStr = JSON.stringify(jsobsject);
    console.log(jsonStr);

</script>

</html>

4.BOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>

var result=confirm("你确定删除吗");
alert (result);
var i=0;
setInterval(function(){
i++;
    console.log("这是第"+i+"次");
},2000);


setTimeout(function(){
    alert("周期到了");
},5000);
</script>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>

alert(location.href);
location.href="http://baidu.com"
</script>

</html>

5.DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <img  id="h1" src="jpg/xinlang.jpg" ><br>

 <div class="cls">你好呀</div> <br>
 <div class="cls">我好呀</div> <br>

<input type="checkbox" name="hobby" > 电影
<input type="checkbox" name="hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏

</body>

<script>
//     //获取Element元素
//     //根据ID获取
// var img=document.getElementById('h1');
// alert(img);

// //根据标签获取
// var divs=document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
//    alert(divs[i]);
    
// }

//根据name属性获取
var ins=document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
   alert(ins[i]);
    
}


</script>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <img  id="h1" src="jpg/xinlang.jpg" ><br>

 <div class="cls">你好呀</div> <br>
 <div class="cls">我好呀</div> <br>

<input type="checkbox" name="hobby" > 电影
<input type="checkbox" name="hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏

</body>

<script>
//     //获取Element元素
//     //根据ID获取
// var img=document.getElementById('h1');
// alert(img);

// //根据标签获取
// var divs=document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
//    alert(divs[i]);
    
// }

// //根据name属性获取
// var ins=document.getElementsByName('hobby');
// for (let i = 0; i < ins.length; i++) {
//    alert(ins[i]);
    
// }

//根据class属性获取
var divs=document.getElementsByClassName('cls');

var div1=divs[0];
div1.innerHTML="hello world";




</script>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <img  id="h1" src="jpg/xinlang.jpg" ><br>

 <div class="cls">你好呀</div> <br>
 <div class="cls">我好呀</div> <br>

<input type="checkbox" name="hobby" > 电影
<input type="checkbox" name="hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏

</body>

<script>
//     //获取Element元素
//     //根据ID获取
// var img=document.getElementById('h1');
// alert(img);

// //根据标签获取
// var divs=document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
//    alert(divs[i]);
    
// }

// //根据name属性获取
// var ins=document.getElementsByName('hobby');
// for (let i = 0; i < ins.length; i++) {
//    alert(ins[i]);
    
// }

//根据class属性获取
// var divs=document.getElementsByClassName('cls');

// var div1=divs[0];
// div1.innerHTML="hello world";

var img=document.getElementById('h1');
img.src="jpg/xinlang-2.jpg";

var ins=document.getElementsByTagName("div");
for (let index = 0; index < ins.length; index++) {
    var temp=ins[index];
    ins[index].innerHTML+="<font color='red'>very good</font>"
    console.log(temp);
}

</script>

</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <img  id="h1" src="jpg/xinlang.jpg" ><br>

 <div class="cls">你好呀</div> <br>
 <div class="cls">我好呀</div> <br>

<input type="button" value="按钮1" id="btn1" onclick="on()"> <br>
<input type="button" value="按钮2" id="btn2"> <br>




</body>

<script>
function on(){
    alert("按键1被点击了");
}

document.getElementById('btn2').onclick=function(){
    alert("按键2被点击了");
}



</script>

</html>

终将超越过去
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础学习笔记01——变量、数据类型
visionchyw的博客
06-20 395
JavaScript基础学习笔记01——变量、数据类型
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
Three.js基础学习笔记
qq_38388578的博客
08-16 138
【代码】Three.js基础学习笔记。
JavaScript基础 学习笔记
kittates的博客
03-23 1173
初始JavaScript: 浏览器分为两部分:渲染引擎和JS引擎 渲染引擎:用来解析HTML、初始时,俗称内核,如Chrome的blink,老版本的webkit JS引擎:也成为JS解释器,用来读取网页中的JavaScript代码,对齐处理后运行,如Chrome的V8 浏览器本身不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码,JS引擎执行代码是逐行解释每一句源码 并转化为机器语言然后去执行。 J
js学习笔记
angel_791的博客
06-11 5089
JavaScript学习笔记 前端学习
Javascript入门学习笔记
weixin_61370021的博客
04-27 4636
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JS基础学习笔记-数组filter方法
smellsummer的博客
07-07 868
数组filter用于筛选数组，并且将满足条件的元素放入新数组中。
BabylonJS初学习笔记
qq_46098517的博客
01-26 257
初步接触Babylonjs，由于学习跨度会比较大，所以就做了一些笔记，在此分享出来，希望能够对那些和我一样学习的新人有所帮助。
Node.js学习笔记
2301_79614379的博客
07-21 1025
前端工程化：开发项目直到上线，过程中集成的所有技术和工具。Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容。Node.js模块化：概念：每个文件当做一个模块，独立作用域，按需加载使用：采用特定的标准语法导出和导入进行使用CommonJs标准：一般应用在Node.js项目环境中ECMAScript标准：一般应用在前端工程化项目中Node.js包：概念：把模块文件，代码文件，其他资料聚合成一个文件夹项目包：编写项目需求和业务逻辑的文件夹。
Javascript基础学习笔记
09-28
基础的js笔记
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
Bucket:JS基础学习笔记
08-04
【标题】：JS基础学习笔记 ...这份JS基础学习笔记包含了从入门到进阶的重要概念，结合实际案例，将有助于读者逐步构建起完整的JavaScript知识体系，为网页开发或Web应用的进一步学习打下坚实基础。
Javascript基础学习笔记(菜鸟必看篇)
12-04
总的来说，JavaScript的基础学习涵盖了变量、语句、数据类型和函数的使用，这些都是编写有效和可维护的JavaScript代码的基础。作为初学者，理解和掌握这些概念至关重要，因为它们将为你后续的JavaScript编程旅程打下...
【学习笔记】卫星通信NTN 3GPP标准化进展分析（六）- 参考标准
u011376987的博客
09-01 1141
本文总结了NTN标准化进程以及后续的研究计划，是学习NTN协议的入门。本文来自3GPP Joern Krause, 3GPP MCC。
iomuxc、pinctrl子系统、gpio子系统（学习总结）
最新发布
weixin_61385844的博客
09-04 849
IOMUXC是SOC设计中实现引脚复用的关键组件，它通过动态切换引脚功能，提高了IO资源的利用率，满足了不同外设和功能的IO需求。在配置和使用IOMUXC时，需要参考芯片使用手册和设备树文档，确保引脚功能的正确设置。
Datawhale X 李宏毅苹果书AI夏令营 学习笔记
m0_61049596的博客
08-31 1305
今天，我继续学习了深度学习中的优化算法，并且着重理解了如何利用。等高级优化器来提高模型训练的效率和效果。2024年8月30日。
学习项目1
m0_62803606的博客
09-03 1600
这篇文章主要记录你最近入手的无线串口模块的配置情况，这是个很好的习惯，尤其是在你以后需要重复操作或排查问题时，会非常有帮助。- **DL_20无线串口模块**：这是一个常见的无线串口通信模块，通常基于nRF24L01+等无线通信芯片，支持点对点或多点通信，适合短距离的无线数据传输。是的，如果你按照步骤成功配置了两个模块并将它们连接到单机和电脑，当你在上位机软件（如SSCOM）上能稳定地接收到从单片机发送的数据（例如每秒输出的T值），就说明两个无线模块之间的通信已经配置成功。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值