JavaScript的学习

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

JavaScript的学习

JavaScript简介

  1. JavaScript 是 web 开发者必学的三种语言之一：
  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程
  1. JavaScript能够改变 HTML 内容
  • 通过getElementById()
    eg:document.getElementById("demo").innerHTML = "Hello JavaScript";或者document.getElementById("demo").innerHTML = 'Hello JavaScript';(单引号双引号皆可)
  1. JavaScript能够改变 HTML 属性
    通过改变 标签的 src 属性（source）可以改变一张 HTML 图像
  2. JavaScript 能够改变 HTML 样式 (CSS)
    eg：document.getElementById("demo").style.fontSize = "25px";
  3. JavaScript 能够隐藏 HTML 元素
    eg:document.getElementById("demo").style.display="none";

JavaScript示例

  1. 代码段：
<!DOCTYPE html>
<html>
<body>
<h2>我的第一段 JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击这里来显示日期和时间
</button>

<p id="demo"></p>

</body>
</html>
  1. 效果图：

在这里插入图片描述
点击方框时会显示系统的时间；

课堂学习内容1

Javascript
一种面向对象的脚本语言用于对客户端应用程序和其他应用程序中的对象进行编程访问
特点寄生（可以改变对象本身的形式和内容，特别适合二次编程）
功能可以使静态网页转变为动态网页
软件基础JavaScript引擎->浏览器
编程技术用户点击->click事件发生->事件处理器执行->网页更新
对比图源通过html来写，用js写交互行为（对事件处理的事件处理器）

核心：在事件处理器用js来操作HTML DOM1

课堂学习内容2

链接到一个js文件

<script src = "filename" type="text/javascript"></script>
例：<script src = "example.js" type="text/javascript"></script>
  1. 标签要放在html页的头部；
  2. 脚本代码单独存放在一个后缀为 .js 的文件；

注释

  1. 和c++/c的注释方法一样；

声明

弹出对话框

alert("message");//弹出信息
alert("IE6 detedted.");
confirm();//返回真或者假
prompt();//返回用户输入的字符串

变量和类型

var name = expression;
例：
var clientName = "James";
var age = 32;
var weight = 127.4;
  • 弱数据类型：无需声明它的数据类型，通过所赋的值来确定它的数据类型，也可以通过改变数值改变数据类型；（大小写敏感）
  • 数据类型：number（包含所有数字类型）, boolean, string, array, object, function, null, undefined
  • 通过typeof来找到变量的数据类型

在这里插入图片描述

number类型
  1. 可以进行的操作：
  • -* /% ++ --= += -= * /= %=+*=
string类型（important）
var s = "James Alan";
var fName = s.substring(0, s.index(" "));//取空格之前的字符
var length = s.length;
var S2 = 'Connie Client';
  1. 包含的操作：
  • charAt, charCodeAt, fromCharCode, indexOf,lastIndexOf, replace, split, substring,toLowerCase,toUpperCase;
  • 使用**’+’**连接两个字符串;
  • parseInt;
    string
Immutable vs. mutable
  1. js字符串不可改变：变量赋值为字符串后，除非重新赋值，其值不变。
var str = "Hello";
str[0] = "W";
alert(str);//"Hello"
boolean类型
  1. false： 0, 0.0, NaN, “”, null, and undefined；
  2. true：anything else；
  3. 将一个数值转换为boolean类型
var boolValue = Boolean(otherValue);
var boolValue = !!(otherValue);
特殊的值
  1. NaN: not a number (only returned by the isNaN() function) ;
  2. undefined : has not been declared, does not exist;
  3. null : exists, but was specifically assigned an null value ;
逻辑操作符

分别为:>< >= <= &&|| !== != === !==
=== 和 !== 是两者严格相等为真
NaN == NaN 和 NaN === NaN 的结果都为假

变量的作用域
  1. 全局变量
var a = 2;//全局变量

function scope(){
	alert(a);
	a = 2 * 2;
	b = 3;//隐式变量声明
	var c = 5;//局部变量
	//这里a为4，b为3，c为5
}
scope();//这里a为4，b为3，c为undefined
  1. 局部变量
  • 慎用全局变量（破坏了模块的封装）
数组
var name = [];//空数组
var name = [value,value,……,value];
name[index] = value;
  1. 自动增加大小；
  2. 可以存放不同类型的元素；
  3. 数组的操作：
    array
  • 注：string类型经过split分割为一个数组；
  • eval函数能够动态执行源代码，必须慎用；
