网站导航
> 文章列表 > 一、JS01 JavaScript 基础

一、JS01 JavaScript 基础

网友: 文章列表 2024-03-21 20:25:16

一、JS01 JavaScript 基础

一、JavaScript 基础

1.1 JavaScript 概述

1.1.1 JavaScript 基本介绍

  • JavaScript （简称 JS） 是一种具有函数优先级的轻量级、解释型、即时编译型的编程语言
  • JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
  • JavaScript的标准是 ECMAScript
  • ECMAScript 是一套脚本规范，用于定制行为准则，JavaScript 则是这套行为准则的具体实现

1.1.2 JavaScript 的用途

  • 嵌入动态文本于 html 页面

  • 读写 html 元素

  • 与 css 进行交互

  • 对浏览器事件做出响应

  • 在数据被提交到服务器之前验证数据

  • 检测访客的浏览器信息

  • 创建、修改、删除 cookie 和缓存

  • 基于 node.js 技术进行服务器端编程

1.2 JavaScript 的组成及基本结构

1.2.1 JavaScript 的组成

  • 一个完整的 JavaScript 由三部分组成：ECMAScript、DOM、BOM
  • ECMAScript
    • 一种脚本程序设计语言
    • 主要描述了 JavaScript 的语法、变量、数据类型、运算符、逻辑控制语句、关键字、对象等
  • DOM (Document Object Model, 文档对象模型)
    • HTML 稳定对象模型定义的一套标准方法
    • 用来访问和操作 HTML 稳定
    • 例如电商网站页面弹出的提示框
  • BOM (Browser Object Model，浏览器对象模型)
    • 用于描述对象与对象之间层次关系的模型
    • 浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
    • 例如、网页弹出新浏览器窗口的能力，移动、关闭和更改浏览器窗口大小的能力

1.2.2 JavaScript 的基本结构

  • **使用 JavaScript 时，可以将代码写入 ==为止
  • 语法如下
<script type="text/javascript">//JavaScript 语句;
</script>
  • type 属性用于指定文本使用的语言类别
  • 使用 JavaScript 在网页中输出 “你好，JavaScript” 示例如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 的基本结构</title>
</head>
<body>
<script>document.write("你好,JavaScript");
</script>
</body>
</html>
  • 效果如下图所示

一、JS01 JavaScript 基础

  • document.write() 表示用来向页面输出可以包含 HTML 标签的内容
  • 标签可以包含在文档中的任何地方，需要保证这些代码在被使用前已读取并加载到内存

1.2.3 在网页中引入 JavaScript 代码

将 JavaScript 代码引入网页中有三种方式

1、内部 JavaScript 文件

2、外部 JavaScrip 文件

3、直接写在 HTML 标签中

1、内部 JavaScript 文件

  • 直接使用

2、外部 JavaScript 文件

  • 将 JavaScript 代码写入一个外部文件，以 .JS 为扩展名保存

  • 然后将改文件指定给 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部 JavaScript 文件</title>
</head>
<body>
<script type="text/javascript" sec="js文件路径"></script>
</body>
</html>
  • 外部 JavaScript 文件常用于代码量较大，并且若干页面中具有相同的 JavaScript 效果的情况
  • 可以很好地达到代码复用的效果

3、直接写入 HTML 标签中

  • 直接将 JavaScript 代码写在 HTML 标签中适用于简短的 JavaScript 代码
  • 直接写入 HTML 标签中 语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>直接写入 HTML 标签中</title>
</head>
<body><input type="button" value="单击弹出对话框"onclick="javascript:alert('你好，JavaScript');">
</body>
</html>

1.3 JavaScript 的核心语法

JavaScript 的核心语法包含变量的声明和赋值、数据类型、运算符、逻辑控制语句等基本语法

1.3.1 变量的声明和赋值

1、变量的声明

  • JavaScript 变量都由关键字 var 声明
  • var 声明变量的语法如下
var 变量名;
  • 变量名可以由数字、字母、下划线及 “$” 符合组成
  • 变量名首字母不能为数字，也不能使用关键字命名
  • 声明变量时，可以一次性声明多个变量
  • 语法格式如下
var 变量名1,变量名2,...;

