JavaScript 的初步学习上篇

这篇具有很好参考价值的文章主要介绍了JavaScript 的初步学习上篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

JavaScript 的介绍

JavaScript 之父 布兰登 . 艾奇 (Brendan Eich) ,1995 年, 用 10 天时间完成 JavaScript 的设计.

JavaScript 和 Java 的关系

两者之间就像老婆和老婆饼的关系,即毫无关系, JavaScript 最初的名字叫LiveScript,为了蹭 Java 热度,才改名为 JavaScript.JavaScript 最初只是为了进行前端页面开发,后来 JavaScript 被赋予了更多的功能,可以用来开发桌面程序,手机app,服务器端的程序…

JavaScript 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨), CSS: 网页的表现(皮), JavaScript: 网页的行为(魂)

冷知识,三者注释的区别: HTML: <!-- -->, CSS: /* */ ,JavaScript: //,/* */

JavaScript 的运行

JavaScript/JS 是运行在浏览器上的, 比如 chrome浏览器里面专门有一个模块,就是 JS引擎, 就相当于JVM一样,能够解释执行 JavaScript 代码.后来就有大神把这部分代码单独拎出来了,封装成独立的程序了,被称为V8引擎, js适用范围因此也就更广泛了.
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

  1. 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
  2. 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
  3. 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

JavaScript 的组成

ECMAScript(简称 ES): JavaScript 语法
DOM: DOM API 是浏览器给提供的操作页面元素的API, 对页面中的元素进行操作.
BOM: BOM是浏览器提供给JavaScript的另一组操作浏览器窗口的API,对浏览器窗口进行操作.


正式开始 JavaScript 的学习

JavaScript 代码可以通过 script 标签嵌入到 html 里面.

JavaScript 的三种书写形式

已弹出一个简单的“hello world”对话框为例.
注: alert('hello')浏览器提供的API,通过这个API,能弹出一个对话框,并显示alert中的内容.
小知识: 有些对话框一弹出来就会阻止用户操作界面的其他部分,叫做模态对话框.

1.行内式

直接嵌入到 html 元素内部

2.内嵌式

写到 script 标签中

示例代码
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行效果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

3.外部式

写成一个单独的 .js 文件,让 html 引入过来

示例代码

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行效果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言


输出: 使用js里的console.log就可以在开发者模式的控制台打印日志,类似于java 中的println一样,也是非常有用的调试手段.
示例: console.log(“这是一条日志”);
注意: 在 VSCode 中直接输入 “log” ,再按 tab 键, 就可以快速输入 console.log

输入: prompt 弹出一个输入框.
示例: prompt(“请输入您的姓名:”);


JavaScript 中的变量

var 是 JavaScript中的关键字, 表示这是一个变量.

var 变量名 = 初始值;

注: js 定义变量不必写类型,不写类型不意味着"没有类型",而是变量的类型,是通过初始化操作的值来确定的.

示例:

旧式写法(有坑!)

var a = 10; a 就是 number 类型(js 不区分int和double,统一都叫做number).
var b = 'hello'; b就是 string 类型.

新式写法(强烈推荐!!!)

~~ 规则更接近C++, Java主流语言.

let a = 10;
let b = 'hello';


JS 中的动态类型

示例代码
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行结果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

一个变量在程序运行过程中,类型可以发生改变. => 动态类型, 比如: JS,Python, PHP, Lua…
一个变量在程序运行过程中,类型不能发生改变.=> 静态类型, 比如: C语言,Java,C++,Go…

动态类型的好处

好处: 代码非常灵活.
比如,写一个函数,计算两个数字的和.
如果使用Java,写个两个int相加的版本,写个两个double相加的版本,写个两个 long相加的版本…
但是使用动态类型的语言,只需要写一个函数即可.

动态类型的坏处

坏处: 一个变量当下到底是什么类型,里面存了什么样的值,里面提供了哪些方法,哪些属性…都是不确定的

现实应用:

动态类型的语言,特别适合初创型公司,规模小,产品特别赶时间.
使用动态类型的语言就很合适了.

如果是规模更大,业务更稳定的公司了,团队人多,产品没那么赶时间,同时维护工作比较多,使用静态类型语言就更合适.
字节, b站,豆瓣,知乎…初创的时候使用Python这种动态类型的语言来开发的产品.后面公司达到一定规模了,就逐渐使用静态类型的语言重构(Java,Go…).


