JavaScript 第一讲笔记 JavaScript基础

一、JS前世今生

1.什么是“解释性语言”

  • 计算机不能直接理解任何除机器语言以外的语言,所以必须要 把程序员所写的程序语言翻译成机器语言,计算机才能执行程
    序。将其他语言翻译成机器语言的工具,被称为编译器。
  • 编译器翻译的方式有两种:一个是编译,一个是解释。当编译 器以解释方式运行的时候,称之为解释器。
  • 解释性语言编写的程序不进行预先编译,以文本方式存储程序 代码。
  • 常见解释性语言:HTML、XHTML、JavaScript、XML、 CSS、AJAX等。

2、JavaScript是什么

  • JavaScript是一种小型的、轻量级的、面向对象的、跨平台的脚 本语言,是目前最流行的网页客户端编程语言。JavaScript用于 控制网页内容,实现网页浏览者与网页内容之间的交互,这种交 互的实现直接发生在客户端,并不需要与Web服务器之间进行数据通信,因此将获得极高的响应速度。
  • JavaScript是一种基于对象和事件驱动并具有相对安全性的客户
    端脚本语言。
  • JavaScript是一种解释性脚本语言。它不同于一般的程序设计语
    言,它不需要事先进行编译,而是嵌入在HTML文本中,由客户
    端浏览器对其进行解释执行。
  • JavaScript具有平台无关性:只要客户端的浏览器支持JavaScript,JavaScript程序便能正确运行。而几乎所有主流的浏览器均支持JavaScript。

3、JavaScript历史和发展

  • JavaScript语言最初称为LiveScript语言,是由Netscape(网景)公司为Netscape Navigator 2.0开发的脚本语言。希望借助流行的Java使LiveScript流 行起来,因此改名为JavaScript。
  • Microsoft在IE3.0中引入了JavaScript。因为Microsoft没有授权使用JavaScript商标,因此将其改名为Jscript。
  • 1997年,JavaScript 1.1被提交到ECMA(欧洲计算机制造商协会)。并在1997.6ECMA制定了第一个正式语言规范ECMA-262,并命名ECMAScript。

4、JavaScript能做什么

  • 表单数据验证:表单数据验证是JavaScript最基本也是最能体现效率的功能。
  • 表单数据验证:表单数据验证是JavaScript最基本也是最能体现效率的功能。
  • 表单数据验证:表单数据验证是JavaScript最基本也是最能体现效率的功能。
  • 数据绑定:通过对位于服务器端的数据源文件的访问,便可以将数据源中的数据传送到客户端,并将这些数据保存在客户端。
  • 少量数据查找:能够实现在当前网页中进行字符串的查找和替换。
  • AJAX核心技术:支持异步请求的技术,使客户端可以使用JavaScript向服务器提出请求并处理响应,但并不影响用户在客户端的浏览。

二、我叫JS

1、常用的两个客户端方法

1.1 document.write(str)

  • 该方法在浏览器中输出参数字符串str。
  • document是文档对象模型(DOM)中的一个对象,表示当前浏览器中的网页文档。
  • document提供了许多访问和控制页面中元素的属性和方法,write()是其中的一个方法
  • JS通过“.”运算符调用对象的属性和方法。

1.2 window.alert(str)

  • 该方法在浏览器中弹出一个对话框,对话框中显示参数str的内容。
  • Window对象同样是浏览器提供的对象,对象提供了许多访问和控制窗口元素的属性和方法,alert()方法是其中一个方法。

2、如何在HTML中加入JavaScript代码

2.1 script 标记对(内嵌式)

在这里插入图片描述

  • 在一个HTML文件中,可以出现多个<script></script>块,各个块按照他们在HTML中出现的顺序依次被解释与执行。
  • 浏览器将忽略其不支持的版本编写的脚本。language属性可以省略 ,因为所有的浏览器默认的language为JavaScript。

2.2 直接加入到HTML的标记中(行内式)

在这里插入图片描述

  • 如果是多句脚本代码,应用<script></script>.
  • 如果是简单的代码,可以直接将代码加到HTML的标记中。这种方法一般是将JavaScript代码直接指定给事件响应句柄,由事件触发脚本的执行。
  • 在HTML标记中直接加代码,需要使用“javascript:”协议。

