布局标签用来设置css样式，相当于两张白纸提供给你，你自己可以在上面设置任意样式。
<script>
alert("hello JS-")
</script>
提示
在HTML文档中可以在任意地方，放置任意数量的
window.alert()写入警告框document.write()写入HTML输出console.log()写入浏览器控制台var
var关键字（variable的缩写）来声明变量var test = 20;
test = "张三",
var是全局变量，一处定义，全局可用let
let关键字来定义变量，它的用法类似于var，但是:
const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。数量类型
JavaScript中分为：原始类型和引用类型
五种原始类型：
使用typeof运算法可以获取数据类型
var age = 3；
//此处打印出来是age的数据类型为：number
alert(typeof age);
类型转换
其他类型转换为number：
parseInt()
true转换为1，false 转为0。其他类型转换为boolean：
0和NaN转为false ，其他的数字转换truefalse ，其他的字符转为true。false
false
注意在JavaScript下列代码1和2的写法等价
var flag = ""
if(flag != null && flag.length >0) //1
if(flag)//2
//在JavaScript中1和2的写法等价
这里与java运算符一样，不过多赘述。
需要注意==和===的区别
==先判断类型是否一样，如果不一样，则进行类型转换后，再比较===先判断类是否一样，不一样直接返回FALSE，若一样才再进行比较var age1 = 20; //number
var age2 = "20";//String
alert(age1 == age2); //true
alert(age1 === age2);//false
JavaScript的流程控制语句和Java的一样，这里不再赘述，需要注意的是，在使用流程控制语句的时候，变量的定义建议使用let关键字，局部定义
函数（方法）是被设计为执行特定任务的代码块
function关键字进行定义，有两种方式方式一
/**
function functionName(参数1，参数2...){
函数体
}
*/
//函数定义
function add(a,b){
return a+b;
}
//调用函数
let result = add(1,2);//返回值为3
注意与Java不同的是
方式二
/**
var functionName = function(参数1，参数2...){
函数体
}
*/
//函数定义
var add= function(a,b){
return a+b;
}
//调用函数
let result = add(1,2);//返回值为3
//此外函数调用中可以传递任意个参数
let result = add(1,2,3);//返回值仍然为3
//只传递了一个参数
let result = add(1);//返回值为1+NaN = NaN
Array
定义
var 变量名 = new Array(元素列表);//方式一
var 变量名 = [元素列表];//方式二
var arr = new Array(1,2,3);//方式1
var arr = [1,2,3];//方式2
//使用
arr[0] = 1;
注意，JavaScript中数组是变长和变类型的，即声明了数组长度为3的数组，也可使用超过三的下标
//变长
var arr3 = [1,2,3];
arr[10] = 3;//这里也不会报错，正常执行
//变类型
var arr3 = [1,2,3];
arr[1] = "abc";//这里也不会报错，正常执行
Array也是一个对象
String
定义
var 变量名 = new String(s);//方式一
var 变量名 = s;//方式二
var str= new Array("hello");//方式1
var str= "hello";//方式2
var str= 'hello';//方式3
属性
自定义对象
格式
var 变量名 = {
属性名称1：属性值1，
属性名称2：属性值2，
...
函数名称：function（形参列表）{}
...
}
var person = {
name:"zhangsan",
age:23,
eat:function(){
alert("干饭")
}
}
Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装为对象
下面逐一介绍
Window 浏览器窗口对象（是其他四个的包含，大范围）
window.alert("abc");
1.alert()//不再赘述
2.confirm()//其同样弹出一个windows框吗，但是有确认和取消按钮，可以接收两个值，true和false
3.setTimeout(function,毫秒值)//在指定的时间间隔后执行传入的函数，只执行一次
setTimeout(function(){
alert("只执行一次");
},2000)
4.setInterval(function,毫秒值)//在指定的时间间隔后执行传入的函数，重复执行
setInterval(function(){
alert("重复执行");
},2000)
Navigator：浏览器对象，不常用，可以上官方文档查阅，不赘述
Screen：屏幕对象，不常用，可以上官方文档查阅，不赘述
History：历史记录对象
获取 ：使用window.history获取，其中window.可以省略
window.history.方法();
history.方法();
方法
Location：地址栏对象（网址）
获取 ：使用window.location获取，其中window.可以省略
window.location.方法();
location.方法();
方法
<img>
<input type = 'button'>
getElementById：根据id属性值获取，返回一个Element对象
<img id="light" src = "../imgs/off.gif" >
var img = document.getElementById("light")
getElementByTagName：根据标签名称获取，返回一个Element对象数组
<div class="cls">xiaowang</div>
<div class="cls">xiangli</div>
var divs= document.getElementByTagName("div")
for(let i = 0; i<divs.length; i++){
alert(divs[i]);
}
getElementByName：根据name属性值获取，返回一个Element对象数组
<imput type="checkbox" name="hobby">电影
<imput type="checkbox" name="hobby">旅游
<imput type="checkbox" name="hobby">邮箱
var hobbys= document.getElementByTagName("hobby")
for(let i = 0; i<hobbys.length; i++){
alert(hobbys[i]);
}
getElementByClassName：根据class属性值获取，返回一个Element对象数组
<div class="cls">xiaowang</div>
<div class="cls">xiangli</div>
var clss= document.getElementByTagName("cls")
for(let i = 0; i<clss.length; i++){
alert(clss[i]);
}
注：非常多，因此查看文档使用
方式1：通过HTML标签中的时间属性进行绑定
<input type = "button" onclick='on()'>
function on(){
alert("我被点了")
}
方式2通过DOM元素属性绑定
<input type = "button" id="btn">
document.getElementByld("btn").onclick = funciton(){
alert("我被点了")
}
此处只是给出查询地方，需要用请自行到官方文档查找查找
var reg = /^\w{6,12}$/;
var reg = new RegExp(/^\w{6,12}$/);
以上包含了基础的HTML+CSS+JavaScript入门，前端还有大量知识需要学习，这里知识作为以为后端程序员，至少需要了解的前端知识，有了这些基础，在实际开发中遇到其他前端问题，查阅官方文档即可，文档地址：W3C
以上仅是个人在学习中的学习笔记，供自己复习使用，也供大家参考，欢迎各位小伙伴提出问题和不足，互相交流，如果对你有帮助，请多多点赞，收藏，关注，谢谢！！！