eval("3 + 2 - 5 * 0");//5
var str = "Hello";
eval("str = str + ' World!'");
eval(alert(str));//弹出'Hello World!'

DOM（文档对象模型）

DOM element

  1. 页面上每一个元素都有一个相应的DOM对象；
  2. 访问和修改DOM对象的属性：objectName.attributeName；例：id = "example",其中id为property，example为attribute；
  3. innerHTML和textContent的比较：innerHTML会对输入进入解析；
  4. 通过DOM元素的value property改变或者获取显示内容，针对文本框，各种按钮，不能使用 innerHTML和textContent 的属性；
  5. 调整风格：dom_style
    注：DOM style property是一个带单位的字符串；

DOM tree

  1. 改变结构，在上面找到要改变的操作；
  2. DOM Node：
  • document node为根节点；
  • element node
  • text node：空白会成为一个text node
  • attribute node
  • comment node

dom node
3. 树是一个连通图，理论上可以从其中一个位置，到达其他任意一个位置；
4. 改变结构：新建节点

  • createElement
  • createTextNode
    改变结构

DOM & BOM Object

  1. BOM：Browser objects；
    bom對象

事驱动的程序设计

  1. 添加\移除事件处理器
  • addEventListener
  • removeEventListener

  1. (HTML/XHTML的文档对象模型) ↩︎

.ZZZ.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习
07-08
JavaScript学习
javascript 学习
05-16
js知识积累
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 8万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
26 JavaScript学习：JSON和void
热门推荐
百锦再的博客
05-03 8万+
在 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）。减等赋值（-=）：将右侧的值从左侧的变量中减去，并将结果赋给左侧的变量。加等赋值（+=）：将右侧的值加到左侧的变量上，并将结果赋给左侧的变量。乘等赋值（*=）：将左侧的变量乘以右侧的值，并将结果赋给左侧的变量。除等赋值（/=）：将左侧的变量除以右侧的值，并将结果赋给左侧的变量。
11 JavaScript学习：事件
百锦再的博客
04-23 7万+
事件是指用户在页面上执行的动作（如点击按钮、鼠标移动、键盘输入等）或者浏览器本身触发的动作（如页面加载完成、窗口尺寸改变等）。JavaScript 可以通过事件监听器来捕获这些事件，并对其做出相应的处理，从而实现页面的动态交互效果。这些是一些常见的 HTML 事件，还有许多其他事件可以用于不同的交互行为。通过事件属性和相应的 JavaScript 函数，可以实现丰富的用户交互功能。通过监听用户的操作并进行合适的响应，可以提升用户体验并实现更多交互功能。
05 JavaScript学习：语法
百锦再的博客
04-19 6万+
在 JavaScript 中，变量定义是指声明一个变量并为其分配一个值。varlet和const。varvar是 JavaScript 最早引入的声明变量的关键字。使用var声明的变量具有函数作用域，而不是块级作用域。var x = 10;// 使用 var 定义变量 xletlet是 ES6（ECMAScript 2015）引入的声明变量的关键字。使用let声明的变量具有块级作用域，只在声明的块内部有效。let y = 20;// 使用 let 定义变量 yconstconst。
07 JavaScript学习：变量
百锦再的博客
04-20 7万+
表示一个未赋值的变量或者属性。
JavaScript学习指南
03-20
JavaScript学习指南 JavaScript，一种广泛应用于网页和网络应用的脚本语言，是互联网上最流行的编程语言之一。它主要用于客户端的交互式网页开发，也可以在服务器端通过Node.js平台进行后端开发。JavaScript与Java...
JavaScript学习指南 高清 PDF
10-20
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
Javascript学习指南
10-25
本文结合自己学习javascript的经验，向大家推荐了循序渐进的学习javascript的自学的轨迹，非常的合理，给有需要的小伙伴们参考下吧。
JavaScript学习笔记
最新发布
07-11
js学习笔记
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
javascript学习手册合集
05-31
javascript学习 JavaScript 是一种属于网络的解释型的脚本语言，已经被广泛用于 Web 应用开发。最早是在HTML 网页上使用，用来给 HTML 网页增加各式各样的动态功能。在过去，JavaScript 只是被用来做一些简单的网页...
javascript学习笔记
08-17
javascript学习笔记
JavaScript学习资源大全
"JavaScript学习指南" JavaScript，又称为JS，是一种广泛应用于网页和互联网应用的轻量级编程语言，它主要用于客户端的网页脚本编写，使网页具有动态交互性。JavaScript可以操控HTML元素、处理用户输入、操作DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值