2.3 使用src属性引用JavaScript脚本(外链式)

在这里插入图片描述

  • 通过src属性,可以使用外部的js脚本文件。
  • 外部javascript文件的扩展名是.js
  • 代码重用:不同网页可引用相同的javascript源代码文件
  • 安全性:对于怀有恶意的人,可通过代码发现安全漏洞,从而威胁网站安全。如果将JS文件统一放到有访问权限的控制目录,可以避免任何人直接查看。
  • 代码维护:将JS文件放在指定目录下,方便代码的管理和维护。

3、JavaScript程序设计基本规则

3.1 语句

  • 程序由若干语句组成,语句是组成程序的最基本单位。
  • 每条语句是由合法的函数、数据、表达式组成。
  • 每条语句以分号“;”结束(不是必须的)。
  • 一行中可以放置多条语句,但必须以分号隔开。

3.2 区分大小写

  • Javascript中代码是区分大小写的。
  • 所有关键字是小写的。

3.3 注释

  • 单行注释://或#开始
  • 多行注释:/* 注释内容 */

3.4 空白和缩进

  • 运算符与关键字之间出现的空格将被忽略。
  • 适当使用缩进和空白有助于改善程序的可读性。
  • 空白包括空行或者空格。

4、第一个JavaScript程序

<script>
	var age = 25; //定义变量
	var city = '北京';
	if(age > 18) {
		alert('你已成年, 可以做任何你想做的事!');
		if(city == '北京') {
			alert('你好, 北京土著!');
		} else {
			alert('你好, 北漂一族!');
		}
	} else {
		alert('小同学你好, 小心被拐卖了哦!');
	}
</script>

三、JS变量

1、什么是变量

  • 现实世界中会有各种数据:姓名、性别、年龄、学历等。
  • 在编程语言中,是用一种叫做“变量”的符号来描述现实世界中的数据的。

2、变量的声明方式

  • 变量使用关键字 var 进行定义,例如:var username;
  • 同时声明多个变量,多个变量间用逗号分开,
    例如:var username,password;
  • JS为弱数据类型语言,在定义变量时不需要指定变量类
    型,JS会根据对变量所赋的值自动确定变量的类型。
  • JS变量的数据类型在程序中可以变化。

3、变量的命名规则

  • 变量名称必须以一个字母或下划线 “_” 开始,后面的字符可以是数字 0-9 ,字母 A-Z 或 a-z。
  • 不能使用JavaScript 关键字或者保留字作为变量名。JS变量名称区分大小写。

4、变量的命名方式

  • 当变量名包含多个单词时,一般采用“驼峰”式的命名方
    式,即第一个单词的字母全部小写,其它单词首字母大
    写,其余小母小写,例如 getUserName。
  • 另一种常用的命名方法是“下划线”命名方式,使用 “_” 符号分隔多个单词,而各单词字母均小写,例如 get_user_name。

5、如何给变量赋值

  • 给变量赋值,使用赋值符号”=”。”=”不表示相等,而是将”=”号右边的值赋予左边的变量。”=”符号右边可以是值、变量或表达式。
  • 在JS中,重复定义相同名称的变量是合法的,但是后面定义的变量将覆盖前面定义的同名变量。但在JAVA等程序语言中,同一作用域内不允许重复定义相同名称的变量。

6、PS:

6.1 JS的关键字和保留字

在这里插入图片描述

6.2 当全局变量与局部变量同名时

在这里插入图片描述

  • 当函数中定义的局部变量与全局变量同名时,局部变量将覆盖全局变量,就是说,在函数中使用函数中定义的局部变量,而不使用函数之外定义的全局变量,也不会影响函数之外的全局变量。

四、JS数据类型

1、什么是数据类型

程序是算法与数据的结合。算法是完成某项任务采用方法的详细步骤,数据是程序处理的对象,目的是对数据进行加工处理,以得到期望的结果。数据根据其特性进行分类,不同的数据类型有不同的处理方法。

2、JS有哪些数据类型

JavaScript支持5种基本数据类型:
• number(数值)
• string(字符串)
• boolean(布尔型)
• undefined(未定义)和null(空)
• 复合数据类型(类、接口、数组)

2.1 数值型number

