JavaScript基础知识学习笔记（适合懂得一定开发的人员学习，都是与java不同的一些小知识点）

最新推荐文章于 2025-08-20 20:20:08 发布
最新推荐文章于 2025-08-20 20:20:08 发布
阅读量567 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： java学习心得 JavaScript 文章标签： 程序员 javascript 代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zl1582330223/article/details/47019381
本文介绍了JavaScript的基础知识，包括文档写入、事件响应、DOM操作、变量声明及数据类型等内容，并提供了多个示例帮助理解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、JS简介

（注意以后的代码中会省略<!DOCTYPE html>  <html>  <body>这3个标签,如Demo1所示）
Demo1:document.write
HTML代码：
<!DOCTYPE html>
<html>
<body>

<p>
JavaScript能够直接写入HTML输入流中
</p>

<script>
document.write("<h1> This is a heading</h1>");
document.write("<p> This is a paragragh.</p>");
</script>

<p>
您只能在HTML输入流中使用<strong>document.write</strong>.
如果您在文档以加载后使用它（比如在函数中），会覆盖整个文档。、
</p>

</body>
</html>
显示结果：

JavaScript 能够直接写入 HTML 输出流中：

This is a heading

This is a paragraph.

您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。


Demo2：alert() 函数在 JavaScript 中的使用
<h1>我的第一段 JavaScript</h1>
<p>
JavaScript能够对事件做出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('Welcome!')">点击这里 </button>

显示结果：

我的第一段 JavaScript

JavaScript 能够对事件作出反应。比如对按钮的点击：


Demo3: JavaScript处理HTML内容
<h1>我的第一段HTML元素的内容。</p>

<p id="demo">
JavaScript 能改变HTML元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementByid("demo");//找到元素的内容
x.innerHTML="Hello JavaScript!";//改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
显示结果：
改变前：改变后：


Demo4:点击灯泡就可以打开或关闭这盏灯
<script>
function changeImage()
    {
         element=document.getElementById('myimage')
          if(element.src.match("bulbon"))
            {
                element.src="/i/eg_bulboff.gif";        
            }else{
                element.src="/i/eg_bulbon.gif";
            }
    }
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
显示结果：
改变前：改变后：

Demo5：改变字体的颜色
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变HTML元素的样式
</p>

<script>
    function myFunction(){
    x=document.getElementById("demo")//找到元素
    x.style.color="#ff0000";
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>
显示结果：
改变前：改变后：

Demo6:JavaScript验证用户的输入

<h1>我的第一段JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
        alert(”Not Numeric“);
    }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

显示结果：



二、JS实现

JavaScript的放置位置：

一：<head> 或 <body> 中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

写法一：JavaScript写在<head>中，好处独立出来更易区分
<head>
<script>
function myFunction()
{
     document.getElementById("demo").innerHTML="My First JavaScript Function";   
}
</script>
</head>

<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
写法二：JavaScript写在body中，注意写在<p>下面，确保<p>元素创建之后再执行脚本
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
     document.getElementById("demo").innerHTML="My First JavaScript Function";   
}
</script>
</body>
显示结果：
改变前：改变后：

二：外部的JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p> <b>注释：</b>myFunction保存在名为"myScript.js"的外部文件中。</p>
<script type="text/javascript" src="/js/myScript.js"></script>
提示：外部脚本不能包含 <script> 标签。


三、JS输出

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

<h1>My First Web page</h1>
<p> My First Paragragh.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
   document.write("糟糕！文档消失了。");
}
</script>
显示结果：
测试前；测试后：


四、JS语句

1、分号：用于分隔 JavaScript 语句。

在 JavaScript 中，用分号来结束语句是可选的。

2、JavaScript对大小写敏感

3、JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

4、反斜杠对代码行进行换行

成功： 
document.write("Hello \
World!");
失败：
document.write \
("Hello World!");
提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

五、JS注释
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。
注释放到代码行的结尾处：
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
<script>
var pi=3.14;
var name="Bill Gates";
var answer="Yes I am!";
document.write(pi +"</br>");
document.write(name +"</br>");
document.write(answer+"</br>");
</script>

注意：
1.未使用值来声明的变量，其值实际上是 undefined。
2.如果重新声明 JavaScript 变量，该变量的值不会丢失。
var carname="Volvo";
var carname;
值依然是“Volvo”
3.您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：
JavaScript 数据类型
1.javaScript拥有动态的数据类型
var x    //x为undefined
var x=6; //x为数字
var x="Bill Gates"; //x为字符串
2. 字符串可以是引号中的任意文本。您可以使用单引号或双引号
3.javaScript只有一种数字类型（可支持指数运算）
<script>
var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-5;

document.write(x1+"</br>");    //36
document.write(x2+"</br>");    //36
document.write(y+"</br>");    //12300000
document.write(z+"</br>");  //0.00123
</script>