JS 的基本数据类型

JS 中内置的几种类型

  • number: 数字, 不区分整数和小数.
  • boolean: true 真, false 假.
  • string: 字符串类型.
  • undefined: 只有唯一的值 undefined, 表示未定义的值.
  • null: 只有唯一的值 null, 表示空值

undefined, null 是 JavaScript 特有的数据类型.

举例理解: 大一刚开学的时候辅导员发了个表格,让大家来填写信息.
表格有: 学号,姓名,性别,班级,专业……

有同学表示,这里少了个"电话"这样的列这种情况,"电话"就是undefined .但是如果表格上本来有“电话"这一列,但是我们纷纷都没填,此时,"电话"就是null.

别的语言中,如果访问到某个东西没有定义,就会直接报错的.
但是JS不会报错,而是返回个undefined ,即JS把别的语言认为非法的行为,合法化.

JS 的运算符

JavaScript 中的运算符和 Java 用法基本相同

算术运算符:

\+, -, *, /, %

赋值运算符 & 复合赋值运算符

= ,+=, *=,/=,%=

自增自减运算符

++: 自增1, --: 自减1


比较运算符

\>, <=, \>=,
== 比较相等(会进行隐式类型转换)
!=,!==
=== 比较相等(不会进行隐式类型转换)

代码示例
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行效果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

注解: console.log(a == b);

这个代码中就触发了"隐式类型转换",在JS语法内部中有一套隐式类型转换规则,会针对不相同的类型进行比较/运算,会尝试尽可能的转成相同类型.

像Java这种,不太支持隐式类型转换的语言,称为"强类型"语言.
像JavaScript这种,比较能支持隐式类型转换的语言,称为"弱类型"语言.

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

业界的共识: 强类型比弱类型好!
类型强,相当于不同类型之间的区分度就高,编译器能做的检查工作就更多,代码出错的概率就降低了.


逻辑运算符

&& => 逻辑与: 一假则假
|| => 逻辑或: 一真则真
! => 逻辑非

位运算

& 按位与 , | 按位或
~ 按位取反, ^ 按位异或

移位运算

<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)


条件语句: if 语句

三元表达式: 条件 ? 表达式1 : 表达式2

switch 语句

循环语句: while 循环, for 循环

continue 结束这次循环 , break 结束整个循环

注: 这些与Java的语法规则是一样,博主就不做过多讲解了.


JS数组

创建数组

方式一(很少这么写):

let arr = new Array();

方式二,常用,JS 中适用[]来表示数组:

let arr = [];,let arr = [1,2,3,4];
let arr3 = [1, 'hello', true,[]];JS中,数组的元素类型不要求统—,可以是任意类型!这个事情,不仅仅JS如此,动态类型的语言都是如此.
底层: 站在C语言的视角,每个js 中的变量(对象)都有一个地址(唯一身份标识),数组说是存储元素,其实是存的对应的身份标识.身份标识都是统一格式的内容.在底层用一个C的数组来存储这些身份标识,在上层js 这里就相当于是保存不同对象了.

操作数组: 通过下标访问

使用下标的方式访问数组元素
示例1代码
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行结果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言


示例2代码

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行结果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言


示例3代码
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行结果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

JS 的数组,不仅仅是一个传统意义的数组(只能按下标来取元素)而是一个带有"键值对"性质的东西了,不如理解成,数组+Map 的混血儿.此时,数组也能够按照 Map,键值对的方式来组织数据!!
很多动态类型的语言都是如此,比如PHP.
注: JS的更高版本的语法中(ES6),引入了专门的map来表示键值对.

遍历数组

~~ 三种 for 循环遍历数组

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

添加数组元素

~~ 尾插, 使用 push 方法即可
示例代码

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行结果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

删除数组元素

使用 splice 方法删除元素
注: 这个方法相当于一个万能方法,可以用来插入,修改,删除…

splice(startIndex, count, 变长参数……)

把后面变长参数的内容,替换到前面的指定区间之内,
如果后面没有变长参数,就相当于是删除.
如果后面变长参数和前面指定的区间个数一样,此时就是修改/替换.
如果后面变长参数比前面的区间个数长,此时就是新增.

示例代码

JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言

