Javascript 笔记基础（一）

于 2021-08-14 11:27:42 发布
阅读量497 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51617086/article/details/118521092
版权

js 是什么

JavaScript，就是我们通常所说的JS。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行，js是一门高级解释性脚本语言。

组成

  • ECMAScript
  • DOM
    • 文档对象模型
  • BOM
    • 浏览器对象模型

在HTML中引入JavaScript

  1. 外部JavaScript

    ​ HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码

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

  2. 内部JavaScript

    ​ 把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在<script></script>标签对内。

  3. 元素事件JavaScript

    ​ 指的是在元素的“事件属性”中直接编写JavaScript或调用函数。

调试

在浏览器控制台打印

console.log()

Sources 点击行号打断点

基础语法

常量与变量

变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$。变量不能是系统关键字和保留字。

 var a = 10;

常量用大写

数据类型

数据类型可以分为两种：一种是“基本数据类型”，另外一种是“引用数据类型”。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。

在JavaScript中，基本数据类型有5种：数字、字符串、布尔值、未定义值和空值。

  • 未定义值用undefined表示。
  • 凡是已经用var声明但没有赋值的变量，值都是undefined

运算符

常见的运算符有以下5种：算术运算符。赋值运算符。比较运算符。逻辑运算符。条件运算符。

表达式与语句

一个表达式包含“操作数”和“操作符”两部分。

类型转换

在JavaScript中，共有两种类型转换。隐式类型转换。显式类型转换。

“字符串”转换为“数字”

  • Number（　）
    • Number（　）方法可以将任何“数字型字符串”转换为数字
  • parseInt（　）和 parseFloat（　）
    • parseInt（　）和parseFloat（　）可以提取“首字母为数字的任意字符串”中的数字，其中parseInt（　）会提取整数部分，parseFloat（　）不仅会提取整数部分，还会提取小数部分。可以接受第1个字符是加号或减号，如果第1个字符是非数字，则直接返回NaN。

“数字”转换为“字符串”

将数字转换为字符串，也有两种方式。与空字符串相加。toString（　）。

  • 如果数字和字符串相加，系统会将数字转换成字符串。如果要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。

  • var b = a.toString()

转义字符

对于字符串的换行，有以下两种情况。

  • 如果是在document.write（　）中换行，则应该用
  • 如果是在alert（　）中换行，则应该用\n

注释

  • // 单行注释
  • /* 多行注释 */

流程控制

在JavaScript中，共有3种流程控制方式（其实任何计算机语言也只有这3种）。顺序结构。选择结构。循环结构

  1. 对于if语句，主要包含以下4个要点。
  • 单向选择：if…
  • 双向选择：if…else…
  • 多向选择：if…else if…else…
  • if语句的嵌套。
  1. switch语句
  2. 循环语句共有以下3种。
  • while语句
  • do…while语句
  • for语句

函数

funtion 函数名(){
	...
	return 返回值
}

在超链接中调用函数

<a href="javascript: 函数名"><a>

在事件中调用

对象

在JavaScript中，常用的内置对象有4种

  • 字符串对象：String
  • 数组对象：Array
  • 日期对象：Date
  • 数值对象：Math。

DOM

每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解DOM操作非常重要）

DOM节点共有12种类型，但是常见的只有下面3种（其他的不需要掌握）

  • 元素节点
  • 属性节点
  • 文本节点

在JavaScript中，我们可以通过以下6种方式来获取指定元素

  • getElementById（　）
  • getElementsByTagName（　）
  • getElementsByClassName（　）
  • querySelector（　）和 querySelectorAll（　）
  • getElementsByName（　）
  • document.title和document.body。

使用createElement（　）来创建一个元素节点，也可以使用createTextNode（　）来创建一个文本节点

创建元素

想要创建一个元素，需要以下4步。

① 创建元素节点：createElement（　）

② 创建文本节点：createTextNode（　）

③ 把文本节点插入元素节点：appendChild（　）

④ 把组装好的元素插入到已有元素中：appendChild（　）

