最新前端三剑客:一文入门JavaScript,2024年最新【一篇文章搞懂

img
img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

JS的组成

引入方式

输入输出

JS基础语法

【1】变量

(1)创建变量

(2)动态类型

【2】基本数据类型

(1)number数字类型

(2)string

(3)boolean

(4)undefined和null

【3】运算符

【4】数组

(1)创建数组

(2)获取数组元素

(3)新增数组元素

(4)删除数组元素

(5)遍历数组

【5】函数

(1)函数定义

(2)变量作用域

【6】对象

(1)创建对象

(2)属性获取

JS(Web API)

【1】什么是Web API

【2】获取元素

【3】操作元素

(1)获取/修改元素内容

(2)获取/修改表单元素的属性

(3)获取/修改样式属性


初始JavaScript(JS)

JavaScript是什么?

JavaScript是世界上最流行的编程语言之一。主要在浏览器上运行。js可以用来:

  • 网页开发(更复杂的特效和网页交互)
  • 网页游戏开发
  • 服务器开发
  • 桌面程序开发
  • 手机app开发

JS运行过程

  • 编写的代码存储在硬盘上(外存)
  • 双击html文件,浏览器会读取文件,将文件内容加载到内存中
  • 浏览器会解析用户编写的代码,将代码翻译成二进制的、可以让计算机识别的指令(解释器的工作)
  • 得到的二进制指令会被CPU加载并执行

JS的组成

  • ECMAScript(ES):JavaScript语法
  • DOM:页面文档对象模型,对页面中的元素进行操作
  • BOM:浏览器对象模型,对浏览器窗口进行操作

引入方式

  • 行内式:直接嵌入到html元素的内部
  • 内嵌式:写到Script标签中
  • 写到单独的JS文件中
    这种情况下,script标签中间不能写代码,必须空着
<script src="hello.js"></script>

输入输出

  • prompt:弹出一个输入框
  • alert:弹出一个警示对话框,输出结果
  • console.log:在控制台上打印日志

JS基础语法

与Java语法进行比对,主要罗列出其中与Java语法不同的地方。

【1】变量

(1)创建变量

创建变量时没有类型的区分,统一使用关键字"var"。JavaScript还支持使用let定义变量。

“+”字符串拼接,“\n”换行

var name = 'zhangsan';
var age = 20;
(2)动态类型
  • JS的变量类型是在程序运行过程中才确定的;
  • 随着程序的运行,变量的类型可能发生改变。

C、C++、Java等静态类型语言,变量在创建的时候类型就已经确定,不能在运行时发生改变,如果尝试改变,会编译错误。

【2】基本数据类型

JS中内置的几种数据类型:

  • number:数字。不区分整数和小数
  • boolean
  • string
  • undifined:表示未定义的值
  • null:表示空值
(1)number数字类型

JS中不区分整数和浮点数。

var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头

特殊的值:

  • Infinity:无穷大;
  • -Infinity:负无穷大;
  • NaN:表示当前结果不是一个数字。

【注】

  • 字符串+数字,不是NaN;而是一个拼接的字符串,会将数字隐式转换为字符串。
  • 使用isNaN函数判断是不是一个非数字。
(2)string

字符串需要使用引号引起来,单引号/双引号都可。当字符串中本身含有引号时,推荐单双引号搭配使用,也可以使用转义字符。

var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号

使用string的length属性来求长度。

字符串拼接(使用+号):

  • 可以字符串与字符串拼接,也可以字符串与数字拼接;
  • 但是两个数字进行加运算是数字间的运算。
(3)boolean

参与运算时当作1和0来看待。

(4)undefined和null
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10
  • 如果一个变量没有进行初始化,结果就是undefined,是undefined类型。undefined和字符串进行相加,进行字符串的拼接;和数字相加,结果为NaN。(表示变量未初始化)
  • null表示当前的变量是一个“空值”(表示变量值为空)

【3】运算符

运算符、条件语句、循环语句和Java的语法基本相等,这里略过,主要描述它们的不同之处。

比较运算符:

  • ==(比较想等)会进行隐式的类型转换
  • ===不会进行隐式的类型转换
  • !=进行隐式的类型转换
  • !==不进行隐式的类型转换

【4】数组

(1)创建数组

JS数组不要求元素是同一个类型。

// 使用new关键字创建
var arr = new Array();
//使用字面量方式创建
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"
(2)获取数组元素

通过下标进行访问:

  • 如果下标超过数组范围,结果为undefined;
  • 不要给数组名直接赋值,此时数组就变成一个普通元素。
(3)新增数组元素
  1. 通过修改length新增:此时末尾新增的元素都为undefined;
  2. 通过下标新增:下标超过数组范围时,会在指定位置插入新元素,此时超出部分的其他元素为undefined;
  3. 使用push函数追加元素;
(4)删除数组元素

使用splic函数删除元素。

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]
(5)遍历数组
for(var i of arr){
    console.log(i);
}

【5】函数

(1)函数定义
  • 可以通过function来定义函数
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
  • 函数需要在调用后才会执行
  • 函数的定义和调用的先后顺序没有要求(但是变量必须先定义后使用)
  • 函数的实参和形参个数可以不相等(如果实参比形参多,多出来的参数不参与运算;如果实参比形参少,此时少的形参值为undefined。)
  • 也可以通过函数表达式来定义函数
var add = function() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

形如使用function(){}定义了一个匿名函数,然后将这个匿名函数用一个变量来表示。就可以通过这个变量来调用函数。

(2)变量作用域

分为全局变量和局部变量,作用域和java中变量类似。但需要注意的是,函数体中,不加var的变量是全局变量。

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

}



> 
> 形如使用function(){}定义了一个匿名函数,然后将这个匿名函数用一个变量来表示。就可以通过这个变量来调用函数。
> 
> 
> 


#### (2)变量作用域



> 
> 分为全局变量和局部变量,作用域和java中变量类似。但需要注意的是,**函数体中,不加var的变量是全局变量。**
> 
> 
> 




[外链图片转存中...(img-oidWFvW8-1715818773259)]
[外链图片转存中...(img-x7xHs37k-1715818773259)]
[外链图片转存中...(img-gltpjXX3-1715818773259)]

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

  • 15
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值