一、引入方式

1、内部脚本

2、外部脚本

二、基础语法

1、输出语句

2、定义变量类型

3、数据类型

4、运算符

（1）类型转换

5、函数

（1）方法一

（2）方法二

三、对象

1、Array数组

（1）定义

（2）特点

（3）数组常用方法

① length —— 数组长度

② forEach —— 遍历数组中有值的元素

简化版forEach 箭头函数

③ push —— 添加元素到数组末尾

④ splice —— 删除元素

2、String字符串

（1）定义

（2）字符串常用方法

① length —— 字符串长度

② charAt() —— 返回指定位置的字符

③ indexOf() —— 检索字符串下标

④ trim() —— 去除字符串两边空格

⑤ substring(strat,end) —— 提取字符串中两个指定索引间的字符

3、JSON

（1）JS自定义对象

（2）JSON定义

（3）JSON和JS互相转换方法

4、BOM 浏览器对象模型

（1）Window 浏览器窗口对象

① 属性

② 方法

（2）Navigator 浏览器对象

（3）Screen 屏幕对象

（4）History 历史记录对象

（5）Location 地址栏对象

5、DOM 文档对象模型

（1）Document 整个文本对象

① 根据id获取，返回单个Element对象

② 根据标签名获取，返回Element对象数组

③ 根据name属性获取，返回Element对象数组

④ 根据class属性获取，返回Element对象数组

（2）Element 元素对象

（3）Attribute 属性对象

（4）Text 文本对象

（5）Comment 注释对象

（6）DOM案例

四、事件监听

1、事件绑定

（1）通过HTML标签中的事件属性绑定

（2）通过DOM元素属性绑定

2、常见事件

3、案例

五、Vue 前端框架 - 双向数据绑定

1、vue快速入门

2、Vue常用指令

（1）v-bind v-model

① v-bind

② v-model

③ 效果演示

（2）v-on

（3）v-if v-show

① v-if

② v-show

③ 效果演示

（4）v-for

3、Vue案例

4、Vue生命周期

一、引入方式

1、内部脚本

代码必须位于<script></script>标签之间
可以在html文档中放置在任意地方，放置任意数量的<script></script>
一般把脚本置于<body>底部，可改善显示速度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title><script>alert('你在找这个框框吗？');</script></head>
<body></body>
</html>
2、外部脚本

外部JS文件只包含JS代码，不包含<script>标签
<script src="js/demo.js"></script>

二、基础语法

1、输出语句

浏览器弹出警告框
alert("Hello World！");
写入html，在浏览器显示
document.write("Hello World!");
写入浏览器控制台
console.log("Hello World!");

2、定义变量类型

var：可以存放类型不同的变量，全局变量，可以重复声明
let：局部变量，所声明的变量只在let关键字所在的代码块内有效，不允许重复声明
const：声明一个只读的常量，值不可改变

3、数据类型

number：数字
string：字符串，单双引皆可
boolean
null
undefined：当声明的变量未初始化时，该变量的默认值为undefined
使用 typeof 可以获取数据类型

4、运算符