2、变量的赋值

  • 声明变量同时使用 = 对变量进行初始化赋值
  • 语法格式如下
var 变量名=值;
var 变量1,变量2,变量3=值1,值2,值3

1.3.2 JavaScript 的数据类型

**JavaScript 是弱脚本语言，声明变量时无需指定变量的数据类型，因为 JavaScript 变量的数据类型是解释时动态决定的 **

1、基本数据类型

基本数据类型包含 数值类型（number）、字符串类型（string）、布尔类型（boolean）

  • 数值类型

    • JavaScript 的数值类型包括所有的整型变量、还包括所有的浮点型变量
    • JavaScript 支持八进制和十六进制。
    • 八进制以 0 开头表示，十六进制以 0x 或 0X 开头表示
    • 当数值类型超出了表述范围，将会出现两个特殊值：Infinity（正无穷大）和 -Infintiy（负无穷大）
    • JavaScript 中有一个特殊值—— NaN。表示非数值，它是数值类型

  • 字符串类型

    • JavaScript 的字符串必须用引号括起来，可以是单引号，也可以是双引号
    • 例如
    var str1="123abc";
var str2='123abc';
    • string 类包含的一些方法
    方法名 作用
    charAt() 返回指定位置的字符串
    toUpperCase() 把字符串转换成大写
    toLowerCase() 把字符串转换成小写
    indexOf() 返回某个指定的字符串在字符串中首次出现的位置
    subString() 用于提取字符串中介于两个指定下标之间的字符
    split() 用于把一个字符串分割成字符串数组
    replace() 用于在字符串中用一些字符替换另一些字符

  • 布尔类型

    • 布尔类型的值只有两个 true 和 false
    • 布尔类型的值通常是逻辑运算的结果，或用于标志对象的某种状态

2、特殊数据类型

  • 特殊数据类型包含 **空类型（null）**和 未定义类型（undefined）
  • null 表示变量的值为空，可以用来检测某个变量是否被赋值
  • undefined 类型的值只有一个 fndefined，用于表示某个变量不存在，或者没有为其分配值，也用于表示对象的属性不存在
  • null 表示变量是有值的，只是其值为 null

3、判断数据类型

  • typeof 运算符用来判断某个值或变量的数据类型
  • 语法格式如下
typeof(值或变量);
  • typeof 的返回值
返回值 说明
number 如果变量是数值类型，则返回 number
string 如果变量是字符串类型，则返回 string
boolean 如果变量是布尔类型，则返回 boolean
object 如果变量是空类型，或者是一种引用类型，如对象、函数、数值、则返回object
undefined 如果变量是未定义类型，没有赋予值，则返回 undefined

1.4 系统对话框

浏览器可以通过 alert()、confirm()、prompt() 方法调用系统对话框向用户显示消息

1.4.1 alert()

  • alert() 方法用于向用户显示一个警告对话框
  • 包含指定的文本和一个 “确定” 按钮
  • 示例
alert("确认登录吗")
  • 效果图

一、JS01 JavaScript 基础

1.4.2 confrim()

  • confirm() 方法用于向用户显示一个消息对话框
  • 该对话框包含一个指定文本已经 “确认” 按钮 和 “取消” 按钮
  • 点击确定 返回 true，点击取消返回 false
  • 示例
confirm("确认登录吗")
  • 效果图

一、JS01 JavaScript 基础

1.4.3 prompt()

  • prompt() 方法会弹出一个提示对话框，等待用户输入一些数据
  • 当用户点击确认时，返回值是用户所输入的数据，类型为 string
  • 语法格式如下
prompt("提示信息","输入框的默认信息");
  • 示例
prompt("今天是几月几号","4月9号");
  • 效果图

一、JS01 JavaScript 基础

1.5 初识函数

在 JavaScript 中，函数类似于 Java 中的函数

JavaScript 中的函数不要定义属于某个类，因此调用时不需要使用对象吗调用

1.5.1 系统函数

JavaScript 中常用的系统函数有三种

ParseInt() 、parseFloat() 、isNaN()

1、parseInt()

  • parseInt() 函数可以将字符串类型的数据转为整数类型
  • parseInt() 会先判断是否是数字，如果是数字，则进行转换，否则，返回 NaN
  • 示例
