js(2)
来源：互联网 发布：如何查看域名对应的ip 编辑：程序博客网 时间：2024/06/14 00:06
Javascript 作用
网页特效
用户交互
表单验证
Js 就是可以用来控制 结构 和 样式 。
体验js
认识常用的三个输出语句。 都属于 js 内置对象 。
提供我们直接使用的功能就是 内置对象功能。
alert() 弹出警示框
完整的写法 : window.alert(“执行语句”);
Window 对象 窗口 一般情况是可以省略的。 alert(“123”);
console 控制台输出
一般用于 测试用。
console
使用代码 作用
console.log(); 控制台输出 普通输出语句console.warn(); 控制台警示console.error(); 错误提示document.write() 文档打印输出
document 文档对象 它不可以省略
alert() 非常少。 用户体验
console 用户看不见
document.write();直接在文档中显示。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> window.alert("你好"); alert("很好"); console.log("今天是"); console.warn("星期五"); console.error("天气很好"); document.write("今天下雪了");</script></body></html>熟悉js 用途
我们js的主要目的 ， 控制 web标准中的前两种。
结构
样式
行为
Js 怎么来控制样式和结构呢？
首选先找人。找准对象。
我们前面学过 div一类人span 都是
类名 好多个
id 是永远是唯一的。 不会冲突。 getElementById("demo")
通过 id 名字为 demo的 得到这个元素
因为这个div 是在 文档中，文档中很多个div其中的一个。
所以我们先document document.getElementById("demo").style.width = "200px";
文档的 id为demo的 样式的 宽度的 值为 200px
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!-- <style> #demo { width: 100px; height: 100px; background-color: pink; } </style>--></head><body> <div id="demo"></div> <div class="test"></div> <script> document.getElementById("demo").style.width = "200px"; document.getElementById("demo").style.height = "200px"; document.getElementById("demo").style.backgroundColor = "red"; </script></body></html>变量
变量的命名规则!
1.变量命名必须以字母或是下标符号”_”或者”$”为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)
var a = 10;function fun(){ a = "global"; }console.log(a);//输出 ？ 10var a;function fun(){ a = "global"; }fun();console.log(a);变量的作用域
根据变量的作用范围 可以分为 全局变量 和 局部变量
全局变量：
1. 在最外层声明的变量。 2. 在函数体内部，但是没有声明var 的变量也是全局变量局部变量：
在函数体内部的 声明的变量小知识点：
隐式的全局变量
在函数体内部，但是没有声明var 的变量也是全局变量。var a = 1; function func() { a = b = 2; } func(); alert(a); alert(b); <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> var num = 10; function fn(){ console.log(num); result = 20; } fn(); console.log(result); var a = 1 function func() { a = b = 2 } func() alert(a) alert(b)</script></body></html>事件三要素
把等打开灯 要做这样的事情 。
我们用我们的手 去 按 一下开关 灯亮了。
事件源 事件 事件处理程序
事件源
一般情况下是个名词
被触发者 开关按钮
事件
怎么触发的这个事情 按
一般情况下这个是 动词 点击 鼠标经过 按键盘
事件名说明
onclick 鼠标单击ondblclick 鼠标双击onkeyup 按下并释放键盘上的一个键时触发 onchange 文本内容或下拉菜单中的选项发生改变onfocus 获得焦点，表示文本框等获得鼠标光标。onblur 失去焦点，表示文本框等失去鼠标光标。onmouseover 鼠标悬停，即鼠标停留在图片等的上方onmouseout 鼠标移出，即离开图片等所在的区域onload 网页文档加载事件onunload 关闭网页时onsubmit 表单提交事件onreset 重置表单时事件处理程序
发生了什么事 灯亮了 = function(){ }
总结
案例1 ：
事件三要素：
事件源： x 盒子
事件: 点击
事件处理程序： 关闭 这个大的banner
案例2 ：
事件源： 关注京东的这个盒子 事件： 鼠标滑过 经过 事件处理程序： 下拉菜单就会显示出来事件源.事件 = function(){ 事件处理函数 }
事件源： 按钮事件 点击 事件处理程序： 盒子的宽度改变 400代码:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #demo { width: 200px; height: 200px; background-color: pink; } </style></head><body><div id="demo"></div><button id="btn">改变宽度</button><script> /*要操作先找人*/ var demo = document.getElementById("demo"); //获得id为demo的div盒子给demo var btn = document.getElementById("btn"); // 获得按钮 /*事件三要素*/ /*事件源.事件 = fucntion(){}*/ btn.onclick = function(){ demo.style.width = "400px"; }</script></body></html>再举一个例子：鼠标经过切换图片
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><img src="images/jd1.png" alt="" id="pic"/><script> //事件源： 被触发者 img var pic = document.getElementById("pic"); pic.onmouseover = function(){ pic.onmouseout = function(){ pic.src = "images/jd1.png"; } pic.src = "images/jd2.png"; }</script></body></html>隐藏样式
display: none display: block ; 显示的意思 visibility: hidden; visibility: visible 显示的意思display 隐藏不占位置visibility:hidden 隐藏占有位置 停职留心overflow:hidden; 隐藏超出的部分。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width:100px; height:100px; background-color: pink; margin:100px; } .one { /*display: none;*/ visibility: hidden; } </style></head><body><div class="one">1</div><div class="two">2</div></body></html>入口函数
window.onload = function(){ 内部放js }这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。
就是说等页面的结构样式节点等加载完毕。。。
所以，这句话也可以页面的顶端即可。
<script> window.onload = function(){ /*要做事，先找人*/ var pic1 = document.getElementById("pic1"); var pic2 = document.getElementById("pic2"); var pic3 = document.getElementById("pic3"); pic1.onclick = function(){ document.body.style.backgroundImage = "url(images/1.jpg)"; } pic2.onclick = function(){ document.body.style.backgroundImage = "url(images/2.jpg)"; } pic3.onclick = function(){ document.body.style.backgroundImage = "url(images/3.jpg)"; } }</script>模态框
<script type="text/javascript"> window.onload = function(){ //事件源: 登录 var login = document.getElementById("login"); var mask = document.getElementById("mask"); var box = document.getElementById("box"); login.onclick = function(){ // 当我们点击登录，会弹出灰色的大盒子和白色的小盒子 mask.style.display = "block"; box.style.display = "block"; } // 事件源 span x var close_all = document.getElementById("close_all"); close_all.onclick = function(){ mask.style.display = 'none'; box.style.display = "none"; } } </script>padding
内边距会影响盒子大小
行内元素 尽量不用上下的padding和margin
继承的宽度 padding不会挤开 。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 200px; height: 200px; background-color: pink; /*padding-left: 20px;*/ } .damao{ background-color: purple; padding-left: 20px; padding-top: 20px; } </style></head><body><div class="box"> <div class="damao">123</div></div></body></html>Js 的书写位置
Js 的书写位置非常的自由。
也可以参照 css 的位置来分类:
行内式
<button onclick="alert('你好吗')">点击我</button>
一般情况，单双引号是一样 的 但是出现 了包裹的情况。
我们一般采取的是 外双内单的格式。 <a href=”javascript:;”></a> <a href=”javascript:void(0);”></a>
内嵌式
<script type=”text/javascript”> </script> 任何一个地方
外链式
<script type=”text/javascript” src=”xx.js”></script>
这对标记之间不能写任何的东西。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="my.js" type="text/javascript"></script>外链式 <script>内嵌式 function fun(){ alert(1121313); } </script></head><body><div style="color:red;">123</div><button onclick="alert('你好吗')">点击我</button>行内式<button onclick="fun();">欢迎</button></body></html>数据类型
Js 的数据类型分为：
字符型 数值型 布尔型 null undefined
Js 是一个是一种弱数据类型 。
var Aa = 10;var aa:int = 10;Js 的变量你给什么值，它就是什么数据类型。
字符型 (string)
String
转换为字符型:
①利用 “” (双引号)
加了引号的都是字符型。
②利用String(); 转换为字符型
布尔型 (boolean)
就两个值正确的和错误的 true 和 false
数据类型转换为布尔型：
1. 利用 !!
console.log(typeof !!num);
2. 利用 Boolean()
false、undefined 、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true
数值型
var num = 10;
数值的前面带 0 表示 八进制 var num = 020;
0*80+2*81 = 16
数值的前面带 0x 表示 十六进制 var result = 0xb; 11
转换为数值型:
1. 利用- * / 都可以转换
2 利用Number( )
parseInt() parseFloat()
parseInt(值, 进制);
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> console.log(parseInt(19.11)); console.log(parseInt(19.99)); console.log(parseInt("25px")); console.log(parseInt("px25px")); console.log(parseInt(110,2));</script></body></html>结果为：
19
19
25
NaN
6 parseInt(110,2)
表示2进制把10这个2进制转换为10进制 即为6
var a="15.15abc" , b='10.15' , c='10.0abc';alert(parseInt(a)+Number(b)+parseFloat(c));结果为15+10.15+10.0=35.15
Null undefined
Null 空的 没有值 。
Undefined 未定义的 应该有值，但是没有给。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> var a; var b = null; console.log(a); //undefined console.log(a==b); //true console.log(a===b); //false console.log(b+10); //10 console.log(a+10); //NaN</script></body></html>- 【js】js资料(2)
- js-2
- js(2)
- JS-2
- js(2)
- common2.js js中常用方法2
- js 继承(2 使用prototype.js)
- js没有重载–深入js(2)
- js脚本系列(2) js验证
- JS学习2--精简有趣的JS
- js系列-2 js函数相关
- js 验证2
- js学习2
- js学习2
- JS资料2
- 常用js函数2
- JS学习笔记2
- js中的幻燈片(2)
- C#学习之旅（1）
- flex 布局问题
- C++二进制的详细介绍
- 五大最佳开源java性能监控工具
- 2017 ACM/ICPC Asia Regional Qingdao Online C The Dominator of Strings
- js(2)
- 高效安全的设计模式——原型模式
- 输出代码的位置
- selectionSort之JAVA版与C++版
- HDU6216 A Cubic number and A Cubic Number 找规律 2017 ACM/ICPC Asia Regional Qingdao Online
- 想做互联网产品的理由
- 关于java编程该学什么？如何学？
- C++之汇编寻址
- linux安装redis以及配置文件修改