JavaScript 数组
写法1、var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
写法2、var cars=new Array("Audi","BMW","Volvo");
写法3、var cars=["Audi","BMW","Volvo"];

测试用例：
<script>
var i;
var cars=new Array();
cars[0]='Audi';
cars[1]='BMW';
cars[2]='Volvo';
for(i=0;i,cars.length;i++)
{
    documetn.write(cars[i]+"</br>");
}
</script>
JavaScript 对象
写法1、var persons={firstname;"Bill",lastname:"Gates",id:5566};
写法2、
var persons={
firstname;"Bill",
lastname:"Gates",
id:5566
};
对象寻址方式：
name=person.lastname;
name=persons["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
<script>
var person;
var car="Volvo";
document.write(person+'</br>');
document.write(car+"</br>");
var car=null;
document.write(car +"</br>");
</script>
显示结果：



声明变量类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars=new Array;
var person=new Object;

一、
var message="Hello World!";
var x=message.length;
12
二、
var message="Hello world!";
var x=message.toUpperCase();
HELLO WORLD!
三、JavaScript可以动态的为对象添加属性
<script>
person =new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname+"is"+person.age+"years old.");
</script>

注意：
1.如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
2.JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
3.在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
4.在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。



测试for in语句
<p>点击下面的按钮，循环遍历对象"person"的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id ="demo"></p>
<script>
function myFunction()
{
    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56};
