宜春建设局网站,施工企业的安全生产责任制度,网络培训课程,南宁seo结算#x1f40c;个人主页#xff1a; #x1f40c; 叶落闲庭 #x1f4a8;我的专栏#xff1a;#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也#xff0c;而不可夺坚#xff1b;丹可磨也#xff0c;而不可夺赤。 JavaScript简介引入方式 简介#xf… 个人主页 叶落闲庭 我的专栏 c语言 数据结构 javaEE 操作系统 Redis 石可破也而不可夺坚丹可磨也而不可夺赤。 JavaScript简介引入方式 简介什么是JavaScript一、JavaScript的引入方式二、JavaScript基础语法2.1 书写语法与输出语句2.2 变量与数据类型2.3 运算符2.3.1 与 的区别2.3.2 类型转换 2.4 流程控制语句与函数 三、JavaScript对象3.1Array3.2 String3.3 自定义对象 四、BOM4.1 Window:浏览器窗口对象4.4 History:历史记录对象4.5 Location:地址栏对象 五、DOM5.1 获取Element对象5.2 常见HTML Element对象的使用 六、事件监听6.1 事件绑定6.2 常见事件 简介什么是JavaScript JavaScript是一门跨平台、面向对象的脚本语言来控制网页行为的它能使网页可交互W3C标准网页主要由三部分组成 结构HTML 表现CSS 行为JavaScript JavaScript和Java是完全不同的语言不论是概念还是设计但是语法基础类似JavaScript简称JS在1995年由Brendan Eich发明并于1997年成为一部ECMA标准ECMAScript 6ES6是最新的JavaScript版本发布于2015年 一、JavaScript的引入方式 1.内部脚本将JS代码定义在HTML页面中 在HTML中JavaScript代码必须位于script与/script标签之间 scriptalert(hello JavaScript!); /script注意在HTML文档中可以在任意地方放置任意数量的script一般把脚本置于body元素的底部可改善显示速度因为脚本执行会拖慢显示2.外部脚本将JS代码定义在外部JS文件中然后引入到HTML页面中外部文件test.jsalert(hello JavaScript!);引入外部js文件script src ../js/test.js/script注意 外部脚本不能包含script标签 script标签不能自闭合 二、JavaScript基础语法 2.1 书写语法与输出语句 书写语法 区分大小写与Java一样变量名、函数名以及其他一切东西都是区分大小写的 每行结尾的分号可有可无 注释 单行注释//注释内容 多行注释/* 注释内容 */ 大括号表示代码块 输出语句 使用window.alert()写入警告框 使用document.write()写入HTML输出 使用console.log()写入浏览器控制台 2.2 变量与数据类型 变量 JavaScript中用var关键字variable的缩写来声明变量 JavaScript是一门弱类型语言变量可以存放不同类型的值 变量名需要遵循如下规则 组成字符可以是任何字母、数字】下划线_或美元符$ 数字不能开头 建议使用驼峰命名法 ECMScript6新增了let关键字来定义变量它的用法类似于var但是所声明的变量只在let关键字所在的代码块内有效且不允许重复声明ECMScript6新增了const关键字用来声明一个只读的常量一旦声明。常量的值就不能改变 数据类型JavaScript中分为原始类型和引用类型5种原始类型 number数字整数、小数、NaNNot a Number string字符、字符串、单双引皆可 boolean布尔true、false null对象为空 undefined当声明的变量未初始化时该变量的默认值是undefined 使用typeof运算符可以获取数据类型 2.3 运算符 一元运算符-算术运算符-*/%赋值运算符关系运算符! …逻辑运算符||三元运算符条件表达式true_value:false_value 2.3.1 与 的区别 等于 1.判断类型是否一样如果不一样则进行类型转换 2.比较其值 全等于 1.判断类型是否一样如果不一样直接返回fa1se 2.再去比较其值 2.3.2 类型转换 其它类型转为number 1.string转为number按照字符串的字面值转为数字.如果字面值不是数字则转为NaN,一般使用parseInt()进行转换。 2.boolean转为numbertrue转为1false转为0。 其它类型转为boolean1.number0和NaN转为false,其他的数字转为true2.string空字符串转为false,其他的字符串转为true3.nullfalse4.undefinedfalse 2.4 流程控制语句与函数 流程控制语句if var count 3; if(count 3){alert(count); }switch: var num 3; switch (num){case 1:{alert(星期一)break;}case 2:{alert(星期二)break;}case 3:{alert(星期三)break;}case 4:{alert(星期四)break;}case 5:{alert(星期五)break;}case 6:{alert(星期六)break;}case 7:{alert(星期日)break;}default:{alert(输入错误);break;} }for var sum 0; for(1et i 1;i 100;1){sum i; } alert(sum);while var sum 0; var i 1; while (i 100){sum i;i; } alert(sum);do.…while var sum 0; var i 1; do {sum 1:i; } while (i 100); alert(sum);函数方法方式一是被设计为执行特定任务的代码块定义JavaScript函数通过function关键词进行定义语法为 function functionName(参数1参数2...) {//要执行的代码 }注意形式参数不需要类型。因为JavaScript是弱类型语言返回值也不需要定义类型可以在函数内部直接使用returni返回即可 function add(a,b) {return a b; }调用函数名称实际参数列表 let result add(1,2);方式二 var functionName function(参敛列表){//要执行的代码 }var add function (a,b){return a b; }调用JS中函数调用可以传递任意个数参数 let result add(1,2,3);三、JavaScript对象 3.1Array JavaScript Array对象用于定义数组 定义: var 变量名 new Array(元素列表);//方式一 var arr new Array(1,2,3);var 变量名 [元素列表]//方式二 var arr [1,2,3];访问 arr[索引] 值 arr[0] 1;注意JS数组类似Java集合长度类型都可变变长变类型 属性 length数组中元素的个数 var arr4 [1,2,3]; for (let i 0;i arr4.length;i){alert(arr4[i]); }方法 push添加 var arr5 [1,2,3]; arr5.push(10); alert(arr5);splice删除 var arr6 [1,2,3]; arr6.splice(01);//表示从0下标开始删删除1个元素 alert(arr6);3.2 String 定义 var 变量名 new String(s);//方式一 var str new String(hello); var 变量名 s;//方式二 var str hello;3.3 自定义对象 格式 var 对象名称 {属性名称1属性值1属性名称2属性值2...函数名称function(形参列表){}...};var person {name:zhangsan,age:23,eat:function {alert(干饭~)} };四、BOM Browser Object Model浏览器对象模型JavaScript将浏览器的各个组成部分封装为对象组成 4.1 Window:浏览器窗口对象 获取直接使用window,其中window.可以省略 window.alert(abc);属性获取其他BOM对象 confirm点击确定按纽返回true,点击取消按钮返回false var flagconfirm(确认别除) alert(flag); if(flag){//删除逻辑 }setTimeout(function,毫秒值)在一定的时间间隔后执行一个function,只执行一次 setTimeout(function()alert(hehe); },3000);setInterval(function,毫秒值)在一定的时间间隔后执行一个function,循环执行 setInterval(function()alert(hehe); },3000);4.4 History:历史记录对象 History历史记录获取使用window.history获取其中window可省略 window.history.方法(); history.方法();方法 4.5 Location:地址栏对象 History历史记录获取使用window.location获取其中window可省略 window.location.方法(); location.方法();属性 五、DOM Document Object Model文档对象模型将标记语言的各个组成部分封装为对象 Document:整个文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 JavaScript通过DOM就能够对HTML进行操作了 改变HTML元素的内容 改变HTML元素的样式(CSS) 对HTML DOM事件作出反应 添加和删除HTML元素 DOM是W3C(万维网联盟)的标准DOM定义了访问HTML和XML文档的标准W3CDOM标准被分为3个不同的部分 1.核心DOM:针对任何结构化文档的标准模型 Document:整个文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 2.XML DOM:针对XML文档的标准模型 3.HTML DOM:针对HTML文档的标准模型 Image:img Button input typebutton 5.1 获取Element对象 Element:元素对象获取使用Document对象的方法来获取 1.getElementByld:根据id属性值获取返回一个Element对象 var img document.getElementById(Light); alert(img);2.getElementsByTagName:根据标签名称获取返回Element对象数组 var divs document.getElementsByTagName(div); alert(divs.length);3.getElementsByName:根据name属性值获取返回Element对象数组 var hobbys document.getELementsByName(hobby); for (let i 0;i hobbys.length;i){alert(hobbys[i]); }4.getElementsByClassName:根据class属性值获取返回Element对象数组 var clss document.getElementsByelassName(cls); for (let i 0;i clss.length;i){alert(clss[i]); }5.2 常见HTML Element对象的使用 img标签的src属性 var img document.getElementById(Light); img.src ../imgs/on.gifstyle:设置元素css样式 var divs document.getElementsByTagName(div); for (let i 0;i divs.length;i){divs[i].style.color red; }innerHTML:设置元素内容 var divs document.getElementsByTagName(div); for (let i 0;i divs.length;i){divs[i].innerHTML hello!; }checked:选中对象 var hobbys document.getELementsByName(hobby); for (let i 0;i hobbys.length;i){hobbys[i].checked true; }六、事件监听 事件HTML事件是发生在HTML元素上的“事情”。比如 按钮被点击 鼠标移动到元素之上 按下键盘按键 事件监听JavaScript可以在事件被侦测到时执行代码 6.1 事件绑定 事件绑定有两种方式 方式一通过HTML标签中的事件属性进行绑定 input typebuttononclickon() function on(){alert(我被点了) }方式二通过DOM元素属性绑定推荐 input typebuttonidbtn document.getElementByld(btn).onclick function(){alert(我被点了); }6.2 常见事件 参考HTML教程https://www.w3school.com.cn/jsref/dom_obj_event.asp