插入元素

  • appendChild（　） 把一个新元素插入到父元素的内部子元素的“末尾”。
  • insertBefore（　） 将一个新元素插入到父元素中的某一个子元素“之前”。

appendChild（　）是在父元素的最后一个子元素之后插入，而insertBefore（　）是在父元素的任意一个子元素之前插入

删除元素

使用removeChild（　）方法来删除父元素下的某个子元素。

复制元素

使用cloneNode（　）方法来实现复制元素。

替换元素

使用replaceChild（　）方法来实现替换元素。

HTML属性操作（对象属性）

不管是用“对象属性”的方式，还是用“对象方法”的方式，都涉及以下2种操作

  • 获取HTML属性值
  • 设置HTML属性值

获取HTML属性值

obj.attr
  • obj是元素名，它是一个DOM对象。所谓的DOM对象，指的是使用getElementById（　）、getElementsByTagName（　）等方法获取的元素节点
  • attr是属性名，对于一个对象来说，可以通过点运算符（.）来获取它的属性值。

这是HTML属性值

obj.attr="值"

obj是元素名，它一个DOM对象，attr是属性名。

HTML属性操作（对象方法）

关于操作HTML元素的属性，JavaScript为我们提供了4种方法

  • getAttribute（　） 获取元素某个属性的值。
  • setAttribute（　） 设置元素某个属性的值。
  • removeAttribute（　） 删除元素的某个属性。
  • hasAttribute（　）判断元素是否含有某个属性。会返回一个布尔值。如果包含该属性，会返回true；如果不包含该属性，会返回false。

CSS属性操作

  • getComputedStyle（　）方法来获取一个CSS属性的取值
  • 设置一个CSS属性的值，有两种方式可以实现。style对象。cssText属性。

DOM遍历

DOM遍历，可以分为以下3种情况

  • 查找父元素 parentNode
  • 查找子元素 childNodes、firstChild、lastChild。children、firstElementChild、lastElementChild。
  • 查找兄弟元素 previousSibling、nextSibling。previousElementSibling、nextElementSibling。

innerHTML和innerText

  • 使用innerHTML属性很方便地获取和设置一个元素的“内部元素”

  • 使用innerText属性获取和设置一个元素的“内部文本”。

事件

在JavaScript中，一个事件包含3部分

  • 事件主角：是按钮？还是div元素？还是其他？
  • 事件类型：是点击？还是移动？还是其他？
  • 事件过程：这个事件都发生了些什么？

JavaScript常见的事件共有以下5种

  • 鼠标事件
  • 键盘事件
  • 表单事件
  • 编辑事件
  • 页面事件

事件调用方式

在JavaScript中，调用事件的方式有两种

  • 在script标签中调用
obj.事件名=function(){
    ...
};

  • 在元素中调用

    ​ 直接在HTML属性中调用事件，这个属性又叫作“事件属性”。

鼠标事件

在这里插入图片描述

键盘事件

在JavaScript中，常用的键盘事件共有两种

  • 键盘按下：onkeydown
  • 键盘松开：onkeyup

onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”，才有“松开”，也就是说，onkeydown发生在onkeyup之前。

表单事件

在JavaScript中，常用的表单事件有3种

  • onfocus 和 onblur
    • onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反的操作
  • onselect
    • 当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件
  • onchange
    • onchange事件常用于“具有多个选项的表单元素”的操作。
    • 单选框选择某一项时触发。
    • 复选框选择某一项时触发。
    • 下拉列表选择某一项时触发。

除了上面这几个，还有一个onsubmit事件。onsubmit事件一般都会结合后端技术一起使用

编辑事件

常用的编辑事件有3种

  • oncopy 防止页面内容被复制
  • onselectstart 防止页面内容被选取
  • oncontextmenu 禁止使用鼠标右键

页面事件

常用的页面事件只有下面2个

  • onload 表示文档加载完成后再执行的一个事件
  • onbeforeunload 表示离开页面之前触发的一个事件

