简介：
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
特点：
交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
安全性（不可以直接访问本地硬盘）
跨平台性（由浏览器解析执行，和平台无关）
JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。
JavaScript 是一种弱类型语言，java是强类型语言。
一个完整 JavaScript实现由以下三个部分组成：
1.核心：ECMAscript
2.文档对象模型：DOM
3.浏览器对象模型：BOM
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">alert(");//弹框console.log(");//在控制台中打印数据</script></head><body><script type="text/javascript">alert(");//弹框console.log(");//在控制台中打印数据</script></body>
</html>
注：javascript作为标签出现在HTML中未要求一定要写在中
在javascript中，定义变量可以统一使用var。
<script type="text/javascript">/*** var - 变量*/var v = 123;console.log(v);v = true;console.log(v);v = "abc";console.log(v);</script>
注：javascript为弱类型语言，在定义变量上可以自动转换。
number（数值型）string（字符串型）boolean（布尔类型）undefined（未定义类型）、null（空）
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var carname=“Bill Gates”;
var carname=‘Bill Gates’;
单引号和双引号支持互相包含
JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true
var y=false
undefined
访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined
Null
被赋予null值的变量通常认为已经定义了，只是不代表任何东西。
Javascript的数据类型主要分为
基本数据类型
非基本数据类型（对象）
<script type="text/javascript">/*** JS的基本数据类型：number、string、boolean、undefined(未定义类型)、null*///numbervar v1 = 123;console.log(v1) //123v1 = 123.123;console.log(v1); //123.123//string var v2 = 'abc';console.log(v2); //abcv2 = "abc";console.log(v2); //abc//booleanvar v3 = true;console.log(v3); //truev3 = false;console.log(v3); //false//undefinedvar v4;console.log(v4); //undefinedv4 = undefined;console.log(v4); //undefinedvar v5 = null;console.log(v5); //null
</script>
<script type="text/javascript">//JS的基本数据类型：number、string、boolean、undefined(未定义类型)、null//number的特殊点：(Infinity 表示无穷大)console.log(Infinity + (-Infinity));//NaN:Not a Number//string的特殊点：var v1 = "12";var v2 = "3";console.log(v1 + v2);//做拼接console.log(parseInt(v1) + parseInt(v2));//先转化成整数再相加//算数运算console.log(v1 - v2);//9console.log(v1 * v2);//36console.log(v1 / v2);//4console.log(v1 % v2);//0//boolean的特殊点：0、""、undefined、null、NaN都表示falseif(null){console.log("true");}else{console.log("false");}//undefined vs nullvar v1;console.log(typeof v1);//undefinedvar v2 = null;console.log(typeof v2);//object(空对象)//== vs === var v1 = 123;var v2 = "123";console.log(v1 == v2);//true：只判断值console.log(v1 === v2);//false：既判断值，也判断类型
</script>
循环语句：for 、for-in 、while
分支：switch
for-in的 使用注意：
<script type="text/javascript">var nums = [1,2,3,4,5,6]for(var index in nums){alert(nums[index]);}
</script>
<script type="text/javascript">/*** 数组*///数组的声明及初始化var arr = ["aa","bb","cc"];//设置数据arr[2] = "ss";//添加数据arr[3] = "dd";arr[10] = "xx";//删除数据delete arr[3];//遍历 - for循环for(var i = 0;i<arr.length;i++){console.log(arr[i]);}//依次遍历中间会出现7个undefined//遍历 - for_in(遍历有效下标)for(var index in arr){console.log(arr[index]);}//不会遍历出undefined
</script>
<script type="text/javascript">/** 函数：特定功能的代码块*///无返回值无参数的方法function fun01(){alert("aaa");}fun01();//有参数的方法（参数不用写var）function fun02(a,b){alert(a+b);}fun02("10","20");//有返回值的方法function fun03(a,b){return a+b;}var v = fun03("10","20");alert(v);</script>
常见的预定义函数：parseInt();、parseFloat();将字符转化为int和float。
isNaN()、isFinite()判断是不是一个数字。
eval()把该字符串认定为一个js代码执行。
文档对象模型（Document Object Model）
核心：使用DOM的方式来操作网页的元素
注：通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 模型被构造为对象的树——HTML DOM 树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9esp5jUp-1630893168041)(D:培训学习资料重要图HTML_DOM树.jpg)]
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML
<body><p id="p_id1" class="p_class">段落1</p><p id="p_id2" class="p_class">段落2</p><p id="p_id3" class="p_class">段落3</p><input type="text" name="text"/><br /><input type="text" name="text"/><script type="text/javascript"&ElementById("p_id1").onclick=function (){this.innerText="段落1ddd"}ElementsByClassName("p_class")[1].onclick =function(){this.innerText="段落2ddd"}ElementsByTagName("p")[2].onclick =function(){this.innerText="段落3ddd"}ElementsByName("text")[0].onclick =function(){this.value="滴滴滴"lor ="red"}</script>
</body>
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML
<body><p>标签</p><script type="text/javascript">var p1 &#ElementsByTagName("p")[0];p1.onclick = function(){//获取内容alert(this.innerText)//标签alert(this.innerHTML)//<p>标签</p>//this.innerText = "<h1>标题</h1>";this.innerHTML = "<h1>标题</h1>";}</script>
</body>
获取属性：
1.元素对象.属性（this.属性）
修改属性：
1.使用元素对象（或者this）直接 .属性=“修改的值”
2.使用方法setAttribute(“操作的属性”,“对应修改的值”)
<body><img src="../img/2.png" width="20%" height="20%" ><script type="text/javascript">var img &#ElementsByTagName("img")[0];lick = function(){//获取属性console.log(this.width)console.Attribute("height"))//设置属性1this.watch="400";this.height="400";//设置属性2this.setAttribute("width","50%");this.setAttribute("height","50%");}</script>
</body>
获取样式：元素对象.style.样式名
操作样式：元素对象.style.样式名=“修改后的样式”
<body><img src="../img/2.png" onclick="fun01(this)"><script type="text/javascript">var img = ElementsByTagName("img")[0]var bool =true;function fun01(obj){//获取样式//console.log(img.style.backgroundColor)img.style.visibility="hidden";//obj.style.visibility="visible";}</script>
</body>
<body><!-- 不分离 --><h1 onclick="this.innerText='你好!'">Hello</h1><!-- 分离 --><h1 onclick="fun01(this)">Hello</h1><script type="text/javascript">function fun01(obj){obj.innerText="你好！";}</script><!-- 使用按钮1 --><input type="button" value="单击改变标题1" onclick="fun02()"/><h1>标题</h1><script type="text/javascript">function fun02(){var h1&#ElementsByTagName("h1")[2];h1.innerText="你好！";}</script><!-- 使用按钮2 --><input type="button" value="单击改变标题2"/><h1>标题</h1><script type="text/javascript"&ElementsByTagName("input")[1].onclick=function(){var h1&#ElementsByTagName("h1")[3];h1.innerText="你好！";};</script></body>
等页面的所有资源加载完成再触发的事件
<head><meta charset="utf-8"><title></title><script type="text/javascript">/*** onload事件：页面加载事件，等页面的所有资源加载完成再触发的事件*/load =function(){ElementsByTagName("input")[0].onclick=function(){var h1 = ElementsByTagName("h1")[0];h1.innerText="你好！";}}</script>
</head>
<body><input type="button" value="改变标签" /><h1>标签</h1>
</body>
应用示例：
<body><input type="text" onkeydown="fun01()"onkeypress="fun02()"onkeyup="fun03()"/><script type="text/javascript">function fun01(){console.log("键盘按下事件");}function fun02(){console.log("键盘持续事件");}function fun03(){console.log("键盘松开事件");}</script>
</body>
案例：实现文本框中输入英文字母内容，自动把内容转成大写字母
键盘松开事件
<body><!-- 需求：实现文本框中输入英文字母内容，自动把内容转成大写字母 --><input type="text" onkeyup="fun03(this)"/><script type="text/javascript">function fun03(obj){var v = obj.value;v = v.toUpperCase();obj.value=v;}</script>
</body>
应用示例：
<body><input type="image" src="../img/2.png" onmousedown="down01()"onmouseup="up01()"onmousemove="move01()"onmouseover="over01()"onmouseout="out01()"/><script type="text/javascript">function down01(){console.log("鼠标按下事件");}function up01(){console.log("鼠标松开事件");}function move01(){console.log("鼠标移动事件");}function over01(){console.log("鼠标移进事件");}function out01(){console.log("鼠标移出事件");}</script>
</body>
案例：鼠标放在图片上图片消失
鼠标移进移出事件
<body><!-- 需求：捉迷藏，鼠标放在图片上图片消失 --><img src="../img/2.png" onmouseover="over01(this)" onmouseout="out01(this)"/><img src="../img/2.png" onmouseover="over01(this)" onmouseout="out01(this)"/><img src="../img/2.png" onmouseover="over01(this)" onmouseout="out01(this)"/><script type="text/javascript">function over01(obj){obj.style.opacity=0; //透明度0~1}function out01(obj){obj.style.opacity=1;}</script>
</body>
案例：文本框提示和检测。
<body><input type="text" value="请输入账号" onfocus="focus01(this)" onblur="blur01(this)"/><script type="text/javascript">function focus01(obj){if(obj.value=="请输入账号"){obj.value="";}}function blur01(obj){if(im()==""){obj.value="请输入账号"}}</script>
</body>
标签生改变时引发的操作事件，常常用来关联联动事件，如选择省市。
<body><select id="province"><option value="sc">四川</option><option value="jx">江西</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>自贡</option><option>雅安</option><option>乐山</option><option>眉山</option><option>绵阳</option></select>市<script type="text/javascript">var city = ElementById("city");//onchange - 改变事件ElementById("province").onchange = function(){if(this.value == "sc"){addCity(["成都","自贡","雅安","乐山","眉山","绵阳"]);}else if(this.value == "jx"){addCity(["南昌","赣州","新余","婺源","上饶","景德镇"]);}else if(this.value == "hn"){addCity(["长沙","湘潭","娄底","永州","张家界"]);}else if(this.value == "hb"){addCity(["武汉","咸宁","仙桃","黄冈"]);}}function addCity(arr){//清空city中的数据city.length = 0;for(var i = 0;i<arr.length;i++){var cityName = arr[i];var option = ateElement("option");option.innerText = cityName;city.appendChild(option);}}</script></body>
此事件需要验证返回值，当点击submit按钮提交from表单时，会触发该事件，当事件的内容满足，自定义返回一个true，则提交生效，如果返回值为false，则不提交。
常用作前端验证：
<form id="modifyPassword" action="#" method="post">账号：<input id="username" type="text" placeholder="请输入账号" /><span></span><br />密码：<input id="password" type="password" placeholder="请输入密码" /><span></span><br />确认密码：<input id="repassword" type="password" placeholder="请输入确认密码" /><span></span><br /><input type="submit" value="提交" />
</form><script type="text/javascript">var username = ElementById("username");var password = ElementById("password");var repassword = ElementById("repassword");var span1 = ElementsByTagName("span")[0];var span2 = ElementsByTagName("span")[1];var span3 = ElementsByTagName("span")[2];//提交事件 - ElementById("modifyPassword").onsubmit = function(){span1.innerText = "";span2.innerText = "";span3.innerText = "";var bool = true;if(im() == ""){bool = false;span1.innerText = "账号不能为空";}if(im() == ""){bool = false;span2.innerText = "密码不能为空";}if(im() == ""){bool = false;span3.innerText = "确认密码不能为空";}else if(im() != im()){bool = false;span3.innerText = "确认密码与密码不一致";}return bool;}
</script>
属性元素.appendChild(属性元素)：在对应属性下添加新的属性
<body><input type="button" value="新增段落标签" onclick="addP()"/><input type="button" value="新增图片标签" onclick="addImg()"/><input type="button" value="克隆图片标签" onclick="cloneImg()"/><input type="button" value="删除图片标签" onclick="deleteImg()"/><div id="manager"><p>段落标签</p></div><script type="text/javascript">var manager &#ElementById("manager");function addP(){var p = ateElement("p")p.innerText="新增段落标签"manager.appendChild(p)}function addImg(){var img = ateElement("img");// img.setAttribute("src","../img/2.png");img.src="../img/2.png";img.setAttribute("width","100px");img.setAttribute("height","100px");manager.appendChild(img) //创建节点var br = ateElement("br");//将br标签添加到div标签中manager.appendChild(br);}function cloneImg(){var img = ElementsByTagName("img")[0]var newImg = img.cloneNode(true)manager.appendChild(newImg)//创建节点var br = ateElement("br");//将br标签添加到div标签中manager.appendChild(br);}function deleteImg(){var img = ElementsByTagName("img")[0];var br = ElementsByTagName("br")[0];veChild(img);veChild(br);}</script>
</body>
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Browser Object Model
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM document window
Location属性是一个用于存储当前载入页面URL信息的对象。
常常用作页面跳转和页面刷新：
<body><input type="button" value="跳转到百度" onclick="fun01()"/><input type="button" value="刷新页面" onclick="fun02()"/><script type="text/javascript">function fun01(){//三种方式都可// window.location.href = "";// window.location = "";location = "";}function fun02(){load();}</script>
</body>
操作同一个浏览器会话中的已访问页面
常用方法：
back() 跳转到上一页
forward() 跳转到下一页
go(n) 跳转到上n页
go(-n) 跳转到下n页
注意：n为0时，go(0)效果和load()相同为：刷新页面
<body><input type="button" value="上两页" onclick="fun01()"/><input type="button" value="上一页" onclick="fun02()"/><input type="button" value="刷新" onclick="fun03()"/><input type="button" value="下一页" onclick="fun04()"/><input type="button" value="下两页" onclick="fun05()"/><script type="text/javascript">function fun01(){(-2);}function fun02(){//(-1);history.back();}function fun03(){(0);}function fun04(){//(1);history.forward();}function fun05(){(2);}</script>
</body>
弹开一个新的页面（流氓广告）
<script type="text/javascript">window.open("")
</script>
无返回值，界面直接弹出消息。
有返回值，会根据用户点击的按钮（确认or取消）返回一个Boolean值（true or false）
有返回值，提示框中用户能够填写信息，并返回。（如果点击取消，会返回一个null）
<body><input type="button" value="警告窗" onclick="fun01()"/><input type="button" value="确认窗" onclick="fun02()"/><input type="button" value="提示窗" onclick="fun03()"/><script type="text/javascript">function fun01(){alert("警告框");}function fun02(){console.log(confirm("确认框"))}function fun03(){console.log(prompt("提示框","默认值"))}</script>
</body>
过多少毫秒就执行次函数(只执行一次)
setTimeout 语法：var t=setTimeout(“javascript语句”,毫秒)
clearTimeout 清除定时器：clearTimeout(t)
示例：隔三秒，图片自动切换一次
<body><input type="button" value="取消定时" onclick="fun01()"/><br /><img src="../img/1.jpg" ><script type="text/javascript">var img = ElementsByTagName("img")[0];//定时器:过多少毫秒就执行次函数(只执行一次)var time = setTimeout(function(){img.src ="../img/2.png";},3000);function fun01(){clearTimeout(time)}</script>
</body>
每过多少毫秒就执行该函数(不限一次)
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：var time = setInterval(“javascript语句”,毫秒)
clearInterval() ：清除定时器： clearInterval(time)
示例：循环切换图片
<body><img src="../img/3.jpg" width="20%"><input type="button" value="取消切换" onclick="fun01()"/><script type="text/javascript">var load = function(){var img = ElementsByTagName("img")[0];var imgSrcs=["../img/1.jpg","../img/2.png","../img/3.jpg"];var index = 0;time01 = window.setInterval(function(){img.src = imgSrcs[index];index++;if(index==imgSrcs.length){index=0;}},1000)}function fun01(){clearInterval(time01);}</script>
</body>
示例：时钟
<body><h1></h1><script type="text/javascript">var h = ElementsByTagName("h1")[0];function setTime(){//创建日期对象var date = new Date();//获取日期信息var hour = Hours();var minute = Minutes();var second = Seconds();var time = hour + ":" + minute + ":" +second;h.innerText = time;}setTime();setInterval(function(){setTime();},1000)</script>
</body>
cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。
cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个可用。因此，可以跨越一个域名下的多个网页，但不能跨越多个域名使用。
1，保存用户的登录状态
2，定制页面，如换肤，选择所在地区等等
3，购物车的实现
4，记录用户的浏览历史记录
1，cookie可能被禁用
2，cookie是与游览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也是不能互相访问的
3，cookie可能被删除，因为cookie实际就是硬盘上的一个文件
4，的安全性不够高，所有的都是以纯文本的形式记录于文件中。
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给kie
kie=“userId=888”;
如果要一次存储多个名/值对，可以使用逗号加空格（; ）隔开，例如：
kie=“userId=888; userName=1601”;
注意：以下写法是保存了两个cookie信息，而不是覆盖（key相同时覆盖）
如果要改变一个cookie的值，只需重新赋值，例如：
到现在为止，所有的cookie都是内存会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现&#kie=“userId=828; expires=GMT_String”;
注：其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。
<script type="text/javascript">function updateCookie(key,value,time){var date = new Date();date.Time()+kie = key + "=" + value + "; expires=" &#GMTString();}
</script>
var strCookie&#kie;
这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。 （想要获取特定的值还需要进一步处理）
<script type="text/javascript">function queryCookie(key){var cs = kie.split(";");for(var index in cs){var k=cs[index].trim().split("=")[0];var v=cs[index].trim().split("=")[1];if(k==key){return v;}}}
</script>
为了删除一个cookie，可以将其过期时间设定为一个过去的时间（(new Date()).getTime()-1或者直接是-1等等）
<body><input type="button" value="添加Cookie" onclick="fun01()"/><input type="button" value="删除Cookie" onclick="fun02()"/><input type="button" value="修改Cookie" onclick="fun03()"/><input type="button" value="查询Cookie" onclick="fun04()"/><script type="text/javascript">function fun01(){updateCookie("username","dengshuo",1000*60*60*60*24*10);updateCookie("password","1234",1000*60*60*60*24*10);}function fun02(){updateCookie("username","",-1);updateCookie("password","",-1);}function fun03(){updateCookie("username","dengshuo_ddd",1000*60*60*60*24*10);updateCookie("password","123456",1000*60*60*60*24*10);}function fun04(){var username = queryCookie("username");var password = queryCookie("password");alert(username+"--"+password)}function updateCookie(key,value,time){var date = new Date();date.Time()+kie = key + "=" + value + "; expires=" &#GMTString();}function queryCookie(key){var cs = kie.split(";");for(var index in cs){var k=cs[index].trim().split("=")[0];var v=cs[index].trim().split("=")[1];if(k==key){return v;}}}</script>
</body>
本文发布于:2024-01-27 19:47:30，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063560512270.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
