JavaWeb之js
admin
2024-04-15 04:43:57
0

目录

  • W3C 标准
  • JavaScript
    • 输出语句
    • JavaScript 编写位置
    • 定义变量
    • 五种数据类型
    • 算术运算符
    • 赋值运算符
    • 比较运算符
    • 逻辑运算
    • if
    • 循环
    • 命名函数
    • Array
    • BOM
      • window
      • location
      • history
    • DOM
    • 事件
      • 常用事件
    • 正则表达
  • 最后

W3C 标准

W3C 标准:网页主要由三部分组成

HTML:用来制作网页基础内容和基本结构

CSS:用于网页样式美化效果

JavaScript:用来制作数据验证、和用户交互

JavaScript

JavaScript概念

JavaScript 是一门跨平台、面向对象的脚本语言,运行在浏览器端。

JavaScript(简称:JS) 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。

JavaScript作用

表单数据校验

页面元素标签动态增删改查操作等

输出语句

window.alert() 写入警告框

document.write() 写入HTML 输出

console.log() 写入浏览器控制台

JavaScript 编写位置

1.行内,直接写在标签的属性里面

2.内部,本网页有效(经常使用)
2.1.同一个HTML中可以有多个script标签,每个标签都会执行(从上往下运行)
2.2.可以出现在网页中任何的位置

3.外部,使用script标签引入外部的JS文件

注意:
如果引入了外部JS文件,这个标签中的JS代码是无效的
< script>不能提前结束,不能写成这样: < script src=“js/out.js”/>, 影响后面的JS执行

定义变量

ES5 定义变量

var

ES6 定义变量

let

区别:

ES5 方式语法不严谨,使用范围不受代码块限制,代码块外依然可以使用,造成内存浪费

ES6 新增了 let 关键字来定义变量。它的用法类似于 var,但是所声明的变量,只在 let 关键字所在的代码块内有效,且不允许重复声明

ES6 新增了const关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。


五种数据类型

number:小数整数都是number

string:小写的s(字符串)

boolean:布尔类型

undefined:未定义的类型

object:对象类型


算术运算符

跟java大致相同

JavaScript 中除法是可以除得尽,如果除不尽会保留16位小数

赋值运算符

与java一致

比较运算符

===是恒等于

== 比较值,=== 比较值与类型

字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。

逻辑运算

字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。

逻辑运算符不建议单与&、单或|, 会变成数字。


if


循环


命名函数

function

// 定义一个匿名函数实现加法功能let add = function (a,b){return a+b;}// 调用函数document.write(add(1,2));

Array


BOM

BOM(Browser Object Model):浏览器对象模型。

将浏览器的各个组成部分封装成不同的对象,方便我们进行操作。

BOM常用对象

window 表示浏览器窗口位置
location 表示地址栏对象
history 表示浏览历史记录对象

window

alert 弹出框
prompt 输入框
confirm 确认框
setTimeout 过一段时间调用,只调用一次
setInterval 每隔一段时间调用一次


location

href属性就是浏览器的地址栏。我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。


history

表示访问过的历史记录,如果没有历史记录,这个对象中的方法不可用。

forword() 当前页面前进
back() 当前页面后退

页面

DOM

Document Object Model: 文档对象模型(浏览器显示的内容),DOM用来操作网页中各种元素(标签)。

document代表了整个DOM树对象,查找节点都找document去获取。

获取元素方法:

document.getElementById(“”) 通过id获取一个元素

document.getElementsByTagName (“标签名”) 通过标签名获取一组元素

document.getElementsByName(“name”) 通过name属性获取一组元素

document.getElementsByClassName(“类名”) 通过样式类名获取一组元素


事件

概念:

用户可以对网页的元素有各种不同的操作如:单击,双击,鼠标移动等这些操作就称为事件。事件通常与函数配合使用,这样就可以通过发生的事件来驱动JavaScript函数执行。



两种方式设置事件







常用事件

onsubmit 当表单提交时触发该事件

onclick 鼠标单击事件

ondblclick 鼠标双击事件

onblur 元素失去焦点

onfocus 元素获得焦点

正则表达

正则表达式的定义:

let reg = /^\w{6,11}$/;

test方法

用来判断是否符合正则表达式,在JS中正则表达式默认是部分匹配

意思就是只要一部分匹配也会返回true,所以引入

^:表示开始

$:表示结束

最后

如果你对本文有疑问,你可以在文章下方对我留言,敬请指正,对于每个留言我都会认真查看。

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...