- 警告对话框,给用户提示
alert(“提示内容”);
- 确认对话框,让用户对自己的操作进行确认
confirm(“提示文字”);
返回true代表用户确认
返回false代表用户取消
- 输入对话框,让用户进入输入
prompt(“提示文字”)
返回字符串
===========================================================================
类似Java的方法,实现代码的封装和重复调用
定义:
function 函数名(参数名,参数名…){
代码
return 值
}
示例:
// 求两个数的最大值
function max(n1,n2){
if(n1 > n2){
return n1;
}else{
return n2;
}
}
//调用
alert(“最大值是:”+max(898,99));
==================================================================
事件能响应用户对页面元素的某些操作,能实现代码和用户的交互效果。
编程过程:
-
编写函数
-
选择事件源(标签)
-
设置事件来调用函数
常用事件:
-
onclick 点击事件
-
onmousemove 鼠标移动事件
-
onmouseover 鼠标进入事件
-
onmouseout 鼠标离开事件
-
onfocus 获得焦点
-
onblur 失去焦点
-
onsubmit 表单提交
点我试试
===================================================================
Document Object Model 文档对象模型,作用是通过JS获得和修改HTML标签的内容和样式。
常见操作:
- 获得网页中的元素
var element = document.getElementById(“元素ID”);
- 获得表单元素中的值
element .value
- 设置表单元素中的值
element .value = 值;
- 设置元素的样式
element.style.属性 = 值;
- 设置元素的内部HTML
element.innerHTML = 值;
- 创建标签
var element = document.createElement(“标签名称”);
- 添加子标签
标签.appendChild(子标签);
==================================================================
在前端验证表单内容的格式,减少服务器的压力.
表单验证步骤:
- 编写函数,判断表单元素的值格式是否正确,
如果不正确给用户一些提示并返回false
-
如果全部验证成功,返回true
-
函数在form标签的onsubmit事件中调用οnsubmit=“return 函数名()”
return的目的是将函数的返回值返回给表单,结果会影响表单是否提交
===================================================================
对字符串进行操作或验证的工具
JS中的正则表达式
定义:
var regex = /正则表达式/;
用法:
regex.test(待验证的字符串)
true验证通过,false失败
正则表达式的组成:
-
^ 匹配开头
-
$ 匹配结尾
/^正则表达式$/
常用通配符(元字符)
| 通配符 | 作用 |
| — | — |
| [abc] | 匹配a、b、c中任意一个 |
| [0-9] | 匹配范围0到9,还有如:[A-Z] 、[a-z] |
| \d | 匹配单个数字 |
| \w | 匹配单个字母、数字或下划线 |
量词(字符出现的次数)
| 量词 | 作用 |
| — | — |
| + | 匹配一次或一次以上 |
| * | 匹配0次或无限次 |
| ? | 匹配0次或1次 |
| {n} | 匹配n次,如:\d{5} 匹配五位数 |
| {n,m} | 匹配n到m次,如:\d{5,8} 匹配5到8位数 |
| {n,} | 匹配n次以上,如:\d{5,} 匹配5到n位数 |
案例:
手机号(1开头第二位数是3、5、7、8、9任意一个,后面九位数字):
/^1[35789]\d{9}$/
密码(6位字母数字和下划线组成)
/^\w{6}$/
验证码(4位字母和数字组成)
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
ript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。