在这里插入图片描述

  • 数值型包括整数和浮点数。在JS中,所有数值均被作为浮点数处理,负值通过在数值前加 “-”号表示。
  • 整数可以用十六进制和八进制形式表示。十六进制数值以 0x 或0X开始,例如”0X23AC”;八进制以 0 开始,后面跟0~7的数字。最终显示结果都为十进制。注意:一些浏览器并不支持八进制。
  • 十进制数值用科学计数法表示,例3.45e12(相当于3.45乘以10的12次方)、3.45e-12(相当于3.45乘以10的-12次方),最 终显示结果为十进制。
  • 关于数值类型,有一个特殊的数据NaN(Not a Number),该值表示“不是数字”。在某些情况下,将返回该值。例如强制将纯字符串转换为数值时将返回NaN。

2.2 字符串型(string)

  • 字符串是指由单引号或双引号括起来的一串字符。例如:”welcome”,”你好”,”1203-003”。
  • 字符串长度不受限制,可以是一个字符,多个字符,或者是空字符。
  • 字符串内容本身包含引号时,可以使用与外层引号不同的方式。
  • 当需要在双引号字符串中包含双引号时,或在单引号字符串包含单引号时,必须使用反斜线”\”进行转义。

ps:
1、什么是转义字符

在这里,反斜线”\”被称为转义字符。当需要表示一些特殊的字符,如回车符,需要使用转义符”\”进行转义。当JavaScript遇到转义符时,将转义符后出现的字符进行特殊解释。
2、常用的转义字符
在这里插入图片描述

2.3 布尔型(boolean)

  • 布尔型又称为逻辑型,就是指真或假,是或否。布尔型只有两个可取值:true和false(全小写)。
  • 布尔型一般用于流程控制语句中,例如 if 语句中。
  • 可以直接为变量指定布尔值,也可以通过比较产生布尔值。

2.4 undefined

  • 当一个对象属性不存在或者变量定义后从未赋值时,返回undefined。
  • 数据类型undefined只有一个值“undefined” 。

2.5 null

  • 当一个变量没有保存有效的数据时或对象不存在时,都将返回null。
  • 数据类型null只有一个值“null”。
  • 可以通过给一个变量赋 null 值来清除变量的内容。

3、复合数据类型

3.1 什么是数组

幻灯片p36
未完待续
未完待续
未完待续
未完待续
未完待续
未完待续
未完待续
未完待续
未完待续
未完待续

4、基本数据类型与复合(引用)数据类型

4.1 区别

  • 基本数据类型变量直接存储值,而复合数据类型变量存储实际值的地址。
  • 存储方式的不同,导致两种不同类型在使用时会产生不同的结果。
  • 使用基本数据类型对变量进行赋值时,传递给目标变量的是值。而使用复合数据类型对变量进行赋值时,传递给目标变量的是对值的引用,而不是实际值,因此,目标变量 将始终与原变量相同,修改任何一个都将影响另一个。

4.2 赋值传值示意图

传递给目标变量的是值。
在这里插入图片描述

4.3 引用传值示意图

将一个变量的值拷贝一份赋给另一个变量。
在这里插入图片描述

热门文章

暂无图片
编程学习 ·

exe4j详细使用教程(附下载安装链接)

一、exe4j介绍 ​ exe4j是一个帮助你集成Java应用程序到Windows操作环境的java可执行文件生成工具&#xff0c;无论这些应用是用于服务器&#xff0c;还是图形用户界面&#xff08;GUI&#xff09;或命令行的应用程序。如果你想在任务管理器中及Windows XP分组的用户友好任务栏…
暂无图片
编程学习 ·

AUTOSAR从入门到精通100讲(126)-浅谈车载充电系统通信方案

01 引言 本文深入研究车载充电系统策略,设计出一套基于电动汽车电池管理系统与车载充电机的CAN通信协议,可供电动汽车设计人员参考借鉴。 02 电动汽车充电系统通讯网络 电动汽车整车控制系统中采用的是CAN总线通信方式,由一个整车内部高速CAN网络、内部低速CAN网络和一个充电…
暂无图片
编程学习 ·

CMake(九):生成器表达式

当运行CMake时&#xff0c;开发人员倾向于认为它是一个简单的步骤&#xff0c;需要读取项目的CMakeLists.txt文件&#xff0c;并生成相关的特定于生成器的项目文件集(例如Visual Studio解决方案和项目文件&#xff0c;Xcode项目&#xff0c;Unix Makefiles或Ninja输入文件)。然…
暂无图片
编程学习 ·

