JavaScript
JavaScript 主要用于页面与用户之间的交互,常见应用:用户输入合法检测、提交提示等。
完整的JavaScript由语言、BOM和DOM组成。
javascript代码可以放在<script> </script> 标签中,script标签一般放在<head> </head>中。只要加载就会执行。多段script代码会按照从上到下的顺序依次执行
如何引用外部js文件:
<html> <script src="study/hello.js"></script> </html>
JS注释: 和C语言相同,// 和 /* */
变量
var a = 10;
或者直接 a = 10; var可有可无
调试
1)使用 alert() 进行调试,类似于printf
2)在火狐中使用 firebug.log( )进行调试
基本数据类型
underfined类型: 声明了但未赋值,如 var a;
Boolean类型,值为 true 和 false
Number类型,可以表示10进制、8进制、16进制、科学记数法等数据 a = 10; b = 012; c = 0xA; d = 1.23e10
字符串类型, js中没有字符只有字符串,单引号和双引号都是字符串
类型可以动态改变,如: x = 10; x = “jashdkjasdh”;x可以先是number,后是字符串
可以使用 typeof 进行类型判断
数据类型转换
伪对象:js的基本数据类型也是一个对象,算作伪对象,所以基本数据类型也具有属性和方法
length属性:求字符串长度。var a = "ajkhadjhd"; document.write(a.lenght)
a.toString():数字、布尔、字符串都可以转换为string;
数字转字符串时,a.toString(16)可以将数字转换为16进制字符串;
String(null)返回字符串“null”; a = null;a.toString()无法执行;
字符串转数字:parseInt(“100”) 和 parseFloat(“3.1415”)方法;
parseInt("100ajhac")返回100;parseInt("kjasd")返回NaN;
Number("100")返回100;Number("100abc")返回NaN;
转Boolean:Boolean(0); Boolean(3.14) Boolean("kjasdh");
空字符串、数字0、null转换为false; 其它都转换为 true;
函数
<script> function calc(x,y){ return x+y; } var sum = calc(500, 20); </script>
例子1
利用 js 制作简易计算器
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <style> input{ width: 100px; } </style> <script> function cacl(){ var a = document.getElementById("num1").value; var b = document.getElementById("num2").value; var c = parseInt(a) + parseInt(b); document.getElementById("res").value = c; } </script> </head> <body> <input type="text" id="num1">+ <input type="text" id="num2">= <input type="text" id="res"> <button onclick="cacl()">运算</button> </body> </html>
1)使用 document.getElementById 获取html元素;再通过.value属性获取值;获取到的值是string类型
2)在button 上设置 onclick = " js函数 ",可以在按钮按下时执行该函数
例子2
销售皮包的宣传语生成器
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <style> table{ } input{ background-color: white; border: solid 1px #cccccc; width: 150px; height: 23px; color: black; } textarea{ width:600px; height: 150px; } button{ width: 70px; } </style> <script> function textGen(){ var addr = document.getElementById("addr").value; var comKD = document.getElementById("comKD").value; var comName = document.getElementById("comName").value; var boss = document.getElementById("boss").value; var money = document.getElementById("money").value; var product = document.getElementById("product").value; var price = document.getElementById("price").value; document.getElementById("ans").value = addr + "最大的" + comKD + comName +"倒闭了,王八蛋老板" + boss + "吃喝嫖赌,欠下" + money + "个亿,带着他的小姨子跑路了!我们没有办法,拿着" + product + "抵工资,原价都是一" + price + "多、两" + price + "多的" + product + ",现在全部只卖二十块,统统只要二十块!" + boss + "王八蛋,你不是人!我们辛辛苦苦给你干了大半年,你不发工资,还我血汗钱,还我血汗钱!"; } </script> </head> <body> <table> <tr> <td><input value="地名:" disabled="disabled"></td> <td><input id="addr"></td> <td><input value="公司类型:" disabled="disabled"></td> <td><input id="comKD"></td> </tr> <tr> <td><input value="公司名称:" disabled="disabled"></td> <td><input id="comName"></td> <td><input value="老板姓名:" disabled="disabled"></td> <td><input id="boss"></td> </tr> <tr> <td><input value="欠债:" disabled="disabled"></td> <td><input id="money"></td> <td><input value="产品:" disabled="disabled"></td> <td><input id="product"></td> </tr> <tr> <td><input value="价格计量单位:" disabled="disabled"></td> <td><input id="price"></td> </tr> <tr> <td colspan="4" align="center"><button onclick="textGen()">生成</button></td> </tr> </table> <textarea id="ans"> </textarea> </body> </html>
1)input 仅仅作为一个消息展示框而禁止输入:<input disabled="disabled">
作用域
函数参数的作用域在该函数内部;
全局变量(函数外的变量)的作用域在全局;
事件
事件时js允许html和用户交互的行为。用户对页面的任何操作都会产生事件,如:鼠标移动、鼠标点击、键盘点击等;
鼠标点击事件:1)定义一个js函数 2)在button元素上增加属性 onclick = "js函数名" 3)即可实现在鼠标点击时运行该函数
运算符
js支持的运算符:
1)++ -- += -= ;
2)字符串拼接的" + "( 字符串 + 非字符串类型, 非字符串会被转为string再做拼接)
3)绝对等于和绝对不等于: === !== ,与==和!=相同之处都是返回booleam类型;不同之处在于 123 == “123” 返回 true,而 123 === “123” 返回false, 即===还要检查数据类型是否一致
4)js支持三目运算符 a = b > 3? 1 : 2;
循环语句
js支持 for循环、while循环、do while 循环,continue 和 break;
错误处理
js支持 try catch语句
例子3
利用js制作复利计算器
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<head> <style> table{ width:250px; height: 250px; border-collapse: collapse; border:solid 1px #cccccc; font-size: 12px; } td{ border: solid 1px #cccccc; height: 12.5%; padding-left: 3px; } input{ width: 75%; height: 70%; margin: auto 3px auto 10px; } </style> <script> function pow(base, p){ if(p == 1) return base; else if(p == 0) return 1; else{ var res = base; for(var i = 0; i < p - 1; i++) res = res * base; return res; } } function fuli(year, rate){ var res = 0; for(var i = 1; i <= year; i++){ res = res + pow(rate, i); } return res; } function setValue(id, value){ document.getElementById(id).value = value; } function getValue(id){ return document.getElementById(id).value; } function process(){ var init = parseInt(getValue("info1")); var rt = parseInt(getValue("info2")); var year = parseInt(getValue("info3")); var addition = parseInt(getValue("info4")); var baseSum = init + (year - 1 )* addition; var Sum = fuli(year - 1, rt / 100.0 + 1.0) * addition + init * pow(1.0 + rt / 100.0, year); var interests = Sum - baseSum; setValue("info5", baseSum); setValue("info6", interests); setValue("info7", Sum); } </script> </head> <body> <table> <tr> <td width="35%"> 起始资金 </td> <td width="65%"> <input id="info1">¥ </td> </tr> <tr> <td> 每年收益 </td> <td> <input id="info2">% </td> </tr> <tr> <td> 复利年数 </td> <td> <input id="info3">年 </td> </tr> <tr> <td> 每年追加资金 </td> <td> <input id="info4">¥ </td> </tr> <tr> <td colspan="2" align="center"> <button onclick="process()">计算</button></td> </tr> <tr> <td> 本金和 </td> <td> <input id="info5" disabled="disabled">¥ </td> </tr> <tr> <td> 利息和 </td> <td> <input id="info6" disabled="disabled">¥ </td> </tr> <tr> <td> 本息和 </td> <td> <input id="info7" disabled="disabled">¥ </td> </tr> </table> </body>
1)利用 document.getElementById 设置html元素的值时,可以将其封装为函数 getValue 和 setValue