== 会进行类型转换，===不会进行类型转换
var x=10;alert(a=='10);     //true
alert(a==='10');   //false
alert(a===10);     //true
（1）类型转换

其他类型转换为数字
alert(parseInt("12"));       //12
alert(parseInt("12ABC"));    //12
alert(parseInt("A12"));      //NaN

5、函数

（1）方法一

function add(a,b)
{return a+b;
}var x=add(10,20);
alert(x);

（2）方法二

var add=function(a,b)
{return a+b;
}var x=add(10,20);
alert(x);

三、对象

1、Array数组

（1）定义
var arr=new Array(1,2,3,4);var arr=[1,2,3,4];
（2）特点

数组长度可变，类型可变
var arr=new Array(1,2,3,4);
arr[10]=50;console.log(arr[10]);   //50
console.log(arr[9]);    //undefinearr[7]=true;
arr[6]="A";console.log(arr);
（3）数组常用方法

① length —— 数组长度
var arr=new Array(1,2,3,4);for(let i = 0; i< arr.length; i++) console.log(arr[i]+" ");
② forEach —— 遍历数组中有值的元素
var arr=new Array(1,2,3,4);
arr[10]=50;arr.forEach(function(e) {console.log(e);
});//输出 1 2 3 4 50
for循环遍历所有元素，包括undefine

简化版forEach 箭头函数
arr.forEach((e)=>{ console.log(e);
});
③ push —— 添加元素到数组末尾
    var arr=new Array(1,2,3,4);arr[10]=50;arr.push(7,8,9,10);console.log(arr);
④ splice —— 删除元素

splice(开始删除下标,删除个数)
    var arr=new Array(1,2,3,4);arr[10]=50;arr.splice(2,2); //删除3和4 splice(开始删除下标,删除个数)console.log(arr);

2、String字符串

（1）定义
    var s=new String("baby");var s1="consecutive";var s2='divine';
（2）字符串常用方法

① length —— 字符串长度
console.log(s.length);
② charAt() —— 返回指定位置的字符
console.log(s.charAt(2));
③ indexOf() —— 检索字符串下标
    var s1="consecutive";var s2='divine';console.log(s1.indexOf("ns"));  //2
④ trim() —— 去除字符串两边空格
    var s=new String("    baby    ");var s1="consecutive";var s2='divine';var t=s.trim();console.log(t);  //baby
⑤ substring(strat,end) —— 提取字符串中两个指定索引间的字符

含头不含尾
    var s=new String("    congratulation!    ");var s1="consecutive";var s2='divine';var t=s.trim();console.log(t.substring(1,6));  //ongra

3、JSON

（1）JS自定义对象
    var user={name:"Roye",age:20,gender:"女",eat() //括号内填参数列表{alert("吃饭饭！");}}alert(user.name);alert(user.age);alert(user.gender);user.eat();
（2）JSON定义

JSON就是通过JS对象标记法书写的文本，多用于数据载体，在网络进行数据传输，比如前后端的信息传输
var 变量名='{"key1":value1,"key2":value2}';var userStr='{"name":"Tom","age":18,"addr":["西安","北京"]}';
value数据类型分为
数据类型 形式
数字整数、浮点数
字符串双引号
逻辑值 true false
数组方括号
对象花括号
null

value数据类型分为
数据类型	形式
数字	整数、浮点数
字符串	双引号
逻辑值	true false
数组	方括号
对象	花括号
null

（3）JSON和JS互相转换方法

    //将JSON字符串转换为JS对象var jsobject=JSON.parse(userStr);//将JS对象转换为JSON字符串var jsonstr=JSON.stringify(jsobject);

    var userStr='{"name":"Tom","age":18,"addr":["西安","北京"]}';//将JSON字符串转换为JS对象var obj=JSON.parse(userStr);alert(obj.name);

    //将JS对象转换为JSON字符串var jsonstr=JSON.stringify(obj);alert(jsonstr);

4、BOM 浏览器对象模型

BOM：允许JS与浏览器对话，JS将浏览器的各部分封装为对象

（1）Window 浏览器窗口对象

① 属性
history：对History对象的只读引用
location：用于窗口或框架的Location对象
location.href 获取网页地址
跳转到其他网页
    alert(location.href);location.href="https://blog.csdn.net/weixin_61639349?type=blog";
navigator：对Navigator对象的只读引用（导航仪）
② 方法
alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认、取消按钮的对话框
点击确认：true，点击取消：false
    var flag=confirm("确认要删除吗？");alert(flag);
setInterval()：按照指定周期（以毫秒计时）来调用函数、计算表达式
    var i=0;setInterval(() => {i++;console.log("定时器执行了"+i+"次");}, 2000);
setTimeout()：在指定毫秒数后弹出一次
    setTimeout(() => {alert("js");},3000);
（2）Navigator 浏览器对象

（3）Screen 屏幕对象

（4）History 历史记录对象

（5）Location 地址栏对象

5、DOM 文档对象模型

DOM：将标记语言的各部分封装为对应的对象

JS通过DOM，可以对HTML进行操作：

改变HTML元素内容
改变HTML元素样式CSS
对HTML DOM事件作出反应
添加和删除HTML元素

（1）Document 整个文本对象

① 根据id获取，返回单个Element对象
var h1=document.getElementById('h1');
② 根据标签名获取，返回Element对象数组
var tag=document.getElementsByTagName('tag');
③ 根据name属性获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');
④ 根据class属性获取，返回Element对象数组
var clss=document.getElementsByClassName('cls');
<body><div class="cls">深海鳕鱼堡</div><br><div class="cls">双层芝士牛堡</div><br><input type="checkbox" name="food"> 生椰拿铁<input type="checkbox" name="food"> 爆浆阿华田奶茶<input type="checkbox" name="food"> 椰香咖喱鸡饭
</body></html><script>//将【深海鳕鱼堡】标签更改为【经典意式肉酱面】var div=document.getElementsByClassName("cls");var t=div[0];t.innerHTML="经典意式肉酱面";  //将文本内容更改为新的
</script>
（2）Element 元素对象

（3）Attribute 属性对象

（4）Text 文本对象

（5）Comment 注释对象

（6）DOM案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title><style>#h1{display: block;margin: 0 auto;}.cls{text-align: center;}</style>
</head><body><img id='h1' src="./dpimg/off.gif"><br><br><div class="cls">深海鳕鱼堡</div><br><div class="cls">双层芝士牛堡</div><br><input type="checkbox" name="food"> 生椰拿铁<input type="checkbox" name="food"> 爆浆阿华田奶茶<input type="checkbox" name="food"> 椰香咖喱鸡饭
</body></html><script>//1、将灯泡点亮var img=document.getElementById("h1");img.src = "./dpimg/on.gif";//2、在所有div标签后加上字体var divs=document.getElementsByClassName("cls");for (let i = 0;i< divs.length; i++)  {var t=divs[i];if(i==0) t.innerHTML+=" <font color='red'>今日特卖七折起！</font>";else t.innerHTML+=" <font color='red'>超人气爆款！</font>";}//3、使复选框呈现选中状态var ins=document.getElementsByName("food");for (let i = 0; i < ins.length; i++) {const t = ins[i];t.checked=true;}</script>

四、事件监听

1、事件绑定

（1）通过HTML标签中的事件属性绑定

<body><input type="button" id="bt1" value="按钮1" onclick="on()">
</body><script>function on(){alert("哎呀呀！我被点击啦！");}
</script>
</html>

（2）通过DOM元素属性绑定

<body><input type="button" id="bt2" value="按钮2">
</body><script>var t=document.getElementById("bt2").onclick=function(){alert("不要点我！痛啊！");}
</script>
</html>

2、常见事件

常见事件
事件名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfoucs 元素获得焦点
onload 某个页面或图像加载完成
onsubmit 当表单提交时触发
onkeydown 键盘某个键被按下
onmouseover 鼠标被移到某元素上
onmouseout 鼠标从某元素移开

常见事件
事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfoucs	元素获得焦点
onload	某个页面或图像加载完成
onsubmit	当表单提交时触发
onkeydown	键盘某个键被按下
onmouseover	鼠标被移到某元素上
onmouseout	鼠标从某元素移开

3、案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title><style>#h1{display: block;margin: 0 auto;}.cls{text-align: center;}.center{text-align: center;}</style>
</head><body><img id='h1' src="./dpimg/off.gif"><br><br><input type="button" value="点亮" onclick="on()" id="h1"><br><input type="button" value="熄灭" onclick="off()" id="h1"><br>    <input type="text" id="h1" name="area" value="ROYE HAPPY" onfocus="lower()" onblur="upper()"><br><div class="cls">深海鳕鱼堡</div><br><div class="cls">双层芝士牛堡</div><br><div class="center"><input type="checkbox" name="food"> 生椰拿铁<input type="checkbox" name="food"> 爆浆阿华田奶茶<input type="checkbox" name="food"> 椰香咖喱鸡饭<br><br></div><div class="center"><input type="button" value="全选" onclick="checkAll()" ><input type="button" value="反选" onclick="checkNull()"></div>
</body></html><script>//1、通过按钮控制灯泡亮暗function on(){var img=document.getElementById("h1"); //获取灯泡图片img.src="./dpimg/on.gif";}function off(){var img=document.getElementById("h1");img.src="./dpimg/off.gif";}//2、输入框聚焦后，显示小写；离焦后，显示大写function lower(){var txt=document.getElementsByName("area");txt[0].value=txt[0].value.toLowerCase();}function upper(){var txt=document.getElementsByName("area");  // 注意用name获取对象，获取的是数组！txt[0].value=txt[0].value.toUpperCase(); }//3、在所有div标签后加上字体var divs=document.getElementsByClassName("cls");for (let i = 0;i< divs.length; i++)  {var t=divs[i];if(i==0) t.innerHTML+=" <font color='red'>今日特卖七折起！</font>";else t.innerHTML+=" <font color='red'>超人气爆款！</font>";}//4、全选：全部打勾；反选：全部取消var ck=document.getElementsByName("food");function checkAll(){for (let i = 0; i < ck.length; i++) {const e = ck[i];e.checked=true;}}function checkNull(){for (let i = 0; i<ck.length; i++) {const e = ck[i];e.checked=false;}}</script>

五、Vue 前端框架 - 双向数据绑定

1、vue快速入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="./vue.js"></script> <!-- 引入js vue文件 -->
</head><body><!-- 编写视图层展示 --><div id="app"><input type="text" v-model="message">{{message}}    <!-- 插值表达式 --></div>
</body><script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{message:"Hello Vue"}})
</script>
</html>