47.第十章 网络协议和管理配置 -- 网络配置(八)

4.3.3 route 命令 路由表管理命令 路由表主要构成: Destination: 目标网络ID,表示可以到达的目标网络ID,0.0.0.0/0 表示所有未知网络,又称为默认路由,优先级最低Genmask:目标网络对应的netmaskIface: 到达对应网络,应该从当前主机哪个网卡发送出来Gateway: 到达非直连的网络,…
暂无图片
编程学习 ·

元宇宙技术基础

请看图&#xff1a; 1、通过AR、VR等交互技术提升游戏的沉浸感 回顾游戏的发展历程&#xff0c;沉浸感的提升一直是技术突破的主要方向。从《愤怒的小鸟》到CSGO,游戏建模方式从2D到3D的提升使游戏中的物体呈现立体感。玩家在游戏中可以只有切换视角&#xff0c;进而提升沉浸…
暂无图片
编程学习 ·

flink的伪分布式搭建

一 flink的伪分布式搭建 1.1 执行架构图 1.Flink程序需要提交给 Job Client2.Job Client将作业提交给 Job Manager3.Job Manager负责协调资源分配和作业执行。 资源分配完成后&#xff0c;任务将提交给相应的 Task Manage。4.Task Manager启动一个线程以开始执行。Task Manage…
暂无图片
编程学习 ·

十进制正整数与二进制字符串的转换(C++)

Function one&#xff1a; //十进制数字转成二进制字符串 string Binary(int x) {string s "";while(x){if(x % 2 0) s 0 s;else s 1 s;x / 2;}return s; } Function two&#xff1a; //二进制字符串变为十进制数字 int Decimal(string s) {int num 0, …
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

树莓派驱动DHT11温湿度传感器

1&#xff0c;直接使用python库 代码如下 import RPi.GPIO as GPIO import dht11 import time import datetimeGPIO.setwarnings(True) GPIO.setmode(GPIO.BCM)instance dht11.DHT11(pin14)try:while True:result instance.read()if result.is_valid():print(ok)print(&quo…
暂无图片
编程学习 ·

ELK简介

ELK简介 ELK是三个开源软件的缩写&#xff0c;Elasticsearch、Logstash、Kibana。它们都是开源软件。不过现在还新增了一个 Beats&#xff0c;它是一个轻量级的日志收集处理工具(Agent)&#xff0c;Beats 占用资源少&#xff0c;适合于在各个服务器上搜集日志后传输给 Logstas…
暂无图片
编程学习 ·

Linux 基础

通常大数据框架都部署在 Linux 服务器上&#xff0c;所以需要具备一定的 Linux 知识。Linux 书籍当中比较著名的是 《鸟哥私房菜》系列&#xff0c;这个系列很全面也很经典。但如果你希望能够快速地入门&#xff0c;这里推荐《Linux 就该这么学》&#xff0c;其网站上有免费的电…
暂无图片
编程学习 ·

Windows2022 无线网卡装不上驱动

想来 Windows2022 和 windows10/11 的驱动应该差不多通用的&#xff0c;但是死活装不上呢&#xff1f; 搜一下&#xff0c;有人提到 “默认安装时‘无线LAN服务’是关闭的&#xff0c;如果需要开启&#xff0c;只需要在“添加角色和功能”中&#xff0c;选择开启“无线LAN服务…
暂无图片
编程学习 ·

【嵌入式面试宝典】版本控制工具Git常用命令总结

目录 创建仓库 查看信息 版本回退 版本检出 远程库 Git 创建仓库 git initgit add <file> 可反复多次使用&#xff0c;添加多个文件git commit -m <message> 查看信息 git status 仓库当前的状态git diff 差异对比git log 历史记录&#xff0c;提交日志--pret…
暂无图片
编程学习 ·

用Postman生成测试报告

newman newman是一款基于nodejs开发的可以运行postman脚本的工具&#xff0c;使用Newman&#xff0c;可以直接从命令运行和测试postman集合。 安装nodejs 下载地址&#xff1a;https://nodejs.org/en/download/ 选择自己系统相对应的版本内容进行下载&#xff0c;然后傻瓜式安…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…