for(x in person)
{
    txt=txt+person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
显示结果：

<script>
cars=['bMW','Volvo',"Saab",'Ford'];
list:
{
document.write(car[0]="</br>");
document.write(car[1]="</br>");
document.write(car[2]="</br>");
break list;
document.write(car[3]="</br>");
document.write(car[4]="</br>");
document.write(car[5]="</br>");
}
</script>
显示结果：



JavaScript表单验证
1.验证必填项目
function validate_required(field,alerttxt)
{
    with(field)
    {
        if(value==null||value=="")
        {
            alert(alerttxt）；
            return false;
        }else{
            return true;
        }
    }
}
2.验证邮箱输入
function validate_email(field,alerttxt)
{
with(field)
{
    apos=value.indexOf("@")
    dotpos=value.lastIndex("."）
if(apos<1||dotpos-apos<2)
{            
    alert(alerttxt;
    return false;
}    else{
      return true;  
}
}
}




html最小标题,HTML基础总结推荐(标题)
weixin_29335033的博客
05-31 417
HTML: 标题标题(Heading)是通过 - 等标签进行定义的。 定义最大的标题。 定义最小的标题。This is a headingThis is a headingThis is a heading提示：浏览器会自动地在标题的前后添加空行。 h1 用作主标题(最重要的)，其后是 h2(次重要的)，再其次是 h3，以此类推。提示：默认情况下，HTML 会自动地在块级元素前后添加一个额外的...
HTML知识点总结
cw83721的博客
03-16 169
HTML知识点总结（超文本标记语言） 1、元素 开始标签、内容、结束标签组成 2、HTML文档 、、、... 注释： 3、元素的属性 元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。 ，这里password和text即为属性，在属性和元素名称之间有一个空格，type后面必须接一个=号，属性必须用 “” 引起来。 4、标题 HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，This is heading 1等等 5、文本格式 <p&
html中最大的标题元素6,HTML初认识——6:HTML中，标题很重要
weixin_40000131的博客
06-11 912
1:HTML 标题标题(Heading)是通过 - 等标签进行定义的。 定义最大的标题。 定义最小的标题。实例This is a headingThis is a headingThis is a heading亲自试一试注释：浏览器会自动地在标题的前后添加空行。注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。2:标题很重要请确保将 HTML he...
java script怎么用_JavaScript 使用
weixin_42701905的博客
02-13 627
JavaScript 使用HTML 中的脚本必须位于 与 标签之间。脚本可被放置在 HTML 页面的 和 部分中。 标签如需在 HTML 页面中插入 JavaScript，请使用 标签。 和 会告诉 JavaScript 在何处开始和结束。 和 之间的代码行包含了 JavaScript：alert("My First JavaScript");您无需理解上面的代码。只需明白，浏览器会...
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
基于HTML、Java和JavaScript的JavaWeb学习笔记与网络安全漏洞环境搭建资料汇总
10-06
这些资料不仅覆盖了JavaWeb的基础知识点，还包括了网络安全漏洞环境的搭建，这对于培养安全意识，增强网络应用的防护能力有着重要意义。 首先，HTML文件作为网络页面的骨架，是JavaWeb技术中不可或缺的一部分。通过...
javascript学习笔记（一）基础知识
10-25
总的来说，JavaScript的基础知识包括但不限于语法、变量、数据类型、运算符、流程控制和函数等，这些都是编写JavaScript程序的基础。通过深入理解和熟练掌握这些知识点，开发者可以构建出功能丰富的交互式网页和应用...
嵌入式系统知识库与学习笔记-ARM架构-单片机开发-FPGA编程-RTOS系统-嵌入式Linux-机器学习-C语言-C-Python-Java-JavaScript-Go语言-.zip
08-03
嵌入式系统知识库与学习笔记涵盖了多个与嵌入式技术相关的领域，包括但不限于ARM架构、单片机开发、FPGA编程、RTOS系统、嵌入式Linux、机器学习、编程语言（C、Python、Java、JavaScript、Go语言）等。这些内容不仅...
JavaScript学习笔记,javascript基础知识,基础语法整理.pdf
02-08
以上就是JavaScript学习笔记的主要内容，涵盖了从基础概念到具体应用的多个方面，是深入理解和掌握JavaScript不可或缺的知识点。通过不断实践和学习，可以逐步提升JavaScript编程能力，为Web开发打下坚实基础。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
张先森的博客
08-19 302
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
E2B是一个开源基础设施，允许您在云中安全隔离的沙盒中运行AI生成的代码和e2b.dev网站
skywalk8163的专栏
08-17 961
E2B是一个开源的云沙盒服务，允许在隔离环境中运行AI生成的代码。开发者需通过e2b.dev网站注册获取API key，并安装JavaScript或Python SDK来使用该服务。主要竞品包括CodeSandbox（侧重前端开发协作）和Replit（支持多语言在线编程）。E2B的核心优势在于为AI代码提供安全的执行环境，但需依赖其云端服务而非自建。使用示例展示了通过SDK在沙盒中运行简单Python代码的过程。
Layui COP证书管理系统
bemyrunningdog
08-18 353
本文介绍了一个基于Layui和SpringBoot的COP证书管理系统的完整实现方案。系统采用前后端分离架构，前端使用Layui2.8.3框架实现响应式界面，后端基于SpringBoot3.1.0和Java17开发，MySQL8.0作为数据库存储。系统实现了证书全生命周期管理（草稿、已提交、审核中、已签发、已拒绝五种状态），包含证书增删改查、批量操作、操作日志记录等核心功能。技术实现上，后端采用RESTful API设计，通过MyBatis操作数据库，前端使用Layui表格和表单组件实现数据展示和交互。系统
学习链接。
weixin_49035434的博客
08-18 340
hello 算法 0.2 如何使用本书 - Hello 算法代码随想录: 代码随想录被删的前端游乐场 被删的前端游乐场Github漫游指南 : Github ebookJaveScript源码: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js世峰的刷题网站: labuladong 的算法笔记 | labuladong 的算法笔记编程导航: 编程导航 - 程序员一站式编程学习交流社
Redux搭档Next.js的简明使用教程
jobleap.cn求职助手首页
08-17 892
Redux是JavaScript应用的状态管理库，适用于复杂状态逻辑和跨组件共享的场景。Redux Toolkit（RTK）简化了传统Redux的配置，适合中大型应用、异步操作和团队协作。在Next.js中，Redux可通过Provider注入，与React组件无缝集成。典型使用场景包括电商购物车、用户状态管理、复杂表单等需要状态追踪和复用的功能。小型应用或简单状态共享则建议使用useState或useContext。本文提供了Next.js集成Redux Toolkit的完整教程，包括store配置、sl
【tips】unsafe-eval线上页面突然空白
Dorcas_FE的博客
08-18 219
页面因违反CSP策略的unsafe-eval限制而无法展示，原因是后端安全升级后原CSP策略仅允许script-src 'self' 'unsafe-inline'，
JavaScript 性能优化实战大纲
luomoyoushang的博客
08-19 252
【代码】JavaScript 性能优化实战大纲。
Vue3 + Element Plus 人员列表搜索功能实现
往事知多少？
08-17 157
【代码】Vue3 + Element Plus 人员列表搜索功能实现。
CreateRef和useRef
最新发布
北海几经夏的博客
08-20 273
在 React 中，createRef 和 useRef 都是用于创建引用（ref）来访问 DOM 元素或组件实例的工具，但它们在 使用场景、生命周期行为 和 功能范围 上有显著区别。
jeecgboot如何实现路由跳转？
2503_91351624的博客
08-19 132
这里的path是路径，component是组件。用的是jeecgboot自带的路由管理，这样就可以实现路由跳转了。首先是vue页面，在你想路由的地方设置一个方法，我这里是想点击路由，所以我设置了click。然后在script中引入useRouter()。并使用push方法去指向想路由的组件。到这里vue页面就完成了。然后是js页面，创建路由并导出router。路由跳转就两个页面，一个vue页面，一个js页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值