JavaWeb之js
创始人
2024-03-04 20:21:14
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,所以引入

^:表示开始

$:表示结束

最后

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

相关内容

热门资讯

深度挖掘海洋资源价值,交通部称... 将加快培育和发展航运领域新质生产力,拓展人工智能、物联网、5G、北斗等新技术应用场景,统筹发展智慧港...
最美院落|地科院野外楼:打造老... 为进一步巩固背街小巷环境精细化治理和文明城区创建成果、改善群众身边环境,自2022年起,西城区城市管...
机器人概念异动拉升 中大力德触... 机器人概念异动拉升,中大力德触及涨停,汉威科技、兆威机电、新时达跟涨。 (文章来源:人民财讯)
零跑(09863)C11焕新登... 7月10日,杭州运河发布中心,零跑汽车(09863)创始人兼董事长朱明江站在舞台上说,4 年前,零跑...
创新药企ETF(560900)... 2025年7月11日,创新药企ETF(560900)盘中涨超2%,截至13:14,该基金盘中换手11...
RPA概念板块走强 金证股份涨...   07月11日消息,截止13:35,RPA概念板块走强,金证股份、中科金财涨停,用友网络等个股涨幅...
海立股份涨2.09%,成交额2... 7月11日,海立股份盘中上涨2.09%,截至13:36,报12.20元/股,成交2.48亿元,换手率...
切实解决群众急难愁盼 对民生实...   本报讯(记者祁梦竹 刘菲菲)昨天上午,市委常委会召开会议,传达学习习近平总书记在中央财经委员会第...
港股异动 | 港交所(0038... 港交所(00388)午后涨超4%,截至发稿,涨4.26%,报431港元,成交额36.27亿港元。消息...
心脉医疗涨2.08%,成交额1... 7月11日,心脉医疗盘中上涨2.08%,截至13:39,报96.66元/股,成交1.64亿元,换手率...