湖北城乡和建设官方网站,东道设计公司官网招聘,wordpress免费主题企业,俄语淘宝网站建设JavaScript简介
JavaScript#xff08;简称#xff1a;js#xff09;是一门跨平台#xff0c;面向对象的脚本语言#xff0c;是用来控制网页行为的#xff0c;它能使网页可交互。 JavaScript和java是完全不同的语言#xff0c;不论是概念还是设计#xff0c;但是基础语…JavaScript简介
JavaScript简称js是一门跨平台面向对象的脚本语言是用来控制网页行为的它能使网页可交互。 JavaScript和java是完全不同的语言不论是概念还是设计但是基础语法类似 JavaScript在1995年由Brendan Eich发明并于1997年成为ECMA标准。
ECMAScript6ES6是最新的JavaScript版本发布于2015年。
JavaScript引入方式
内部脚本将JS代码定义在HTML页面中 JavaScript代码必须位于script/script标签之间 在HTML文档中可以在任意地方放置任意数量的script 一般会把脚本置于body元素底部可改善显示速度 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHello js/titlescript alert(你好js)/script
/head
body/body
/html
外部脚本将JS代码定义在外部JS文件中然后引入到HTML页面中 外部JS文件中只包含JS代码部包含script标签 script标签不能自闭合 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHello js/titlescript src./js/demo1.js/script
/head
body/body
/html
alert(你好js);
JavaScript书写语法
区分大小写与Java一样变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释单行注释//注释内容 多行注释/*注释内容*/
大括号表示代码块
if (count3) {alert(count);
}
JavaScript输出语句
使用window.alert()写入警告框
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHello js/title/head
body/body
scriptwindow.alert(你好js)
/script
/html
使用document.write()写入HTML输出
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHello js/title/head
body/body
scriptdocument.write(你好js)
/script
/html
使用console.log()写入浏览器控制台
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHello js/title/head
body/body
scriptconsole.log(你好js)
/script
/html JavaScript变量 JavaScript中的var关键字variable的缩写来声明变量 JavaScript是一门弱类型语言变量可以存放部同类型的值 变量名需要遵循如下规则 组成字符可以是任何字母、数字、下划线_或者美元符号$ 数字不能开头 建议使用驼峰命名
特点 1.作用域大全局变量 2.可以重复定义 ECMAScript6新增了let关键字来定义变量它的用法类似于var但是所声明的变量只在let关键字所在的代码块内有效且不允许重复声明
ECMAScript6新增了const关键字用来声明一个只读的常量一旦声明常量的值就不能改变 JavaScript数据类型
JavaScript中分为原始类型和引用类型
原始类型 number数字整数小数NAN string字符串单双引皆可 boolean布尔 null对象为空 undefined当声明的变量未初始化时该变量的默认值是undefined 使用typeof运算符可以获取数据类型 var a20;
alert(typeof a);
JavaScript运算符
特殊 与 会进行类型转换不会进行类型转换
var a10;
alert(a10);//true
alert(a10);//false
alert(a10);//true
类型转换 字符串类型转为数字 将字符串字面值转为数字如果字面值不是数字则转为NaN 其他类型转换为boolean Number0和NaN为flase其他均转为true
String空字符为false其他均转为true
Null和undefined均转为false
JavaScript函数
介绍函数是被设计为执行特定任务的代码块
定义JavaScript函数通过function关键字定义语法为 function functionName(参数1,参数2){ //需要执行的代码 } 注意
形式参数不需要类型因为JavaScript是弱类型语言
返回值也不需要定义类型可以在函数内部直接使用return返回即可
调用函数名称实际参数列表
//定义
function add(a,b){return ab;
}
//调用
var resultadd(10,20);
alert(result)
JavaScript对象
Array
JavaScript中Array对象用于定义数组 定义var 变量名new[元素列表] var 变量名[元素列表] 访问 arr[索引]值 注意事项JavaScript中的数组相当于Java中集合数组的长度是可变的而JavaScript是弱类型所以可以存储任意类型的数据
属性
length设置或返回数组中元素的数量 方法forEach遍历数组中的每个有值的元素并调用一次传入的函数 push将新元素添加到数组的末尾并返回新的长度 splice从数组中删除元素 箭头函数ES6是用来简化函数定义语法的具体形式为...{...},如果需要给箭头函数起名字var xxx...{...} String
String字符串对象创建方式有两种 var 变量名new String... var 变量名... 属性 length字符串的长度 方法 charAt返回在指定位置的字符 indexOf检索字符串 trim去除字符串中两边的字符 substring提取字符串中两个指定的索引号之间的字符 javaScript自定义对象 定义格式 var 对象名{ 属性名1属性值1 函数名称function形参列表{ } } 调用格式 对象名.属性名 对象名.函数名 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
scriptvar user{name:tom,age:10,gender:male,eat(){alert(用膳~);}}alert(user.name);user.eat();/script
/html
JSON-介绍
概念JavaScript Object NotationJavaScript对象标记法 JSON是通过JavaScript对象标记法书写的文本 由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输
JSON-基础语法
定义 var 变量名{key1:value1,key2:value2} value的数据类型为 数字整数或浮点数 字符串在双引号中 逻辑值true或false 数组在方括号中 对象在花括号中 null JSON字符串转为JS对象
var jsObjectJSON.parse(userStr);
JS对象转为JSON字符串
var jsonStrJSON.stringify(jsObject);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
scriptvar jsonstr{name:tom,age:24,addr:[南京,北京]};/* alert(jsonstr.name); */var objJSON.parse(jsonstr);alert(obj.name);alert(JSON.stringify(obj)) ;/script
/html
BOM
概念Browser Object Model 浏览器对象模型允许JavaScript与浏览器对话JavaScript将浏览器的各个组成部分封装为对象。
组成 window浏览器窗口对象 Nanifaeor浏览器对象 Screen屏幕对象 History历史记录对象 Location地址栏对象 Window
介绍浏览器窗口对象
获取直接使用window其中window可以省略
属性 history对History对象的只读引用 location用于窗口或框架的Location对象 navigation对Navigation对象的只读引用
方法 alert显示有一段消息和一个确认按钮的警告框 confirm显示带有消息以及确认按钮和取消按钮的对话框 setlnteval按照指定的周期来调用函数或计算表达式 setTimeout在指定的毫秒数后调用或计算表达式
Location
介绍地址栏对象
获取使用window.location获取其中window可以省略
属性href设置或返回完整的URL
DOM 概念Document Object Model文档对象模型。 将标记语言的各个组成部分封装为对应的对象 Document整个文档对象 Element元素对象 Attribute属性对象 Text文本对象 Comment注释对象 JavaScript通过DDM就能够对HTML进行操作
改变HTML元素的内容
改变HTML元素的样式
对HTML DOM事件做出反应
添加和删除HTML元素
DOM是W3C的标准定义了访问HTML和XML文档的标准分为3个不同的部分 1.Core DOM-所以文档类型的标准模型 Document整个文档对象 Element元素对象 Attribute属性对象 Text文本对象 Comment注释对象 2.XML DOMXML文档的标准模型 3.HTML DOM-HTML文档的标准模型 imageimg Buttoninput typebutton HTML中Element对象可以通过Document对象获取而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数 1.根据id属性值获取返回单个Element对象 var h1document.getElementById(h1); 2.根据标签名称获取返回Element对象数组 var divsdocument.getElementsByTagName(div); 3.根据name属性获取返回Element对象数组 var hobbysdocument.getElementsByName(hobby); 4.根据class属性值获取返回Element对象数组 var clssdocument.getElementsByClassName(cls); !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg idh1 srchttps://www.toopic.cn/public/uploads/small/163756299623163756299625.png brbrdiv classcls计算机教育/divbrdiv classclsjava教育/divbrinput typecheckbox namehobby电影input typecheckbox namehobby旅游input typecheckbox namehobby游戏/body
script// 获取元素// 第一种var img document.getElementById(h1);alert(img);
// 第二种document.getElementsByTagName(div);for (let i 0; i div.length; i) {alert(div[i]);}// 第三种var ins document.getElementsByTagName(hobby);for (let i 0; i ins.length; i) {alert(ins[i]); }// 第四种var ins document.getElementsByClassName(cls);;for (let i 0; i ins.length; i) {alert(ins[i]); }/script
/html
DOM案例
1.切换图片
2.所以div标签后加good
3.所以复选框为选中状态
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg idh1 srchttps://www.toopic.cn/public/uploads/small/163756299623163756299625.png brbr;div classcls计算机教育/divbr;div classclsjava教育/divbr;input typecheckbox namehobby电影input typecheckbox namehobby旅游input typecheckbox namehobby游戏/body
scriptvar img document.getElementById(h1);img.srchttps://pic1.zhimg.com/v2-36d4626179b21ede507f08593329aa22_r.jpg?source1940ef5c;var divs document.getElementsByTagName(div);for (let i 0; i divs.length; i) {const div divs[i];div.innerHTMLFont colorredgood/Font;}var ins document.getElementsByName(hobby);for (let i 0; i ins.length; i) {const check ins[i];check.checkedtrue;}
/script
/html
js事件监听
事件HTML事件是发生在HTML元素上的“事情”。比如 按钮被点击 鼠标移动到元素上 按下键盘按钮
事件监听JavaScript可以在事件被侦测到时执行代码
事件绑定 方式一通过HTML标签中的事件属性进行绑定 方式二通过DOM元素属性绑定 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typebutton idbtn1 value事件绑定1 onclickon()input typebutton idbtn2 value事件绑定2
/body
scriptfunction on(){alert(1被点了);}document.getElementById(btn2).onclickfunction(){alert(2也被点了);}/script
/html
案例实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg idlight srchttps://picx.zhimg.com/80/v2-b442793f521ca651ca2afe7a312a29ef_1440w.webp?source1940ef5c width600brinput typebutton value变身 onclickon()input typebutton value恢复 onclickoff()brbrinput typetext idname valueITCAST onfocuslower() onblurupper()brbrinput typecheckbox namehobby 电影input typecheckbox namehobby 游戏input typecheckbox namehobby 旅游brinput typebutton value全选 onclickcheckAll()input typebutton value反选 onclickreverse()
/bodyscriptfunction on(){var img document.getElementById(light);img.srchttps://picx.zhimg.com/80/v2-ed1f03a985265001cff73c27f0bb5a7d_1440w.webp?source1940ef5c}function off(){var img document.getElementById(light);img.srchttps://picx.zhimg.com/80/v2-b442793f521ca651ca2afe7a312a29ef_1440w.webp?source1940ef5c}function lower(){var input document.getElementById(name);input.valueinput.value.toLowerCase();}function upper(){var input document.getElementById(name);input.valueinput.value.toUpperCase();}function checkAll(){var ins document.getElementsByName(hobby)for (let i 0; i ins.length; i) {const element ins[i];element.checkedtrue}}function reverse(){var ins document.getElementsByName(hobby)for (let i 0; i ins.length; i) {const element ins[i];element.checkedfalse}}/script
/html