事件监听器

是使用addEventListener（　）方法为一个元素添加事件，我们又称之为“绑定事件”。

event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象

在这里插入图片描述

this

哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

window对象

在JavaScript中，一个浏览器窗口就是一个window对象（这句话很重要）

window对象及下面这些location、navigator等子对象，由于都是用于操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）

打开窗口

window.open(url, target)
  1. window.open（　）可以直接简写为open（　），但是我们一般都习惯加上window前缀。window.open（　）的参数有很多，但是只有url和target这两个用得上。
  2. url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write（　）往空白窗口输出文本，甚至输出一个HTML页面。
  3. target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为“_blank（默认值）”时，表示在新窗口中打开；当target为“_self”时，表示在当前窗口中打开。

关闭窗口

window.close()

window.close（　）方法是没有参数的。

对话框

在JavaScript中，对话框有3种，都是window对象的方法

  1. alert（　）
    • 一般只用于提示文字
    • 在alert（　）中实现文本换行，用的是\n。
  2. confirm（　）
    • 不仅提示文字，还提供确认。
  3. prompt（　）
    • 不仅会提示文字，还会返回一个字符串

定时器

上面说到的这些动画特效中，其实就用到了“定时器”。所谓的“定时器”，指的是每隔一段时间就执行一次代码。

在JavaScript中，对于定时器的实现，有以下两组方法。

  1. setTimeout（　）和clearTimeout（　）
  2. setInterval和clearInterval（　）
  • 使用setTimeout（　）方法来“一次性”地调用函数，并且可以使用clearTimeout（　）来取消执行setTimeout（　）。
setTimeout(code, time);

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

  • 使用setInterval（　）方法来“重复性”地调用函数，并且可以使用clearInterval（　）来取消执行setInterval（　）。
setInterval(code, timme);

location对象

操作当前窗口的URL

在这里插入图片描述

window.location.href

navigator对象

使用window对象下的子对象navigator来获取浏览器的类型。

window.navigator.userAgent

document对象

document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容

document 对象属性

在这里插入图片描述

document 对象方法

在这里插入图片描述

《从0到1：JavaScript快速上手》

