广州在线网站制作公司,面向企业的电子商务,重庆网站联盟,wordpress 清理 数据库#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