运行结果
JavaScript 的初步学习上篇,学习笔记,javaEE的学习,javascript,学习,开发语言文章来源地址https://www.toymoban.com/news/detail-757637.html

到了这里,关于JavaScript 的初步学习上篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript学习笔记05

    什么是 BOM BOM(Browser Object Model)是指 浏览器对象模型 ,是用于描述这种对象与对象之间层次关系的模型。 浏览器对象模型(BOM)提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。 浏览器 主流的浏览器分为 IE、Microsoft Edge、Chrome、Firefox、Safari、Opera 等几大类

    2024年02月07日
    浏览(35)
  • 【JavaEE】_JavaScript基础语法

    目录 1. JavaScript概述 1.1 JavaScript简介 1.2 HTML、CSS、JavaScript的关系 1.3 JavaScrip的组成 2. JavaScript的书写形式 2.1 内嵌式  2.2 行内式 2.3 外部式 3. 输出 3.1 alert 3.2 console.log 4. 变量的使用 4.1 创建变量 4.1.1 使用var 4.1.2 使用let 4.1.3 动态类型变量 4.2 基本数据类型 4.3 运算符 5. 数组

    2024年02月07日
    浏览(41)
  • 【JavaEE初阶】JavaScript基础语法

    摄影分享: JavaScript (简称 JS) 是世界上最流行的编程语言之一 JS最初只是为了进行前端页面开发.后来JS也被赋予了更多的功能.比如可以用来开发桌面程序,手机APP,服务器端的程序… 是一个脚本语言, 通过解释器运行 JS是一种动态类型, 弱类型的脚本语言, 通过解释器运行, 主要在

    2024年02月13日
    浏览(37)
  • 尚硅谷JavaScript高级学习笔记

    JavaScript中函数是对象。我们后续描述构造函数的内存模型时,会将构造函数称为 构造函数对象。 typeof 运算符来查看值的类型,它返回的是类型的字符串值 == 会做数据转换 输出: 每个函数都有一个prototype属性,它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加

    2024年03月11日
    浏览(46)
  • 【前端学习笔记2】javaScript基础

    是一种运行在客户端(服务器的编程语言) javacript分为行内JavaScript,内部JavaScript,外部JavaScript 内部JavaScript 直接写在html中body里面 alert(“hello,world”) 我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html 如果先加载的JavaScript期望修改其

    2024年01月22日
    浏览(36)
  • 学习笔记 JavaScript基础语法(全)

    1.1 浏览器执行 JS 简介 浏览器分成两部分:渲染引擎和 JS 引擎 渲染引擎 :用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit JS 引擎 :也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8 1.2 JS的组成 1.2.1 ECMAScr

    2024年02月05日
    浏览(38)
  • JavaScript(JavaEE初阶系列13)

    目录 前言: 1.初识JavaScript 2.JavaScript的书写形式 2.1行内式 2.2内嵌式 2.3外部式 2.4注释 2.5输入输出 3.语法 3.1变量的使用 3.2基本数据类型 3.3运算符 3.4条件语句 3.5循环语句 3.6数组 3.7函数 3.8对象 3.8.1 对象的创建 4.案例演示 4.1猜数字游戏 4.2聚合搜索 4.3表白墙 结束语: 在上节

    2024年02月12日
    浏览(30)
  • 【JavaEE初阶】 JavaScript基础语法——贰

    该处的语法规则与Java语法相同,只是简单提一下 基本语法格式 条件表达式为 true, 则执行 if 的 { } 中的代码 是 if else 的简化写法. 条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值 这里需要注意的是: 三元表达式的优先级是比较低的 更适合多分支的场景. 语法规则如

    2024年02月05日
    浏览(37)
  • JavaScript 学习笔记(Day5)

    「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. JavaScript 学习笔记(Day1) 2. JavaScript 学习笔记(Day2) 3. JavaScript 学习笔记(Day3) 4. JavaScript

    2024年01月19日
    浏览(43)
  • javaEE -14(10000字 JavaScript入门 - 1)

    JavaScript (简称 JS)是世界上最流行的编程语言之一,它是一个脚本语言, 通过解释器运,主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 和 HTML 和 CSS 之间的关系: HTML: 网页的结构(骨) CSS: 网页的表现(皮) JavaScript: 网页的行为(魂) 编写的代码是保存

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包