1.关系:
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程(对html的内容属性元素,css样式等进行修改)
2.js学习思维导图
https://www.cnblogs.com/coco1s/p/3953653.html
3.基础
js代码位置:
- 在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
- <script type="text/javascript">type 属性不是必需的。
- JavaScript 是 HTML 中的默认脚本语言。
脚本位置:
- 1.head中
- 2.body中
- 3.外部脚本(外部脚本不能包含 <script> 标签)在html中用src引用
- ps:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
输出:
- 使用 window.alert() 写入警告框;
- 使用 document.write() 写入 HTML 输出;
- 使用 innerHTML 写入 HTML 元素;(更改 HTML 元素的 innerHTML 属性)
- 使用 console.log() 写入浏览器控制台
语法/语句/注释/变量/运算符/算数/赋值/数据类型/对象:
- JavaScript 语句是由 web 浏览器“执行”的“指令”;
- JavaScript 语句定义两种类型的值:混合值(字面量:数值,字符串“” ‘’)和变量值。
- JavaScript 使用 var 关键词来声明变量(存储数据的容器,不赋值就是undefined,如果重复声明某个一样名字的 JavaScript 变量,将不会丢它的值。变量都有动态类型),变量名字叫标识符:首字符必须是字母、下划线(-)或美元符号($)。typeof判断变量类型
- 注释//或/*。。。*/
- 练接字符串时+叫做级联运算符
- 数据类型:数字,字符串,布尔,对象var a={属性名:属性值,方法名:function(){ } } ,函数,null,undefined
- 对象:调用属性方式多种:名.属性
- 布尔是对象(如果用 new 关键词定义)
- 数字是对象(如果用 new 关键词定义)
- 字符串是对象(如果用 new 关键词定义)
- 日期永远都是对象
- 算术永远都是对象
- 正则表达式永远都是对象
- 数组永远都是对象
- 函数永远都是对象
- 对象永远都是对象
-
在 JavaScript 中,数组使用数字索引
var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
- 在 JavaScript 中,对象使用命名索引。
var obj = { name:"Bill Gates", age:62, city:"Seattle"};
-
对象类型:日期,数组数组[“”];数组名[0]
函数:
- JavaScript 函数会在某代码调用它时被执行
- 当事件发生时(当用户点击按钮时);当 JavaScript 代码调用时;自动的(自调用)
- 函数中声明的变量,会成为函数的局部变量
- 比值函数:并根据所返回的值(负、零或正值)对这些值进行排序
function(a, b){return a-b}
points.sort(function(a, b){return a - b});
事件:动作发生需要做的事
- 一般基于HTML事件,HTML 网页完成加载;HTML 输入字段被修改;HTML 按钮被点击
- HTML 允许向 HTML 元素添加事件处理程序
<button onclick="this.innerHTML=Date()或者调用函数displayDate()">现在的时间是?</button>
异常:
try {
供测试的代码块
}
catch(err) {
处理错误的代码块 throw "Too big"; 自定义
}
作用域:
let和const关键字:{let x;//那么仅在此代码块中为某个值} const是定义常量
4.应用
1.表单验证(正则表达式)
js正则表达式是构成搜索模式(search pattern)的字符序列。当您搜索文本中的数据时,您可使用搜索模式来描述您搜索的内容。
js正则表达式可用于执行所有类型的文本搜索和文本替换操作。
var patt = /w3school/i; w3school 是模式(pattern)(在搜索中使用)。i 是修饰符(把搜索修改为大小写不敏感)。检索
表单中:利用onsumbit(“return xxxx()”)函数里调用js函数; 若为false则不提交;