深圳市住房建设局网站怎么打不开,网页制作如何新建站点,有没有好的网站可以学做头发,网站建设问题清单什么是JavaScript#xff1f;
JavaScript#xff1a;简称Js,是一门跨平台、面向对象的脚本语言。是用来控制网页行为的#xff0c;它能使网页可交互
JavaScript和Java是完全不同的语言#xff0c;无论是概念还是设计。但是基础语法类似。
JavaScript JavaScript引入方式…什么是JavaScript
JavaScript简称Js,是一门跨平台、面向对象的脚本语言。是用来控制网页行为的它能使网页可交互
JavaScript和Java是完全不同的语言无论是概念还是设计。但是基础语法类似。
JavaScript JavaScript引入方式
内部脚本将JS代码定义在HTML页面中
JavaScript代码必须位于script/script标签之间在HTML文档中可以在任意地方放置任意数量的script一般会把脚本放置于body元素的底部可改善显示速度
外部脚本将JS代码定义在外部JS文件中然后引入到HTML页面中
外部JS文件中只包含JS代码不包含script标签script不能自闭合 JS基础语法
区分大小写与Java一样变量名、函数名以及其他一切东西都是区分大小写的。每行结尾的分号可有可无,但是结尾的分号建议写上。注释单行注释//注释内容多行注释/**/大括号代表代码块 if(count3){alert(count)}
JS输出语句
使用windows.alert()写入警告框使用document.write()写入HTML输出使用console.log()写入浏览器控制台
JS变量
JavaScript中用var关键字variable的缩写来声明变量JavaScript是一门弱类型语言变量可以存放不同类型的值变量名需要遵循如下规则 组成字符可以是任何字母、数字、下划线_、或者美元符号$数字不能开头建议使用驼峰命名
通过var定义的变量的特点
作用域比较大全局变量可重复定义 注意事项新增let关键字来定义变量用法和var类似但是let所声明的变量只在let关键字所在代码块内有效且不允许重复声明。 const关键字用来声明一个只读的常量。一旦声明常量的值就不能改变。 JavaScript的数据类型
JS中的数据类型分为原始数据类型和引用数据类型
原始数据类型 number数字整数、小数、NaNstring字符串单双引皆可boolean布尔。truefalsenull对象为空undefined当声明的变量未初始化时该变量的默认值时undefined
使用typeof可以获取数据的数据类型 JS中的运算符
:会先进行类型比较如果类型不一样先将类型转化一致再进行比较 不会进行类型转换 类型转换 字符串转为数字将字符串字面值转为数字。如果字面值不是数字则转为NaN其他类型转为boolean Number0和NaN为false其他均为trueString空字符串为false其他均为trueNull和undefined均转为false 函数是被设计为执行特定任务的代码块。
函数定义JavaScript函数通过function关键字进行定义语法为
function functionName(参数1, 参数2) {//要执行的代码
}注意
形参不需要类型。因为JS是弱类型语言返回值也不需要定义类型可以在函数内部直接使用return返回即可调用函数名称(实参列表)
script//定义函数function add(a, b) {return a b;}result add(10, 20);alert(result);
/script定义方式二
var functionName function(参数1, 参数2) {//要执行的代码
}JS中的对象
Array JS中Array对象使用了定义数组的。 定义
var 变量名new Array(元素列表);
var 变量名[元素列表]var arrnew Array(1,2,3,4);
var arr[1, 2, 3, 4];Js中的数组类似Java中的集合长度可变类型可变。 for循环和for-Each的区别for循环遍历所有元素for-each只遍历数组里面有值的元素.
ES6中对于函数的简化如下:
var arr - [1, 2, 3, 4]
arr.forEach(function(e){console(e);
})
arr.forEach((e) {console(e);
})String对象
和Array对象类似,创建String对象也有两种方式
var 变量名 new String(...); //方式一
var 变量名 ; //方式二var str new String(小明);
var str 小明;JSON对象
Javascript自定义对象: 定义格式:
var 对象名 {属性名1: 属性值1,属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}
};var user {name:Tom,age:20,gender:male,eat:function() {alert(用膳);}/*这样定义方法也是可以的ear () {}*/
};JSON:JavaScript Object Notation,JavaScript对象标记法,json就是通过JavaScript对象标记法书写的文本.
json中所有的key必须使用(双引号)引起来
{name:Tom,age:20,gender:male,
}json语法简单,层次结构鲜明,多用于数据载体,在网络中进行数据传输. json基础语法:
定义:
var 变量名 {key1:value1, key2:value2};
var userStr {name:Jerry, age:18, addr:[北京, 上海, 西安]}JSON字符串转化为JS对象
var jsObject JSON.parse(userStr);JS对象转化为JSON字符串
var jsonStr JSON.stringify(jsObject);BOM对象:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装成对象.
Window:浏览器窗口对象Navigator:浏览器对象Screen:屏幕对象History:历史记录对象Location:地址栏对象
window对象
介绍:浏览器窗口对象获取:直接使用window,其中window可以省略.window.alert(“Hello world”); alert(“Hello world”);属性: history:对History对象的只读引用.location:用于窗口或框架的Location对象.navigator:对Navigator对象的只读y引用. 方法 alert():显示带有一段消息和一个确认按钮的警告框.confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.setInterval():按照指定的周期来调用函数或计算表达式.setTimeout():在指定数毫秒后调用函数或计算表达式.
Location对象: 地址栏对象 获取:
window.location.属性;
location.属性属性:
href:设置或返回完整的url DOM对象:
概念:Document Object Model,文档对象模型
将标记语言的各个组成部分封装为对应的对象
Document:整个文档对象Element:元素对象Attribute:属性对象Text:文本对象Comment:注释对象 JavaScript通过DOM,就能够对HTML进行操作:
改变HTML元素的内容改变HTML元素的样式(CSS)对HTML DOM事件作出反应添加,删除HTML元素
DOM是W3C的标准,定义了访问HTML和XML的标准,分为3个不同的部分:
Core DOM:所有文档类型的标准 Document:整个文档对象Element:元素对象Attribute:属性对象Text:文本对象comment:注释对象 XML DOM-XML文档的标准模型HTML DOM-HTML 文档的标准模型
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的.
Document对象中提供了以下获取Element元素对象的函数: script// 获取元素通过idvar img document.getElementById(h1);alert(img);// 获取元素通过标签名var divs document.getElementsByTagName(div)for(let i0;idivs.length;i){alert(divs[i]);}// 获取元素通过namevar ins document.getElementsByName(hobby);for(let i0;iins.length;i){alert(ins[i]);}// 获取元素通过类名var cls document.getElementsByClassName(cls);for(let i0;icls.length;i){alert(cls[i]);}//通过获取到的对象操作htmlvar divs document.getElementsByTagName(div)divs[0].innerHTML 传智播客;
/script事件:HTML事件是发生在HTML元素上的事情.比如:
按钮被点击鼠标移动到元素上按下键盘按键
事件监听:JavaScript可以在事件被侦测到时执行代码
事件绑定:
两种方式:
方式一:通过HTML标签中的事件属性进行绑定 方式二:通过DOM元素属性绑定 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-事件绑定/title
/head
bodyinput typebutton idbtn1 value事件绑定1 onclickon()input typebutton idbtn2 value事件绑定2/body
scripton function(){alert(事件绑定1);}document.getElementById(btn2).onclick function(){alert(事件绑定2);}/script
/htmljs中的常见事件 Vue:Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写.基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上. Vue快速入门 插值表达式:形式:{{表达式}},内容可以是:变量,三元运算符,函数调用,算数运算 Vue的常见指令:
指令:HTML标签上带有v-前缀的特殊属性,不同指令具有不同的含义.例如v-if,v-for v-bind:为html标签绑定属性值,如设置href,css样式等
a v-bind:hrefurl传智教育/a//简写形式
a :hrefurl传智教育/av-model:
input typetext v-modelurl注意如果通过v-bind或者v-model绑定变量,必须在数据模型中声明. v-on:为HTML标签绑定事件
input typebutton value按钮 v-on:clickhandle()
input typebutton value按钮 clickhandle()
scriptnew Vue({el:#app,data: {//...},methods: {handle:function() {alert(我被点击了);}},})
/scriptVue的生命周期
生命周期:指一个对象从创建到销毁的过程生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子) 主要是mounted方法:通常我们是在mounted这个方法中发送请求到服务端获取数据.
