date :2019/1/29
hello , javaScript.
javascript用于网页和用户之间的交互, 比如提交的时候,用户验证用户名是否为空的判断.
javascript和DOM结合的实例:
一图胜千言，千言不敌一实例
<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
<p id="text">这是一段可以设置隐藏和显示的文字</p>语言基础, BOM 和DOM才组成了完整的javascript 通过javascript操作DOM对象的时候才会带来很好的实用效果.
SCript标签:
javaScript代码必须放在script标签内
script标签可以放置在html的任何地方 , 一般建议放置在head头标签内,
执行顺序是从上到下 顺序执行.
使用外部js文件 如同css文件一样,当javascript代码特别多难以维护的时候 可以把javascript剥离出来单独放在一个文件中,在html中引用该文件即可. 准备一个hello.js 内容document.write("aaaa"); 注意,不要写script标签 因为在js文件中了 不必特意声明.
变量:
可以使用var来进行变量声明 也可以不使用var来进行变量声明.
var a=10; a=10;
变量命名的规则.和java差不多 开头可以使用_ $和字母 其他部分也可以使用 var3$a var3% 等这些都是不合法的.
调试:
用alert进行调试: 如 alert(1); 可以使用专业浏览器火狐的调试 还可以 console.log("end");
基本数据类型:
声明了但是没有赋值的时候 叫做undefined
都是var x= ???
变量类型判断. 使用typeof来进行判断数据类型.
类型转换:
<script>
console.log("aaa");
var a=10;
document.write(a.toString(2));
</script>toString的类型转换 可以在其中输入2 8 16进行进制的转换.
转换为数字. parseInt 和parseFloat()
转换为布尔值 Boolean()
关于Number和parseInt的区别 都可以来进行数字的转换, 但是当内容包含非数字的时候 number就会返回NAN (NOT A NUMBER)
parseint看情况 如果数字开头就合法 非数字开头就返回NAN
String和toString的区别 String会返回null 而toString会报错.
函数:
阶段性练习:
<script>
function $(id){
var value = document.getElementById(id).value;
return value;
}
function sum(){
var place = $("place");
var companyType = $("companyType");
var companyName = $("companyName");
var bossName = $("bossName");
var money = $("money");
var price = $("price");
debugger;
var shop =$("shop");
var result = place +"最大"+companyType+companyName+"倒闭了!";
document.getElementById("result").value= result;
}
</script>
<style>
span.table{
display: inline-block;
width: 100px;
margin-left: 20px;
border: 1px solid grey;
}
input{
height: 18px;
}
#result{
width: 400px;
height: 300px;
}
</style>
<body>
<span class="table">地名:</span>
<input class="shuru" id="place" type="text" />
<span class="table">公司类型:</span>
<input class="shuru" id="companyType" type="text" />
<br>
<span class="table">公司名称:</span>
<input class="shuru" id="companyName" type="text" />
<span class="table">老板姓名:</span>
<input class="shuru" id="bossName" type="text" />
<br>
<span class="table">money:</span>
<input class="shuru" id="money" type="text" />
<span class="table">产品:</span>
<input class="shuru" id="shop" type="text" />
<br>
<span class="table">价格计量单位:</span>
<input id="price" type="text" />
<button onclick="sum()">生成</button>
<textarea id="result"></textarea>
</body>总结其中的技术点: 在设置有重复的函数 $("")获取值的时候 可以先写一个function 然后利用通用的函数来简写化
另外 在input或者textarea标签中填写值的时候 可以写document.getElmentById("").value = result 直接赋值给空
/
事件:
事件是javascript允许html与用户交互的行为,用户任何对网页进行的操作都可以称之为事件.
事件有很多种 鼠标移动 鼠标单击 键盘点击等
<script>
function showHello(){
alert("Hello ZhiQiang");
}
</script>
<button onclick="showHello()">点击一下</button>
运算符:
+运算符的多态
当两边都是数字的时候 表现为算术运算符. 1+1=2
当任意一边是字符串的时候 表现为字符串的连接符. 如1+"2"= 12
逻辑运算符:
绝对等，绝对不等于
== ===
与==进行值是否相等的判断不同 ，绝对等 ===还会进行 类型的判断
比如 数字1和 字符串'1'比较，值是相等的，但是类型不同
所以==会返回true,但是===会返回false
绝对不等于!== 与上是一个道理
错误处理:
try{
document.write("试图调用不存在的函数f2<br>");
f2();
}catch(e){
document.write("捕捉到错误的产生<br>");
document.write(e.message);
}阶段性练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
table{
border-collapse: collapse;
}
td{
border: 1px silver solid;
padding: 5px;
font-size: 12px;
}
</style>
<script>
/**
* 取幂函数
*/
function p(base, power){
if(1 == power){
return base;
}
if(0 == power){
return 0;
}
var result = base;
for(var i = 0; i< power - 1; i++){
result = result * base;
}
return result;
}
/*取复利*/
function fuli(rate, year){
var result = 0;
for(var i=year;i>0;i--){
result+=p(rate,i);
}
return result;
}
/**
* 计算
*/
function calc(){
var initMoney = getIntValue("initMoney");
var rate = getIntValue("rate");
var year = getIntValue("year");
var each = getIntValue("each");
var sum1 = (year-1)*each+initMoney;
var sum3=each* fuli( (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);
var sum2 = sum3-sum1;
setValue("sum1",sum1);
setValue("sum2",sum2);
setValue("sum3",sum3);
}
function getIntValue(id){
return parseInt(document.getElementById(id).value);
}
/* 设置input框的数值 利用value= value来设置*/
function setValue(id, value){
document.getElementById(id).value = value;
}
</script>
<body>
<table>
<tr>
<td>起始资金</td>
<td><input type="text" id="initMoney" value="10000"> ￥ </td>
</tr>
<tr>
<td>每年收益</td>
<td><input type="text" id="rate" value="5"> %</td>
</tr>
<tr>
<td>复利年数</td>
<td><input type="text" id="year" value='10'> 年</td>
</tr>
<tr>
<td>每年追加资金</td>
<td><input type="text" id="each" value='10000'> ￥</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
</tr>
<tr>
<td>本金和</td>
<td><input type="text" id="sum1" disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
<td>利息和</td>
<td><input type="text" id="sum2" disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
<td>本息和</td>
<td><input type="text" id="sum3" disabled="disabled" value='0'> ￥</td>
</tr>
</table>
</body>
</html>
其中设置border-collepse 和padding :5px
JS数字对象详解:
数字对象123通过toFixed(2) 保留两位小数:123.00
PI 通过toFixed(3) 保留三位小数:3.142
数字对象123通过toExponential 返回计数法表达 1.23e+2
方法 valueOf() 返回一个基本类型的数字
还可以设置number. minValue number.maxValue 等
JS字符串对象详解:
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| new String() | 创建字符串对象 | 示例代码 |
| 属性 length | 字符串长度 | 示例代码 |
| 方法 charAt charCodeAt | 返回指定位置的字符 | 示例代码 |
| 方法 concat | 字符串拼接 | 示例代码 |
| 方法 indexOf lastIndexOf | 子字符串出现的位置 | 示例代码 |
| 方法 localeCompare | 比较两段字符串是否相同 | 示例代码 |
| 方法 substring | 截取一段子字符串 | 示例代码 |
| 方法 split | 根据分隔符，把字符串转换为数组 | 示例代码 |
| 方法 replace | 替换子字符串 | 示例代码 |
| 方法 charAt 方法 concat 方法 substring | 返回基本类型 | 示例代码 |
 | 练习 | 示例代码 |
创建字符串对象 new string(x);
字符串的长度: ;length
返回指定位置的字符: charAt 返回指定位置的字符 charCodeAt返回指定位置字符对应的Unicode码.
字符串的拼接: concat
子字符串出现的位置 indexOf 返回子字符串出现的第一次位置 lastindexOf返回最后一次出现的位置.
比较两段字符串是否相同 localeCompare
截取一段字符串: substring
根据分隔符,把 字符串转换为数组: 如x.split(" "); 若是x.split(" ",2) 则就是得到数组 并且只保留前两个数组[0][1].
替换子字符串 replace (search, replacement) 找到满足条件的子字符串search , 替换为replacement 但是默认情况下只会替换第一个子字符串,如果所有的都需要替换, 需要写成 x.replace(/a/g, "o")
或者 var regS = new ReGEXP("a","g");
var z = x.replace(regS, "o");
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("Hello JavaScript");
p('这个是原字符串: '+x);
var y = x.replace("a","o");
p('只替换第一个 a: '+y);
var regS = new RegExp("a","g");
var z = x.replace(regS, "o");
p('替换掉所有的 a: '+z);
</script>JS数组对象详解:
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| new Array | 创建数组对象 | 示例代码 |
| 属性 length | 数组长度 | 示例代码 |
| for for in | 遍历一个数组 | 示例代码 |
| 方法 concat | 连接数组 | 示例代码 |
| 方法 join | 通过指定分隔符，返回一个数组的字符串表达 | 示例代码 |
| 方法 push pop | 分别在最后的位置插入数据和获取数据(获取后删除) | 示例代码 |
| 方法 unshift shift | 分别在最开始的位置插入数据和获取数据(获取后删除) | 示例代码 |
| 方法 sort | 对数组的内容进行排序 | 示例代码 |
| 方法 sort(comparator) | 自定义排序算法 | 示例代码 |
| 练习-排序 | 示例代码 |
 | 答案-排序 | 示例代码 |
| 方法 reverse | 对数组的内容进行反转 | 示例代码 |
| 方法 slice | 获取子数组 | 示例代码 |
| 方法 splice | 删除和插入元素 | 示例代码 |
| 练习 | 示例代码 |
|
创建数组: new Array();
数组长度: x.length
遍历一个数组 :两种方式 1. 传统的 x< array.length 2 . (i in x) i是下标的意思 x[i]这样来显示每个数组的数值.
连接数组: concat来连接数组
通过指定分隔符 返回一个数组的字符串表达. x.join() 若是x.join("@") 分隔符不是默认的, 而是@ 3@1@4
分别在最后的位置插入和获取元素(获取后删除) push pop
分别在最开始的位置插入数据和获取数据(获取后删除) unshift shift
对数组的内容进行排序: sort
自定义的排序算法
sort()默认采用正排序，即小的数排在前面。 如果需要采用自定义排序的算法，就把比较器函数作为参数传递给sort()。
比较器函数:
function comparator(v1,v2){
return v2-v1; //v2-v1表示大的放前面，小的放后面
}
调用sort函数的时候，把这个比较器函数comparator作为参数传递进去即可
x.sort(comparator);
JS日期对象详解:
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| new Date | 创建日期对象 | 示例代码 |
| getFullYear getMonth getDate | 年/月/日 | 示例代码 |
| getHours getMinutes getSeconds getMilliseconds | 时:分:秒:毫秒 | 示例代码 |
| getDay | 一周的第几天 | 示例代码 |
| getTime | 经历的毫秒数 | 示例代码 |
| setFullYear setMonth setDate setHours setMinutes setSeconds | 修改日期和时间 |
创建日期对象: new Date();
获取年月日: getfullYear 和getyear的区别 getYear是得到从1900年到现在年份值差值 getmonth getdate
获取时分秒: Hours Minutes Seconds Milliseconds
一周的第几天: getDay 获取 基数从0开始
经历的毫秒数: getTime 从1970年8:00至今的毫秒数
修改日期和时间: setXXX
MATH对象详解:
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| 属性E PI | 自然对数和圆周率 | 示例代码 |
| 方法 abs | 绝对值 | 示例代码 |
| 方法 min max | 最小最大 | 示例代码 |
| 方法 pow | 求幂 | 示例代码 |
| 方法 round | 四舍五入 | 示例代码 |
| 方法 random | 随机数 |
随机数:方法 random 取0-1之间的随机数
一个 0-1 之间的随机数 : Math.random():
0.7497375327632183
十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5
9
6
8
8
5
6
10
8
8
7
后面加个5 使之限定在5 前面乘5数值 因为在0-1之间 乘积也会在0-5之间
document.write(Math.random());
document.write("<br>");
for(var i = 0; i<10 ; i++){
document.write(Math.round(Math.random() * 5)+5);
document.write("<br>");
JS设计自定义对象:
<script>
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
</script>为已存在的对象,增加新的方法;
Hero.prototype.keng = function(){
XXXXXXXXXXXX
}
就是找到hero的原型 Object
BOM 即 浏览器对象模型(Browser Object Model)
浏览器对象包括
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)\
返回上一次的操作. history.back
返回上上次的操作. history.go(-2) -1表示上次 -2表示上上次 依次类推 在浏览器后退按钮显示灰色的时候 history.back不起作用
跳转到另外一个界面:
<script>
function jump(){
//方法1
//location="/";
//方法2
location.assign("/");
}
</script>
<br>
<button onclick="jump()">跳转到首页</button>JS弹出框:
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| alert | 警告框 | 示例代码 |
| confirm | 确认框 | 示例代码 |
| prompt | 输入框 |
<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
<br>
<button onclick="p()">请输入用户名</button>输入框.
JS 计时器:
| setTimeout | 只执行一次 | 示例代码 |
| setInterval | 不停地重复执行 | 示例代码 |
| clearInterval | 终止重复执行 | 示例代码 |
| document.write() | 不要在setInterval调用的函数中使用document.write(); |
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>每隔一秒钟打印一次当前时间 setInterval 是设置间隔 其中第一个参数 是函数名字 不能加()
<p>每隔1秒钟，打印当前时间</p>
<div id="time"></div>
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
var t = setInterval(printTime,1000);
</script>
<br><br>
试一下
扫一扫
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
