一.什么是JavaScript不重要JavaScript简称JS是一门跨平台、面向对象的脚本语言。是用来控制网页行为的它能使网页进行可交互操作不论是概念还是设计JavaScript和Java是两种完全不同的语言但是基础语法类似JavaScript在1995年由Brendan Eich发明并在1997年称为ECMA标准ECMAScriptES6是由最新的JavasScript版本发布于2015年二.JS的引入方式内部脚本将JS代码定义在HTML页面中JavaScript代码必须位于script/script标签之间在HTML文档中可以在任何地方放置任意数量的script一般会把脚本置于body元素的底部可以改善显示速度script alter(Hello javaScript) /script外部脚本将JS代码定义在外部JS文件中然后引入到HTML页面中外部JS文件中只包含JS代码不包含scriptscript标签不能闭合script src js/demo.js/script alert(Hello World)三.JS基础语法1.书写语法区分大小写与Java一样变量名、函数名以及其他一切东西都是区分大小写的每行结尾的分号可有可无注释单行注释//注释内容多行注释/*注释内容*/大括号表示代码块判断语句 if(count 3){ alert(count); }2.输出语句使用window.alert()写入警告框使用document.write()写入HTML输出使用console.log()写入浏览器控制台script window.alert(hello javascript); document.write(hello); console.log(hello); /script3.变量JavaScript中用var关键字variable的缩写来声明变量特点作用域比较大作为全局变量可以被重复定义JavaScript是一门弱类型语言变量可以存放不同类型的值变量名需要遵循以下规则组成字符可以是任何字母、数字、下划线_或美元符号$数字不能开头建议使用驼峰命名var a 20; a 张三;注意事项在es6中新增了两个关键字let和constlet用法类似于var但所声明的变量只在let关键字所在的代码块内有效即作为局部变量且不允许重复声明const用来声明一个只读的常量。一旦声明常量的值就不能被改变4.数据类型、运算符、流程控制语句1数据类型在JavasScript中分为原始类型和引用类型原始类型number数字整数、小数、NaNNot a Numberstring字符串单双引皆可boolean布尔。true、falsenull对象为空undefined当声明的变量未初始化时该变量的默认值是undefined使用typeof运算符可以获取数据类型var a 20 alerttypeof a2运算符类型转换字符串类型转为数字将字符串字面值转为数字。如果字面值不是数字则转为NaN其他类型转为数字 alertparseInt“12”; //12 alertparseInt“12A45”;//12 alertparseInt“A45”; //NaNnot a number其他类型转为booleanNumber0和NaN为false其他均转为trueString空字符串为false其他均转为trueNull和undefined均转为false3流程控制以上所有流程控制语句使用方法均和Java中一致如果忘记可以点开以下链接复习Java零基础学习Day04---判断和循环5.函数介绍函数方法是被设计为执行特定任务的代码块定义JavaScript函数通过function关键字进行定义语法为function functionName参数1参数2..{ //要执行的代码 }注意形式参数不需要类型。因为JavaScript是弱类型语言返回值也不需要定义类型可以在函数内部直接使用return返回即可调用函数名称实际参数列表定义方式1function addab{ return ab } var result add1020 alertresult定义方式2var functionName function参数1参数2...{ //要执行的代码 }var add functionab{ return ab } var result add1020 alertresult注JS中函数调用可以传递任意个数的参数6.对象1Array数组注JavaScript中的数组相当于Java中的集合数组的长度是可变的而JavaScript是弱类型所以可以存储任意类型的数据。aff.forEach(function(e){ console.log(e); }) arr.forEach((e) { console.log(e); })2String3JSONJavaScript自定义对象JSON-介绍概念JavaScript Object NotationJavaScript对象标记法JSON是通过JavaScript对象标记法书写的文本由于语法简单层次结构鲜明现多用于数据载体在网络中进行数据传输例如前后端的请求与响应注JSON对象中定义外面必须有个单引号key值必须有双引号value值根据情况改变4BOM概念浏览器对象模型允许JavaScript与浏览器对话JavaScript将浏览器的各个组成部分封装成对象。组成具体要掌握标红的Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Location地址栏对象获取 window.alert(Hello BOM); alert(Hello BOM window); 方法 confirm - 对话框 --确认ture取消false var flag confirm(您确认删除该记录吗); alert(flag); 定时器-setInterval -- 周期性的执行某一个函数 var i 0 setIntervalfunction{ i console.log(定时器执行了i次) }2000代表每隔2秒执行一次 定时器-setTimeout -- 延迟指定时间执行了一次后续不会再执行 setTimeoutfunction{ alertJS; alert(location.href); 先执行上一条语句输出后跳转到新的网址页面 loaction.href https://www.baidu.cn5DOMdom主要关注两点第一点是如何获取这个元素。第二点是如何调用这个元素中的属性or方法从而来操纵html的元素对象方法和属性查询参考手册。方法和属性查询参考手册https://www.w3school.com.cn/index.html7.JS事件监听事件HTML事件是发生在HTML元素上的“事情”比如按钮被点击鼠标移动到元素上按下键盘按键事件监听JavaScript可以在事件被侦测到时执行代码1事件绑定2常见事件四.Vue1.什么是VueVue是一套前端框架免除原生JavaScript中的DOM操作简化书写基于MVVM(Model-View-ViewModel)思想实现数据的双向绑定将编程的关注点放在数据上官网https://v2.cn.vuejs.org/作用是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷高效2.Vue的快速入门操作为什么能直接将数据模型的数据展示出来呢因为使用到了一个指令 v-model这是进行数据绑定的指令一旦进行了数据绑定那么数据模型中的数据就会在视图层中显示出来数据模型的数据变化也会影响视图视图层中的数据变化也会影响数据模型双向影响。3.常用指令v-model作用在表单元素上使用双向数据绑定。可以方便的获取 or 设置 表单项数据语法v-model “变量名”注通过v-bind或者v-model绑定的变量必须在数据模型中声明,插值表达式不能直接在标签中。注v-else-if必须出现在v-if之后可以出现多个v-else必须出现在v-if/v-else-if之后4.生命周期生命周期指一个对象从创建到销毁的整个过程生命周期的八个阶段每触发一个生命周期事件会自动执行一个生命周期方法钩子