2、Vue常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href，css样式
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性渲染某元素，判定为true渲染，否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历

（1）v-bind v-model

① v-bind

为 HTML标签 绑定属性值，如设置href，css样式

<a v-bind:href="url"> 容也同学 </a><a :href="url"> 容也同学 </a>

② v-model

在表单元素上创建双向数据绑定

<input type="text" v-model="url">

③ 效果演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="./vue.js"></script> <!-- 引入js vue文件 -->
</head><body><!-- 编写视图层 --><div id="app"><a :href="url">Roye的csdn博客</a><br><a v-bind:href="url">神秘链接</a><br><input type="text" v-model="url"></div>
</body><script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{url:"https://blog.csdn.net/weixin_61639349?spm=1000.2115.3001.5343"}})
</script>
</html>

当更改文本框的链接内容时，前两个链接地址也会跟着改变

跟浏览器网站的搜索框是不是很像！

（2）v-on

为HTML标签绑定事件

<input type="button" value="按钮1" v-on:click="handle()">
<input type="button" value="按钮2" @click="handle()">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="./vue.js"></script> <!-- 引入js vue文件 -->
</head><body><!-- 编写视图层 --><div id="app"><input type="button" value="按钮1" v-on:click="handle()"><input type="button" value="按钮2" @click="handle()">        </div>
</body><script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{url:"https://blog.csdn.net/weixin_61639349?spm=1000.2115.3001.5343"},methods:{handle:function(){alert('坚持就会胜利！');}}})
</script>
</html>

