JavaScript

是完全不同的语言#xff0c;不论是概念还是设计。

但是基础语法类似。

JavaScript简称JS

是一门跨平台、面向对象的脚本语言。

是用来控制网页行为的它能使网页可交互。

JavaScript

ECMA国际前身为欧洲计算机制造商协会制定了标准化的脚本程序设计语言

ECMAScript这种语言得到广泛应用。

而JavaScript是遵守ECMAScript的标准的。

JavaScript引入方式

可以放在任意地方比如放到html/html标签外面也是可以的。

JS代码定义在外部

说明在js中我们var声明的变量可以接受任何数据类型的值允许重复声明。

并且var声明的变量的作用于是全局的在代码块外依然能访问到x的值。

数据类型

这里注意第三行遇到A转不了数值了直接转成12第四行一开始就遇到A直接就转不了。

流程控制语句

流程控制语句ifswitchfor等和java保持一致此处不再演示。

第一种语法格式

注意形式参数不需要类型。

因为JavaScript是弱类型语言。

返回值也不需要定义类型可以在函数内部直接使用return返回即可。

调用函数名称(实际参数列表)

第一类基本对象,我们主要学习Array和JSON和String

第三类DOM对象JavaScript中将html的每一个标签都封装成一个对象

基本对象

注意与java中不一样的是JavaScript中数组相当于java中的集合数组的长度是可以变化的。

而且

JavaScript是弱数据类型的语言所以数组中可以存储任意数据类型的值。

代码示例

注意索引10前面好几个位置没有初始化所以输出undefined。

方法代码示例

当然了在ES6中引入箭头函数的写法语法类似java中lambda表达式修改上述代码如下

这里注意

charAt()函数用于返回在指定索引位置的字符函数的参数就是索引。

indexOf()函数用于检索指定内容在字符串中的索引位置的返回值是索引参数是指定的内容。

JSON

NotationJavaScript对象标记法。

是通过JavaScript标

其中key必须使用引号并且是双引号标记value可以是任意数据类型。

那么json这种数据格式的文本到底应用在企业开发的什么地方呢--

经常用来作为前后台交互的数据载体。

-----用XML已经很少了更多的是使用JSON了。

浏览器输出结果如下

为什么呢因为上述是一个json字符串不是json对象所以我们需要借助如下函数来进行json字符串和json对象的转换。

此时浏览器输出结果如下

当然了我们也可以通过如下函数将json对象再次转换成json字符串。

添加如下代码

浏览器输出结果如图所示

是JavaScript将浏览器的各个组成部分封装成了对象。

我们要操作浏览器的部分功能可以通过操作BOM对象的相关属性或者函数来完成。

http://www.baidu.com

我们就可以通过BOM中提供的location对象的href属性来完成代码如下

location.hrefhttp://www.baidu.com

Window

window对象指的是浏览器窗口对象是JavaScript的全部对象所以对于window对象我们可以直

接使用并且对于window对象的方法和属性我们可以省略window.例如我们之前学习的alert()

window.alert(hello);

confirm()函数弹出确认框并且提供用户2个按钮分别是确认和取消。

添加如下代码

但是我们怎么知道用户点击了确认还是取消呢所以这个函数有一个返回值当用户点击确认时

返回true点击取消时返回false。

我们根据返回值来决定是否执行后续操作。

修改代码如下再次运行可以查看返回值true或者false

var

alert(flag);setInterval(fn,毫秒值)定时器用于周期性的执行某个功能并且是循环执行。

该函数需要传递2个参数

毫秒值间隔时间

setTimeout(function(){alert(JS);

},3000);

location是指代浏览器的地址栏对象对于这个对象我们常用的是href属性用于获取或者设置浏

//获取浏览器地址栏信息

浏览器效果首先弹框展示浏览器地址栏信息然后点击确定后因为我们设置了地址栏信息所以浏览器跳转到传智首页。

DOM对象

获取DOM对象HTML中的Element对象可以通过Document对象获取而Document对象是通过window对象获取的。

document对象提供的用于获取Element元素对象的api如下表所示

根据标签的id属性获取标签对象id是唯一的所以获取到是单个标签对象。

document.getElementsByTagName()

根据标签的name的属性值获取标签对象name属性值可以重复所以返回值是一个数组。

document.getElementsByClassName()

根据标签的class属性值获取标签对象class属性值也可以重复返回值是数组。

我们可以通过div标签对象的innerHTML属性来修改标签的内容。

div1.innerHTML

这里还有一个要注意的是双引号里面可以写html语法比如font标签设置颜色等等。

JavaScript事件

是一套前端框架免除原生JavaScript中的DOM操作简化书写。

基于MVVM(Model-View-ViewModel)思想实现数据的双向绑定将编程的关注点放在数据上。

Vue.js

基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。

框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。

基于框架进行开发更加快捷、更加高效。

快速入门

链接https://pan.baidu.com/s/1Rzr_A94b5CCzZfnCRL1QXg?pwd8888

提取码8888

在项目中可以先创建一个文件夹然后把vue.js文件拖到项目中你创建的文件夹中。

在电脑中找到我们的项目文件夹进去找到你创建的文件夹拖进去就行了

在输入框里继续输入

data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有

表单项标签所以双向绑定一定是使用在表单项标签上的。

编写如下代码

input

v-on语法给标签的事件绑定的函数必须是vue对象中声明的函数。

v-if和v-show

initial-scale1.0titleVue-指令-v-if与v-show/titlescript

srcjs/vue.js/script

v-else老年人(60及以上)/spanbrbr年龄input

typetext

v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。

配图如下

v-for

有时我们遍历时需要使用索引那么v-for指令遍历的语法格式如下

代码示例

指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。

其完整的生命周期如

下图所示

运行结果如下我们发现自动打印了这句话因为页面加载完成vue对象创建并且完成了挂载此时自动触发mounted所绑定的钩子函数然后自动执行弹框。