js(1)
来源：互联网 发布：网络21 编辑：程序博客网 时间：2024/06/03 19:39
1.三种弹框
alert() 弹框（警告框）
confirm() 确认框
prompt(“提示信息”,默认值) 输入框
alert("这是一个测试")运行结果：
prompt("请输入年龄",18)运行结果：
<script>confirm("确定要退出吗")</script>运行结果：
2.document.write() 在页面中输出
console.log() 在调试平台
3.var 初始化变量
4.js中数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
5.调用
var car=[1,2,3]
普通数组调用方式：数组名[索引值] //car[0]
var car=["BMW","BYD","大众","奔驰"]; alert(car[3]);运行结果：
var obj={a:1,b:2,c:3}
普通对象调用方式：对象名.键值名 //obj.a
var obj=[{a:1,b:2},{a:3,b:4},{a:3,b:1}]
复杂对象调用方式：对象名[索引值].键值名 //obj[0].a
var info={ name:"zhangsan",sex:"男",address:"shanxi" }; alert(info.name+","+info.sex); var list=[{name:"zhangsan",sex:"男",address:"shanxi"}, {name:"lisi",sex:"男",address:"shanxi"}]; alert(list[1].name);运行结果1：
运行结果2：
6.运算符
算术运算符：
+ - * / % ++ –
a++ a=a+1
a– a=a-1
a++和++a区别：
区别在赋值时，a++ 先赋值后自加，++a 先自加，后赋值
<script> var a= 5, y,z; y=a++; z=++a; alert(a) alert(y) alert(z)</script>运行结果：7,5,7
赋值运算符
+= -= *= /= %=
+号： 功能1，连接功能
功能2，数据相加
比较运算符
== 等于
=== 绝对等于
！= 不等于
！== 绝对不等于
大于
< 小于
= 大于等于
<= 小于等于
比较运算符结果一般都为布尔值（true/false）
逻辑运算符
与 &&
或 ||
非 !
与x&&y 两边都为true，结果为true
或 x||y 两边只要有一个为true,结果就为true
非！x 你为true,我为flase
条件运算符（三目运算符）
语法： （条件）?”条件成立时输出的值”:”条件不成立时输出的值”
<script> var age=prompt("请输入年龄",18); alert((age>=18)?"可以进入":"不可以进入")</script>输入值为20：
7.函数
function funname(){}
带参函数
function funname(a,b){}
带有返回值的函数
return 值
函数调用： onclick 点击事件
<body><button onmousemove="show()">click</button><button onclick="sum(5,6)">计算</button><button onclick="sum(23,6)">计算1</button><script> function show(){ alert("测试"); } function sum(x,y){ var z; z=x+y; alert(z) }</script></body>运行结果：鼠标放在click上时弹出测试弹框，点击计算结果为11点击计算1结果为29.
<body><p>单价:<input type="text" class="price"/></p><p>数量:<input type="text" class="num"/></p><p><input type="button" class="btn" value="计算" onclick="show()"/></p><p>结果:<input type="text" class="result"></p><script> function show(){ var price=document.getElementsByClassName("price")[0].value; var num=document.getElementsByClassName("num")[0].value; var result=price*num; document.getElementsByClassName("result")[0].value=result; }</script></body>运行结果：
简易计算器
<body><p>数1:<input type="text" class="one"/></p><p>数2:<input type="text" class="two"/></p><p><input type="button" class="jia" value="+" onclick="show2()"/></p><p><input type="button" class="jian" value="-" onclick="show1()"/></p><p><input type="button" class="cheng" value="*" onclick="show()"/></p><p><input type="button" class="chu" value="/" onclick="show3()"/></p><p>结果:<input type="number" class="result"></p><script> function show(){ var one=document.getElementsByClassName("one")[0].value; var two=document.getElementsByClassName("two")[0].value; var result=one*two; document.getElementsByClassName("result")[0].value=result; } function show1(){ var one=document.getElementsByClassName("one")[0].value; var two=document.getElementsByClassName("two")[0].value; var result=one-two; document.getElementsByClassName("result")[0].value=result; } function show3(){ var one=document.getElementsByClassName("one")[0].value; var two=document.getElementsByClassName("two")[0].value; var result=one/two; document.getElementsByClassName("result")[0].value=result; } function show2(){ var one=document.getElementsByClassName("one")[0].value; var two=document.getElementsByClassName("two")[0].value; var result=one+two; document.getElementsByClassName("result")[0].value=result; }</script></body>运行结果：
8.变量作用域
局部变量 ：只在函数内部起作用，在函数执行结束后，自动消毁
全局变量： 整个页面中起作用，在页面关闭后消毁
如果在函数内部定义变量时，没有写初始化var ，则视为全局变量
获取值的方式有三个：
获取节点内部的内容（包含子标签） innerHTML
获取节点内部纯文本 innerText
获取表单元素中的值 value
找节点
通过 id找：document.getElementById(“id名”)
通过标签名找：document.getElementsByTagName(“标签名”)
通过class 名找：document.getElementsByClassName(“class名”)
<body><ul> <li>11111</li> <li id="one" onclick="show()">22222</li> <li>33333</li></ul><p><input type="text" id="username"/></p><p><input type="button" onclick="showlist()" value="click"/></p><script> function show(){ alert(document.getElementById("one").innerHTML) } function showlist(){ alert(document.getElementById("username").value) }</script></body>
点击22222时弹出弹框 
9，if条件语句
if(){}else{}
<script> var income=prompt("请输入你的年收入",10); if(income>=10){ document.write("你可以买汽车了"); }else if(income>=5){ document.write("你可以买电动车了"); }else if(income>=2){ document.write("你可以买自行车了"); }else{ document.write("别买了"); }</script>运行结果：输入大于等于10，弹出可以买汽车，输入大于等于5，弹出可以买电动车，输入大于等于2，弹出可以买电动车。
10.switch 条件语句
parseInt() 强制转换为整数类型
break;程序从当前位置跳出
new Date() //获取当前系统日期
.getDay() //获取星期
<script> var day=parseInt(prompt("请输入星期",0)); switch(day){ case 0:document.write("今天是星期天"); break; case 1:document.write("今天是星期一"); break; case 2:document.write("今天是星期二"); break; case 3:document.write("今天是星期三"); break; case 4:document.write("今天是星期四"); break; case 5:document.write("今天是星期五"); break; case 6:document.write("今天是星期六"); break; default:document.write("请输入正确星期"); break; }</script> 运行结果：输入3，弹出今天是星期三
11.for循环语句
for(条件1；条件2；条件3){}
<script> var car=["BMW","BYD","大众","奔驰"] for(var i=0;i<4;i++){ document.write(car[i]+"<br>"); }</script> 运行结果：
输出九九乘法表：
<script> document.write("<table border='1' width='800px'>"); for(var x=1;x<10;x++) { document.write("<tr>"); for (var y = 1; y <= x; y++) { document.write("<td>" + x + "*" + y + "=" + x * y + "</td>"); } document.write("</tr>"); } document.write("</table>");</script>
<body><script> for(var i=5;i>0;i--){ var msg=" "; for(var j=1;j<=i;j++){ msg=msg+" * " } document.write("<p align='center'>"+msg+"</p>"); }</script></body>运行结果：
输出100以内7的倍数
<body><script> var i; for(i=1;i<=100;i++){ if (i%7==0){ document.write(i+"<br>"); } }</script>while和do while区别：
while先判断后执行语句，
do while 会先执行语句，再判断
当条件不成立时，while语句停止循环，do while 至少会运行一遍程序
continue 退出当前一轮循环
break 直接跳出循环
12.parseInt() 强制转换为整型
parseFloat() 强制转换为浮点型
Number() 转换为数字
String() 转换为字符串
Boolean() 转换为布尔型
<script> var x=123; console.log(typeof(x)); var y=Number(x); console.log(typeof(y)); var a="true"; z=Boolean(a); console.log(typeof(z)); var m=String(x); console.log(typeof(m)); var one=[1,2,3]; console.log(one.constructor); var two={a:1,b:2}; console.log(two.constructor);</script>13.找对象： (通过ID，通过class，通过标签名)
var obj=document.getElementById()
1、获取值： innerHTML,innerText,value
obj.innerHTML //获取值
obj.innerHTML=值 //赋值
2、改变样式
obj.style.样式名=样式值； //样式名为驼峰式写法
3、改变属性
obj.属性名=属性值
<body><input type="text" class="username"/><script> var input=document.getElementsByClassName("username")[0]; input.onchange=function(){ this.style.backgroundColor="yellow"; }</script>
14.事件：
onmouseover 鼠标移上去时触发
onmouseout 鼠标离开时触发
onmousedown 鼠标按下
onmouseup 鼠标松开
onchange 表单内容发生改变时触发
onfocus 获取焦点
onblur 失去焦点
<body><img src="img/pic_bulboff.gif" alt=""/><script> var img=document.getElementsByTagName("img")[0]; img.onmousedown=function(){ this.src="img/pic_bulbon.gif"; }; img.onmouseup=function(){ this.src="img/pic_bulboff.gif"; }</script></body>
<body><p><input type="text" class="username"/></p><p><input type="submit"/></p><script> var user=document.getElementsByClassName("username")[0]; user.onfocus=function(){ this.style.border="solid 1px red"; }; user.onblur=function(){ this.style.border="solid 1px blue"; };</script></body>结果：获得焦点后边框为红色，失去焦点后边框为蓝色
<body><p>姓名:<input type="text" class="username" value="请输入"/></p><p>性别:<select class="sex"> <option value="男" selected>男</option> <option value="女">女</option> </select></p><div class="two"></div><div class="one">点击事件</div><script> var user=document.getElementsByClassName("username")[0]; user.onfocus=function(){ document.getElementsByClassName("two")[0].innerHTML="您已获得焦点" }; user.onblur=function(){ document.getElementsByClassName("two")[0].innerHTML="您已失去焦点" }; var sex=document.getElementsByClassName("sex")[0]; sex.onchange=function(){ document.getElementsByClassName("two")[0].innerHTML="您选择的性别是:"+sex.value; }; document.getElementsByClassName("one")[0].onclick=function(){ if(this.innerHTML=="点击事件"){ this.innerHTML="再点击一次" }else if(this.innerHTML=="再点击一次"){ this.innerHTML="欢迎使用" }else if(this.innerHTML=="欢迎使用"){ this.innerHTML="谢谢配合" }else if(this.innerHTML=="谢谢配合") { this.innerHTML = "再见" }else{ this.style.display="none"; } }</script></body>点击事件，点击点击五次后消失
<div class="box"> <span onmouseover="change('pink')">Pink</span> <span onmouseover="change('yellowgreen')">Yellowgreen</span> <span onmouseover="change('greenyellow')">Greenyellow</span> <span onmouseover="change('blue')">Blue</span></div><script> function change(color){ document.getElementsByClassName("box")[0].style.backgroundColor=color; }</script>鼠标放在绿色上时的结果：
<body><p> <a href="" data-color="skyblue">蓝色</a> <a href="" data-color="yellowgreen">绿色</a> <a href="" data-color="pink">粉色</a></p><script> var newa=document.getElementsByTagName("a"); for(var i=0;i<newa.length;i++){ newa[i].onmouseover=function(){ document.bgColor=this.getAttribute("data-color"); } }</script></body>鼠标放在绿色上时的结果： 
15.获取属性值：
obj.getAttribute(“属性名”)
设置属性值 ：
obj.setAttribute(“属性名”，“新的属性值”)
访问对象的属性：
语法： 对象名.属性名
访问对象的方法
16.Number对象
1、toString()方法
.toString() 转换进制 // obj.toString(16) /.toString(8) /.toString(2)
2、Infinity 无穷大
3、obj.toFixed(n) //保留小数位数 n是大于0的整数 n表示小数位数个数
<script> var x=123.45678; y= x.toFixed(2); console.log(y);</script>输出结果：123.46
验证码
<body><p> <input type="text"/><span></span></p><script> function yzm(){ var one,two,three,four; one=Math.floor((Math.random()*10)); two=Math.floor((Math.random()*10)); three=Math.floor((Math.random()*10)); four=Math.floor((Math.random()*10)); var msg=one+" "+two+" "+three+" "+four; document.getElementsByTagName("span")[0].innerText=msg; document.getElementsByTagName("span")[0].style.backgroundImage="url('img/yz"+one+".jpg')"; } yzm(); var aspan=document.getElementsByTagName("span")[0]; aspan.onclick=yzm;</script></body>- 【js】js资料(1)
- JS - 1
- js-1
- js(1)
- JS(1)
- JS-1
- js(1)
- JS学习1（JS实现，JS引入）
- common1.js js中常用方法1
- 【js杂记】js、jquery实战杂记 1
- js系列-1 js对象相关
- JS个人笔记1-JS简介
- node.js随笔1-初识node.js
- 【JS】从零开始编一个JS游戏(1)
- js 验证1
- js summary(1)
- 从JS开始-1
- JS资料1
- 微信小程序如何抽出model层，避免重复造轮子
- 工作学习感悟
- Makefile学习总结
- hdoj-2896病毒侵袭（AC自动机）
- Linux-008 CentOS7设置自动登陆
- js(1)
- 汇编语言2
- Android使用Handler造成内存泄露的分析及解决方法
- apache压力测试之ab工具
- 第十七章经典抽象数据结构四:树的前中后序遍历
- 「NOIP2017」列队 //线段树
- 【Scikit-Learn 中文文档】模型选择：选择估计量及其参数
- 浅谈时间复杂度和空间复杂度
- 如何将文件隐藏在图片中