（3）v-if v-show

① v-if

按条件渲染

<span v-if="age<=35">年轻人</span>       
<span v-else-if="age>35 && age<60">中年人</span>
<span v-else>老年人</span>

② v-show

按条件展示

<span v-show="age<=35">年轻人</span>

③ 效果演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="./vue.js"></script> <!-- 引入js vue文件 -->
</head><body><!-- 编写视图层 --><div id="app">年龄<input type="text" v-model="age">经判定，为：<span v-if="age<=35">年轻人</span>       <span v-else-if="age>35 && age<60">中年人</span><span v-else>老年人</span><br><br>年龄<input type="text" v-model="age">经判定，为:<span v-show="age<=35">年轻人</span><span v-show="age>35 && age<60">中年人</span><span v-show="age>=60">老年人</span></div>
</body><script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{age:20,},methods:{}})
</script>
</html>

（4）v-for

<div v-for="(元素变量名-自定义 , 下标-从0开始) in 定义的数组"> {{显示的视图}}</div>

<div v-for="x in addr">{{x}}</div><br><br><div v-for="(x,i) in addr">{{i+1}}:{{x}}</div>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="./vue.js"></script> <!-- 引入js vue文件 -->
</head><body><!-- 编写视图层 --><div id="app"><div v-for="x in addr">{{x}}</div><br><br><div v-for="(x,i) in addr">{{i+1}}:{{x}}</div></div>
</body><script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{addr:["西安","北京","上海","福建"]},methods:{}})
</script>
</html>

