一、基础知识
这里写目录标题
1、hello JavaScript
A.JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。
B.显示出里面的语句
<script>
ocument.write("Hello Javascript");
</script>
C、java和DOM
οnclick="…" 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display=‘none’ 隐藏
.style.display=‘block’ 显示(准确的讲，以block的形式显示)
<button onclick='document.getElementById('text').style.display='none''>隐藏文本
</button>
<button onlick='document.getElementById('text').style.display='block''>显示文本
</button>
<p id='text'>这是一段可以被JavaScript隐藏的文本</p>
效果如下：
D、JavaScript包含语言基础、DOM和bom。
2、JavaScript的标签（使用script的标签）
① script一般就是放在HTML里就可，主要在head里
主要就是script标签以及document.write
<html>
<head>
<script>
document.write("it is javascript");
</script>
</head>
</html>
②连续执行但是不分段
<script>
document.write("so show me");
</script>
<script>
document.write("i show you");
</script>
③直接使用外部js
不写script标签
<html>
<script src="https://bilibili.com"></script>
</html>
3、注释
单行注释多行注释均跟java相同
4、变量
①用var
<script>
var x=10;
document.write("变量X的值时："+x);
</script>
这样的效果
②不用var
直接上面的代码去掉var
③变量命名（和java相同）
开头只能是下划线、美元符号和字母
整体有下划线、字母、美元符号和数字组成
5、调试过程
可以一步一步注释掉
用这个//alert(1)
或者console.log(“end”);用在快要结束时
6、调试方法
A、声明了但是未赋值的
就是var了但是无赋值
B、布尔型（只能true和false）
<script>
var x=true;
var y=false;
document.write("布尔值:"+x);
document.write("<br>");
document.write("布尔值:"+y);
</script>
C、数字
可以有整型浮点型
可以十进制可以八进制二进制
var a=10; //十进制
var b=012;//第一位是0，表示八进制
var c=0xA;//0x开头表示十六进制
var d=3.14;//有小数点表示浮点数
var e=3.14e2;//使用e的幂表示科学计数法
D、字符串
可以用单引号或者双引号括起来
E、变量是动态的
F、变量的类型的判定
var x=10/‘use’...;
document.write('声明了但是未赋值的时候，类型是： '+typeof x);
6、类型转换
A、伪对象
JavaScript中即使是基本对象类型，也是伪对象，所以可以调用伪对象来得到长度和字符类型。
<script>
var a="hello bts";
document.write("变量"+(typeof a));
document.write("<br>");
document.write("长度"+a.length);
</script>
B、转为字符串类型
ps:如果是数字类型转字符串类型时顺便把进制（在to String的括号里写上2,8等即可）
<script>
var a=10;
document.write("数字 "+a+" 转换为字符串"+a.toString());
document.write("<br>");
</script>
C、转为数字
javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字
<script>
document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
document.write("<br>");
document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
</script>
如果是10ABC，得到10
如果是hello world，得到NaN（not a number）
D、转为Boolean
使用内置函数Boolean() 转换为Boolean值
当转换字符串时：
非空即为true
当转换数字时：
非0即为true
当转换对象时：
非null即为true
<script>
document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14));
</script>
E、转换为数字的两种方法
Number()和parseInt()一样，都可以用来进行数字的转换
区别在于，当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN
<script>
document.write("通过Number() 函数转换字符串'abc123' 后得到的数字："+Number("123abc"));
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'123' 后得到的数字："+parseInt("123abc"));
</script>
F、String()和to String()
String()会返回字符串"null"
toString() 就会报错，无法执行
<script>
var a = null;
document.write('String(null) 把空对象转换为字符串：'+String(a));
document.write("<br>");
document.write('null.toString() 就会报错，所以后面的代码不能执行');
document.write(a.toString());
document.write("因为第5行报错，所以这一段文字不会显示");
</script>
7、java函数相关
function可以用于定义一个函数
()里面可以写参数，如果没有就是无参
{ }里面写内容
还要引用这个函数才能执行，类似java
<script>
function print()
{
document.write("这一句话是由一个自定义函数打印");
}
print();
</script>
有带参数的如下
关注参数写的位置
<script>
function print(a)
{
document.write(a);
}
print("pts");
print("<br>");
print("army");
</script>
有返回值的
<script>
function print(message){
document.write(message);
}//这里不能省，否则后面的print就没用了，直接出现打印机
function sum(a,b)
{
return a+b;
}
var su=sum(100,200);
print(su);
</script>
阶段练习1
答案
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
input{
width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1+num2;
document.getElementById("result").value=result;
}
</script>
<input type="text" id="num1"> +
<input type="text" id="num2" >
=
<input type="text" id="result" >
<input type="button" value="运算" onclick="calc()">
我自己（但是最后还没法算结果，得再改改）
<script>
function get(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
num1=parseFloat(num1);
num2=parseFloat(num2);
var resullt=num1+num2;
document.getElementById("result").value=result;}
}
</script>
<input type='text' id='num1' size=5>+<input type='text' id='num2' size=5>=<input type='text' id='result' size=5 >
<input type="button" value="运算" onclick="get()">
效果如下
8、作用域
像下面的f1里的参数只是在f1里不会到f2里用
<script>
function f1(a){
document.write('在参数作用域中值为'+a);
}
function f2(){
document.write('a不在这一个函数范围内'+a);
}
f1(5);
f2();
document.write('函数外不可访问'+a);
</script>
全局变量
（就算只是在一个参数中改变要变）
<script>
var a = 0;
function f1(){
document.write('通过函数f1 设置全局变量a的值 为 5');
a = 5;
}
function f2(){
document.write('通过函数f2 得到 '+a);
}
f1();
document.write('<br>');
f2();
</script>
9、鼠标点击弹出框
<script>
function showHello(){
alert("Hello JavaScript");
}
</script>
<button onclick="showHello()">点击一下</button>
10、算数运算符
±*/%加减乘除取余
1++,先取得1再加1
++1,先加1，在得到2
赋值符号用=
x=x+1等同于x+=1
+既可以是加法也可以是连接符号
11、逻辑运算符
A、基本逻辑运算符
>
>=
==
!=
最后如果+（2！=3）返回值为false
B、==1和字符串1也等，返回true
===1和字符串1不等，返回false
C、三目运算符
跟java相同
12、条件语句
①单纯的if eise
或者加个else if
<script>
var age=35;
if(age<18)
{
document.write("如果年龄小于18，是未成年");
}
else if(age<22){
document.write("中米");
}
else
{
document.write("否则，是成年人");
}
</script>
case
<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var today;
switch (day)
{
case 0:
today="星期天";
break;
case 1:
today="星期一";
break;
case 2:
today="星期二";
break;
case 3:
today="星期三";
break;
case 4:
today="星期四";
break;
case 5:
today="星期五";
break;
case 6:
today="星期六";
break;
}
document.write("今天是 ： "+today);
</script>
13、循环结构
for循环
<script>
function p(s){
document.write(s);
document.write("<br>");
}
for(var i=0;i<5;i++)
{
p(i);
}
</script>
while循环
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var i=0;
while(i<4)
{
p(i);
i++;
}
</script>
do while就是先do在while
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var i = 0;
do{
p(i);
i++;
} while(i<5);
</script>
continue结束本次循环开启下一次
break直接全部结束
14、错误处理
①定义了f1函数，但是却调用了f2
会导致代码没法执行报错
②try catch语句找错误
<script>
function f1( )
{
document.write("here");
}
try{
document.write("试图调用不存在的函数f2()<br>");
f2();
}
catch(err)
{
document.write("捕捉错误");
document.write(err.message);
}
document.write("<p>finally</p>");
</script>
二、对象
1、数字
1、创建数字对象
<script>
var x=new Number(123);
document.write("数字对象x的值："+x);
document.write("<br>");
document.write("数字对象x的对象类型为："+typeof x);
document.write("<br>");
var y=123;
document.write("数字是"+y);
document.write("<br>");
document.write("基础类型类型"+typeof y);
</script>
2、最大最小值
<script>
document.write("数字max的值："+Number.MIN_VALUE);
document.write("数字max的值："+Number.MAX_VALUE);
</script>
3、返回小数位数表达
<script>
function p(s)
{
document.write(s);
document.write("<br>");
}
var a=new Number("123");
p("留两位数"+a.toFixed(2));
var b=new Number("3.1415936");
p("留下三位小数"+b.toFixed(3));
</script>
4、科学计数法
var a=new Number(“123”);
p(“科学计数法”+a.toExponential());
<script>
function p(s)
{
document.write(s);
document.write("<br>");
}
var a=new Number("123");
p("科学计数法"+a.toExponential());
var b=new Number("3.1415936");
p("科学计数法"+b.toExponential());
</script>
5、返回值的数字类型
PS：一般 var a=new Number(“123”);得到的应该是object
它的value留下的是number
<script>
function p(s)
{
document.write(s);
document.write("<br>");
}
var a=new Number("123");
var b=a.valueOf();
p(typeof a);
p(typeof b);
</script>
①练习
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
input{
width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1*num2;
var a=result.toExponential();
document.getElementById("result").value=a;
}
</script>
<input type="text" id="num1"> *
<input type="text" id="num2" >
=
<input type="text" id="result" >
<input type="button" value="运算" onclick="calc()">
2、字符串
①字符类型
<script>
var x = "5";
var y = new String(x);
document.write("变量x的值是:"+x);
document.write("<br>");
document.write("变量x的类型是:"+(typeof x));
document.write("<br>");
document.write("变量y的值是:"+y);
document.write("<br>");
document.write("变量y的类型是:"+(typeof y));
document.write("<br>");
</script>
②返回指定字符
charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码
重点部分
document.write('通过 charAt(0)获取位置0的字符串： '+y.charAt(0)); //返回H
document.write("<br>");
document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码 ：'+y.charCodeAt(0));
③将两者连接起来
主要代码
<script>
var x = new String("mic ");
var y = new String("drop");
document.write( 'x: '+x);
document.write('<br>');
document.write( 'y: '+y);
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' + x.concat(y) );
</script>
④字符串中出现某个字符定位
indexOf 返回该字符第一次出现的位置
lastIndexOf 返回该字符最后一次出现的位置
<script>
var y = new String("mic droping");
document.write('<br>');
document.write( y.indexOf ("i"));
document.write('<br>');
document.write( y.lastIndexOf ("i") );
</script>
⑤比较是否相同
0 表示相等
1 表示被拿来作比较的字母顺序靠后
-1 表示被拿来作比较的字母顺序靠前
<script>
var x = new String("jk");
var y = new String("jk");
var z = new String("jm");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '字符串z的值: '+z);
document.write('<br>');
document.write(' 用localeCompare()判断 x和y是否相等 '+x.localeCompare(y));
document.write('<br>');
document.write('用 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));
document.write('<br>');
</script>
⑥截取不部分
换成这个代码+x.substring (0,3)
左开右闭，取左边
⑦split 根据分隔符，把字符串转换为数组。
注： 第二个还可以表示返回数组的长度
<script>
var x = new String("Hello This Is JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
var y = x.split(" ");//这里是指遇到空格就撕开
document.write('通过空格分隔split(" "),得到数组'+y);
document.write("<br>");
var z = x.split(" ",2);
document.write('通过空格分隔split(" ",2),得到数组，并且只保留前两个'+z);
</script>
⑧替换字符
replace(search,replacement)
找到满足条件的子字符串search，替换为replacement
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("bts army forever");
p('原字符串: '+x);
var y = x.replace("b","p");
p('只替换第一个 : '+y);
var regS = new RegExp("r","g");
var z = x.replace(regS, "o");
p('替换掉所有的 : '+z);
</script>
⑨返回类型
三种都可，按例子使用
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("Hello JavaScript");
var temp = x.charAt(0);
p('charAt返回的值'+temp);
p('其类型是'+ typeof temp );
var temp = x.concat("!!!");
p('concat返回的值'+temp);
p('其类型是'+ typeof temp );
var temp = x.substring(0,5);
p('substring返回的值'+temp);
p('其类型是'+ typeof temp );
</script>
2、数组
①、新建数组
（其实这里的p里面的东西还有点蒙）
<script>
function p(s,v){
document.write(s+' '+v);
document.write("<br>");
}
var x = new Array(); //创建长度是0的数组
p('通过 new Array()创建一个空数组:',x);
x = new Array(5); //创建长度是5的数组,，但是其每一个元素都是undefine
p('通过 new Array(5)创建一个长度是5的数组:',x);
p('像new Array(5) 这样没有赋初值的方式创建的数组，每个元素的值都是:',x[0]);
x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x);
</script>
②、数组长度
x.length跟Java类似
③遍历数组
其实for的跟java类似甚至相同
遍历有两种方式
1.结合for循环，通过下标遍历
2.使用增强for in循环遍历
需要注意的是，在增强for in中，i是下标的意思。
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('当前数组是:'+x);
p("way1");
for(i=0;i<x.length;i++){ //普通for循环
p(x[i]);
}
p("way2");
for(i in x){ //for in 循环
p(x[i]);
}
</script>
④连接两个数组
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(2,0,1,3);
var y = new Array(0,6,1,3);
p('数组x是:'+x);
p('数组y是:'+y);
var z = x.concat(y);
p('用concat连接数组x和y');
p('数组z是:'+z);
</script>
⑤通过指定的字符得到数组的字符串表示
方法 join 通过指定分隔符，返回一个数组的字符串表达
像这样
y = x.join()
z = x.join("@")
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(6,1,3);
p('数组x是:'+x);
var y = x.join();
p('y = x.join() 得到的是数组x的字符串表达，其值是'+y+" 其类型是 :" +(typeof y));
var z = x.join("@");
p('z = x.join("@");是x的字符串表达，不过分隔符不是默认的"," 而是"@" : '+z);
</script>
⑥排序
直接sort排下来
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(2,0,1,3,0,6,1,3);
p('数组x是:'+x);
x.sort();
p('使用sort排序后的数组x是:'+x);
</script>
倒序
function comparator(v1,v2){
return v2-v1;
}
这里是指把大的放前小的在后
<script>
function p(s){
document.write(s);
document.write("<br>");
}
function comparator(v1,v2){
return v2-v1;
}
var x = new Array(6,12,1,5,4,9,6);
p('数组x是:'+x);
x.sort(comparator);
p('使用sort 进行自定义倒排序后的数组x是:'+x);
</script>
反过来
x.reverse();
获得子数组
在数组x是:3,1,4,1,5,9,2,6
x.slice(1)获取的子数组是:1,4,1,5,9,2,6
x.slice(1,3)获取的子数组是:1,4，取不到3的部分
var x1=x.slice(1);这样既可
如果是（1,5）得到1415
⑦删除插入
x.splice (3,2);//从位置3开始 ，删除2个元素
p('x.splice (3,2) 表示从位置3开始 ，删除2个元素:'+x);
x.splice(3,0,1,5);
p('x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:'+x);
三、BOM部分
TBC
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
