JavaScript基础

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

JavaScript基础

一. 引用

1. 内部引用

使用<script>标签在HTML网页中插入JavaScript代码。<script type="text/javascript">表示在之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

<head>
	......
	 <script type="text/javascript">
	    document.write("JS开始");
	 </script>
 	......
 </head>
2. 外部引用

把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

<script src="test.js"></script>

注意: 在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了。

3. 引用位置

将JavaScript代码放在html文件中任何位置，但是一般放在网页的head或者body部分。

  1. 放在<head>部分
    最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
  2. 放在<body>部分
    JavaScript代码在网页读取到该语句的时候就会执行。

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

二. 语法

1. 注释

注释的作用是提高代码的可读性，帮助自己和别人阅读和理解你所编写的JavaScript代码，注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

  1. 单行注释：在注释内容前加符号 “//”。
  2. 多行注释：以"/“开始，以”/"结束。
2. 变量

变量是用于存储某种/某些数值的存储器。
定义变量使用关键字var,语法如下：

var 变量名;

变量名可以任意取名，但要遵循命名规则:

  1. 变量必须使用字母、下划线(_)或者美元符($)开始。
  2. 然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
  3. 不能使用JavaScript关键词与JavaScript保留字。

备注：
a. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
b. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
c. 变量可以重复赋值，下一个变量会覆盖上一个变量。

3. 条件语句

if…else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

if(条件)
	{ 条件成立时执行的代码 }
else
	{ 条件不成立时执行的代码 }
4. 函数

函数是完成某个特定功能的一组语句。

function 函数名()
{
     函数代码;
}

说明:

  1. function定义函数的关键字。
  2. "函数名"为函数取的名字。
  3. "函数代码"替换为完成特定功能的代码。

三、互动

1. 输出内容

document.write() 可用于直接向 HTML 输出流写内容。

  1. 输出内容用"“括起，直接输出”"号内的内容。
document.write("HelloWorld！");
  1. 通过变量，输出内容。
var name = "Hello World!";
document.write(name);
  1. 输出多项内容，内容之间用+号连接。
var name = "test";
document.write(name + "Hellow World!");
  1. 输出HTML标签，并起作用，标签使用""括起来。
document.write("Hellow World!" + "<br />");
2. 对话框–警告

alert 消息对话框：弹出一个包含确定键的按钮。

alert("Hello World!");

注意:

  1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
  2. 消息对话框通常可以用于调试程序。
  3. alert输出内容，可以是字符串或变量，与document.write 相似。
3. 对话框–确认

confirm 消息对话框：允许用户做选择的动作。

var flag = confirm("点击选择");

返回值flag为Boolean值，可以通过flag的值进行后续操作。

注意:
在点击对话框"确定"或“取消”按钮前，不能进行任何其它操作。

4. 对话框–提问

prompt 消息对话框：用于询问一些需要与用户交互的信息。，包含一个确定按钮、取消按钮与一个文本输入框。

prompt(str1, str2);

其中：str1: 要显示在消息对话框中的文本，不可修改；str2：文本框中的内容，可以修改。
返回结果：

  1. 点击确定按钮，文本框中的内容将作为函数返回值
  2. 点击取消按钮，将返回null

注意:
在点击对话框"确定"或“取消”按钮前，不能进行任何其它操作。

5. 打开新窗口

window.open：open() 方法可以查找一个已经存在或者新建的浏览器窗口。

window.open([URL], [窗口名称], [参数字符串])

参数说明:

  1. URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数表示打开一个空白窗口。
  2. 窗口名称：可选参数，被打开窗口的名称。
    1. 该名称由字母、数字和下划线字符组成。
    2. “_top”、"_blank"、"_self"具有特殊意义的名称。
      a. _blank：在新窗口显示目标网页
      b. _self：在当前窗口显示目标网页
      c. _top：框架网页中在上部窗口中显示目标网页
    3. 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
    4. name 不能包含有空格。
  3. 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
6. 关闭窗口

window.close：close()关闭窗口。

window.close();   	//关闭本窗口
<窗口对象>.close();   //关闭指定的窗口

四、DOM

1. DOM基础

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
将HTML代码分解为DOM节点层次图:

HTML DOM
HTML文档可以说由节点构成的集合，三种常见的DOM节点:

  1. 元素节点：标签。
  2. 文本节点: 向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
  3. 属性节点: 元素属性，如<a>标签的链接属性href=“www.baidu.com”。
2. 通过ID获取元素
 document.getElementById(“id”)

注意： 获取的元素是一个对象，如想对元素进行操作，要通过它的属性或方法。

3. innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

Object.innerHTML
4. 改变 HTML 样式
Object.style.property=new style;  /*Object是获取的元素对象*/
//注意修改要在body之后，要等待body加载完成后进行样式修改，否则无法生效。
<body>
    <p id="pcon">标题测试</p>
</body>
<script>
    var str = document.getElementById("pcon");
    document.write("结果：" + str);
    str.style.color = "red";
</script>
5. 显示和隐藏（display属性）
Object.style.display = value; /*Object是获取的元素对象*/

其中：当value设置为none的时候不进行显示，设置为block的时候会进行显示。

6. 控制类名（className 属性）

className 属性设置或返回元素的class 属性。

object.className = classname;

作用:

  1. 获取元素的class 属性。
  2. 为网页内的某个元素指定一个css样式来更改该元素的外观。
lxwthinker
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
JavaScript进阶--DOM
lxw的博客
10-18 230
DOM一、相关知识二、开始行动1. 返回带有指定名称的节点对象的集合。 一、相关知识 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 二、开始行动 1. 返回带有指定名称的节点对象的集合。 <input name="test" type="text" value="1...
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 5828
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3108
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
JavaScript基础入门
dangfulin的博客
08-21 5542
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
javascript基础
m0_65291134的博客
04-28 1384
JavaScript 简介 JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 JavaScript入门 1、标签 <script></script> 2、引入方式 内部引入 在标签内写JavaScript代码 且不用显示定义type，默认JavaScript 外部引入 语法：<script src="path"></script> 数据类型 基本数据类型 1.1 数值类型 不分整数
Javascript 基础知识学习
岳来的博客
11-23 7226
javascript 基础学习
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
最新发布
h2345678的博客
08-27 724
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
JavaScript代码片段
weixin_66128399的博客
08-26 364
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
jQuery基础——DOM
m0_54066656的博客
08-27 1290
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4601
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 1572
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue2 part3
E___V___E的博客
08-25 881
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值