飞飞帅傅
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe嵌套页面禁用a标签_blank_target =“_ blank”背后的隐藏漏洞
weixin_36049047的博客
11-29 1782
通常，在网页中使用链接时，如果希望浏览器在新选项卡中打开指定的 URL，就会在 a 标记上添加属性 target = “_blank”。但也恰恰是这个属性为网络钓鱼攻击者提供了可趁之机。基础知识parent 和 opener在谈论 opener 之前，让我们首先看一下我们知道，用于父子页面交互的对象通常是在opener 与 parent 一样，但它只用于通过在新标签页中打开页面。你可以直接使用 w...
页面跳转方式
nicolas_huan的博客
03-28 1415
web前端开发中，经常使用到页面跳转，下面是使用过的几种常用的跳转方式。 1.html跳转，通过标签， 链接 ，其中target共有4种模式： 1)_self，默认方式，在当前窗口跳转 2)_blank，跳转到新窗口 3)_parent，在当前父窗口跳转 4)_top，在当前顶级窗口跳转 2.js跳转，js跳转能控制的属性要比html直接跳转要更多。 window.location
js基础
blank_zio的博客
06-09 241
JS js全称呼：JavaScript 是一种解释行语言 DOM:文档对象模型。 0级DOM也被称为BOM window document loaction(当前页面的url) history(以前访问的页面地址) navigator（浏览器类型，版本兼容）----- 任何没有指明对象的方法调用默认指向window(window.alert()==alert) web添加js <script>//放在body
JS入门常用互动方法------02
俗人世界
12-27 111
如何向网页中输入内容，如何与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。...这些类型构成了JS编程的基础，理解和掌握它们是学习JavaScript的第一步。
JavaScript基础语法笔记
04-12
JavaScript基础语法笔记(for、对象、js基础语法截图等...)
Javascript基础笔记
最新发布
08-22
JavaScript 基础笔记 JavaScript 是一种高级的、动态的、基于对象的脚本语言，主要用于客户端的脚本编程。下面是 JavaScript 基础笔记的知识点总结： JS 的位置 * 行内式 JS：直接在 HTML 文件中编写 JavaScript ...
JavaScript李立超基础篇笔记.docx
02-02
总的来说，李立超的JavaScript基础篇教程涵盖了语言的基础知识，包括其历史、特点、基本语法、数据类型、变量和标识符的使用，以及代码编写的位置和方式，是学习JavaScript入门的宝贵资料。通过深入理解和实践这些...
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
JavaScript常用交互方式
happymorecc的博客
07-25 3559
1.document.write 在这里就不再说了 2.警告（alert） 警告框，就是在页面中弹出一个小的对话框，当你在点击确定或者取消之前，不可以对页面做其他任何操作。 alert输出的内容可以字符串或者变量。 语法： alert(); 举个例子： var FBI= "未满18岁请关闭窗口"; alert(FBI); 3.确认（confirm） 确认对话框
js打开新窗口的方法总结
张木期的博客
12-16 5312
Window.open()方法 完整代码 window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no') 一、关闭当前页面，打开新的页面 （1）方法一：...
js实现让网站的外链加target=_blank
weixin_38330185的博客
12-24 2002
function add() { var all_a = document.getElementsByTagName("a"); host_url=window.location.host; for (var i = 0; i &lt; all_a.length; i++) { var domain = all_a[i].href.split("/");...
前端学习笔记——JavaScript（一）基本语法
qq_44228263的博客
02-27 640
@[TOC]前端学习笔记——JavaScript（一）基本语法 如何插入JS 内部插入 使用<script>标签在HTML网页中插入JavaScript代码。注意，<script>标签要成对出现，并把JavaScript代码写在<script></script>之间。即 <script type="text/javascript"> <!--JavaScript代码写在此处--> </script> <script
js 控制表单提交，target=_blank,窗口被拦截
jazywoo_在路上
07-24 6906
表单新开窗口提交正常，但是用js提交时，会弹出拦截信息 浏览器会拦截窗口，是把窗口当成js弹出广告，造成的原因是如果是用户主动触发，一般不会拦截，用js触发的，一般都会拦截。 $.post("/trade/addOrder",query,function(responseData){ var json_data = eval("("+respons
window.open打开新窗口 参数
热门推荐
riconyi的专栏
04-28 11万+
2009-08-29 上午 11:191，基本描述1.1 方法签名：oNewWindow = window.open( sURL , sName , sFeatures, bReplace)通过方法签名可以看出，window.open在打开一个窗口(其url为sURL)后，将返回一个代表该窗口对象的一个变量oNewWindow，如果打开不成功，则oNewWindow的值
纯JS实现模态框
Blank
06-08 2556
实现原理 1、使用 js 动态 添加和删除类名 .display-hide { display: none } 控制模态框的弹出和隐藏；2、使用fixed布局定义最外层的遮掩层；3、使用document.body.clientWidth定义了模态框的宽度，使模态框完整显示在窗口。总结： 1、css布局： 为了使遮掩层能充满窗口，最初在html 标签的样式是 { width：100%；heigh
html代码中<base target="_blank">
tanyit的专栏
02-21 1万+
http://hi.baidu.com/guxue365/blog/item/b245eaed3bf7674779f0553e.html 网站在当初设计时，对于链接这一块，自己没有给于足够的重视，忘记设置链接元素打开的方式是_self还是_blank。现在才发现问题多多，很多链接都直接在_self中打开，结果有些直接跳到了别的网站上。相对来说，对自己网站的流量就是个损失。
javascript笔记
07-25
JavaScript是一种脚本语言，用于在网页中添加交互性和动态效果。以下是一些JavaScript的基础知识和语法： 1. 变量：用于存储数据的容器。使用var、let或const关键字来声明变量。 2. 数据类型：JavaScript具有许多...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值