3、Vue案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="./vue.js"></script> <!-- 引入js vue文件 -->
</head><body><!-- 编写视图层 --><div id="app"><table border="1" cellspacing="0" width="800px"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(x,i) in users">   <!--遍历展示data的数据 --><td>{{i+1}}</td><td>{{x.name}}</td><td>{{x.age}}</td><td><span v-if="x.gender==1">男</span><span v-else>女</span></td><td>{{x.score}}</td><td><span v-if="x.score>=90">优秀</span><span v-else-if="x.score<90 && x.score>=60">及格</span><span v-else style="color: red;">不及格</span></td></tr></table></div>
</body><script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{users:[{name:"张曼",age:42,gender:2,score:78},{name:"百雀羚",age:28,gender:2,score:59},{name:"张晓军",age:60,gender:1,score:45},{name:"容宝",age:20,gender:2,score:100}]},methods:{}})
</script>
</html>

4、Vue生命周期

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
update 更新后
beforeDestory 销毁前
destoryed 销毁后

每触发一个生命周期，会自动执行一个生命周期的方法
<script>//定义vue对象new Vue({el:"#app",  //vue接管的区域data:{},methods:{},mounted(){alert("挂载完成！");}})
</script>
mounted：挂载完成，vue初始化成功，html页面渲染成功。（发送请求到服务端，加载数据）

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
update	更新后
beforeDestory	销毁前
destoryed	销毁后

【javaweb】学习日记Day2 - JavaScript入门

一、引入方式

1、内部脚本

2、外部脚本

二、基础语法

1、输出语句

2、定义变量类型

3、数据类型

4、运算符

（1）类型转换

5、函数

（1）方法一

（2）方法二

三、对象

1、Array数组

（1）定义

（2）特点

（3）数组常用方法

① length —— 数组长度

② forEach —— 遍历数组中有值的元素

简化版forEach 箭头函数

③ push —— 添加元素到数组末尾

④ splice —— 删除元素

2、String字符串

（1）定义

（2）字符串常用方法

① length —— 字符串长度

② charAt() —— 返回指定位置的字符

③ indexOf() —— 检索字符串下标

④ trim() —— 去除字符串两边空格

⑤ substring(strat,end) —— 提取字符串中两个指定索引间的字符

3、JSON

（1）JS自定义对象

（2）JSON定义

（3）JSON和JS互相转换方法

4、BOM 浏览器对象模型

（1）Window 浏览器窗口对象

① 属性

② 方法

（2）Navigator 浏览器对象

（3）Screen 屏幕对象

（4）History 历史记录对象

（5）Location 地址栏对象

5、DOM 文档对象模型

（1）Document 整个文本对象

① 根据id获取，返回单个Element对象

② 根据标签名获取，返回Element对象数组

③ 根据name属性获取，返回Element对象数组

④ 根据class属性获取，返回Element对象数组

（2）Element 元素对象

（3）Attribute 属性对象

（4）Text 文本对象

（5）Comment 注释对象

（6）DOM案例

四、事件监听

1、事件绑定

（1）通过HTML标签中的事件属性绑定

（2）通过DOM元素属性绑定

2、常见事件

3、案例

五、Vue 前端框架 - 双向数据绑定

1、vue快速入门

2、Vue常用指令

（1）v-bind v-model

① v-bind

② v-model

③ 效果演示

（2）v-on

（3）v-if v-show

① v-if

② v-show

③ 效果演示

（4）v-for

3、Vue案例

4、Vue生命周期

相关文章