var num1=parseInt("56.64"); //返回56
var num2=parseInt("123abc") //返回123
var num3=parseInt("hello") //返回 NaN

2、parseFloat()

  • parseFloat() 函数可以将字符串类型的数据转为浮点类型
  • parseFloat() 与 parseInt() 的处理方式相似
  • 第一个出现的小数点是有效字符串，如果有第二个小数点，那么第二个小数点无效
  • 示例
var num1=parseFloat("3.1415926"); //返回 3.1415926
var num2=parseFloat("123abc"); //返回123
var num3=parseFloat("hello"); //返回 NaN
var num4=parseFloat("52.18.97"); //返回 52.18

3、inNaN()

  • 用于检查其参数是否是非数字
  • 如果 是特殊的非数字，则返回 true，否则返回 false
  • 示例
var num1=isNaN("20.5");   //返回值为 false
var num2=isNaN("123abc");  //返回 true
var num3=isNaN("48.98");   //返回 false

1.5.2 自定义函数

与 Java 语言一样，JavaScript 需要先定义函数，然后才能调用函数

定义函数的方法有两种：1、函数声明 2、函数表达式

1、函数声明

  • 函数声明由关键字 function、函数名、一组参数及大括号组成
  • 函数声明 语法
function 函数名([参数1,参数2,参数3,...]){//JavaScript 语句;返回值
}
  • 声明完一个函数后，可以执行这个函数
  • 执行一个函数，必须先调用这个函数
  • 调用函数时，必须指定函数名及其后面的参数(有参的情况下),函数的调用一般和元素的事件结合使用
  • 调用函数 语法
事件名="函数名([参数])";

2、函数表达式

  • 将一个函数赋给一个变量，此时形成了函数表达式
  • 函数表达式 语法
var 变量=function(参数1,参数2,参数3,...){//JavaScript 语句
}

  • 函数声明和函数表达式的基本使用方法是一样

  • 函数声明和函数表达式的不同之处

  • 具体代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//函数声明function f1(){document.write("兰巧儿真可爱!<br>")}f1();function f1(){document.write("兰巧儿真可爱！哈哈哈~~~<br>")}f1();//函数表达式var f2=function (){document.write("巧克力<br>")}f2();var f2=function (){document.write("哇哦，是巧克力<br>")}f2();
</script>
</body>
</html>
  • 运行结果

一、JS01 JavaScript 基础

  • 由此可以看出，使用函数声明的方法定义的两个函数名相同的函数，后面的函数会覆盖前面的函数
  • 使用函数表达式的方式定义的函数，会从上到下逐行执行代码输出结果

1.5.3 函数自调用

  • 在自定义函数中，如果函数有名字，如 **function study(){} **则会被称为 命名函数
  • 如果函数没有名字，如 function() 则被称为匿名函数
  • 匿名函数的调用
(function(){//函数体
})();
  • 将 function(){} 匿名函数放在一对 () 中，就实现了调用，称之为函数自调用
  • 函数自调用的特点就是函数没有名字，在声明时直接调用
  • 好处在于，自调用不会像函数声明那样，覆盖前面的函数

1.6 事件

1.6.1 事件的概念及作用

当与浏览器交互时，浏览器就会触发各种事件来完成网页中的各种特效

  • 常用的事件如下
事件名 作用
onload 一个页面或一幅图像完成加载
onclick 鼠标单机某个对象
onmouseover 鼠标指针移到某元素上
onmouseout 鼠标指针离开某元素
onkeydown 某个键盘按键被按下
onchange 域的内容被改变
  • 示例，当按钮被单机时，触发函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>function fn(){alert("兰巧儿真可爱!");}</script>
<input type="button" value="按钮" onclick="fn()">
</body>
</html>

| onload | 一个页面或一幅图像完成加载 |
| onclick | 鼠标单机某个对象 |
| onmouseover | 鼠标指针移到某元素上 |
| onmouseout | 鼠标指针离开某元素 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |

  • 示例，当按钮被单机时，触发函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>function fn(){alert("兰巧儿真可爱!");}</script>
<input type="button" value="按钮" onclick="fn()">
</body>
</html>
网络标签：

相关问题