JavaScript
https://how2j.cn/k/javascript/javascript-casting/429.html?p=119445
JavaScript用于网页与用户之间的交互。比如提交时候，判断姓名是否为空。
完整的JavaScript语言是由语言基础，BOM，DOM三部分构成。
1. 语言基础
1.1 Hello JavaScript
通过JavaScript向文档输出文本。
document是JavaScript的内置对象，代表浏览器的文档部分。
document.write(“Hello JavaScript”);向文档写入字符串。
<script>
document.write("Hello JavaScript");
</script>
1.2 script标签
代码位置
JavaScript代码必须放在script标签中。
script代码可以放在html的任何地方，一般建议放在head标签中。
执行顺序
如果有多段script标签，执行顺序是由上往下依次执行。
使用外部js文件
JavaScript代码太多放在html中会显得很繁杂，可以通过像css一样，引入js文件来达到剥离JavaScript代码的效果。
新建一个，hello.js内容：（js文件中不要写script标签）
document.write("Hello JavaScript");
引入外部js文件
<html>
<script src="./hello.js"> </script>
</html>
1.3 注释
JavaScript的两种注释方式，
//单行注释
/*
多行注释
*/
1.4 变量
JavaScript使用var来声明一个变量。
不使用var，也可以，直接实例化一个对象。
var、const、let关键字区别
简单来说，var定义的变量在整个方法作用域有效，同一变量可重复定义。
const通常用来定义常量，作用域在循环体内或者相应的作用域内有效。同一变量不可重复定义。
let通常用来定义变量，作用域在循环体内或者相应的作用域内有效。同一变量不可重复定义。
1.5 JavaScript调式办法
使用alter(1)进行调试。
JavaScript代码加入alter(1)会弹出对话框，内容为1。
这表示alter(1)网上的代码都是可以运行的。不停的往下移动alter(1)，直至不再跳出对话框，表明alter(1)，上面的那行是有问题的。这样通过不断缩小范围来定位问题所在。
使用浏览器调试
使用火狐或者谷歌浏览器，点击F12键，进入调试模式。
console.log()
与alter()不同（弹窗阻止其他操作），console.log()只会把信息输出在console里，不会影响用户的使用。
1.6 基本数据类型
JavaScript的变量类型，是动态的，赋什么类型的值，就是什么类型的数据。
如果不赋值的变量调用就会出现undefined。
// 布尔型
var x = true;
var y = false;
// 数值型Number
var x = 10; // 十进制
var x = 012; // 八进制以0开头
var x = 0XA; // 十六进制以0x开头
var x = 3.14; // 浮点数
var x = 3.14e2; // 科学计数法3.14*10²
//字符串
//与Java不同JavaScript没有字符的概念。单引号双引号都表示字符串。
var x = 'ac';
var x = "AC";
当我们不确定变量的类型的时候，使用typeof来判断其类型。
<script>
var x;
document.write('声明了但是未赋值的时候，类型是： '+typeof x);
document.write("<br>");
x=5;
document.write('赋值为5之后，类型是： '+typeof x);
document.write("<br>");
x=5.1;
document.write('赋值为5.1之后，类型是： '+typeof x);
document.write("<br>");
x=true;
document.write('赋值为true之后，类型是： '+typeof x);
document.write("<br>");
x="hello";
document.write('赋值为hello之后，类型是： '+typeof x);
</script>
1.8 类型转换
伪对象：在JavaScript中，即使是基本数据类型也是一种伪对象。通过伪对象可以调用相应的属性和方法。
变量x的数据类型为String，我们就可以调用length的属性来获取a的长度。
转换字符串
无论Number、Boolean还是string 数据类型，都有一个toString()方法，用于转换字符串。
如果是数子转字符串有两种模式
1.默认模式，数字toString()自动转换十进制的数字为字符串
2.基模式，给toString()设置参数，改变转换的数字进制。
String()方法也可以用来转换字符串。与toString()的区别在于
String()使用String(a)来转换，如果a为null，就返回null字符串。
而null.toString()就会报错，后面代码无法执行。
<script>
var a=10;
document.write('默认模式下，数字10转换为十进制的'+a.toString()); //默认模式，即十进制
document.write("<br>");
document.write('基模式下，数字10转换为二进制的'+a.toString(2)); //基模式，二进制
document.write("<br>");
document.write('基模式下，数字10转换为八进制的'+a.toString(8)); //基模式，八进制
document.write("<br>");
document.write('基模式下，数字10转换为十六进制的'+a.toString(16)); //基模式，十六进制
document.write("<br>");
</script>
转换数字
JavaScript内置函数parseInt()和parseFloat()，转换字符串为数字。
其中字符串如果包含非数字，parseInt()就会一直定位数字，直至非数字出现。所以“10ads”会被转换为10
如果字符串中没有数字，转换就会出现NaN
Number()也可以用来进行数字转换。与parseInt()的区别在于，Number()只能转换纯数字，只要含有非数字的字符串，即返回NaN（Not a Number）。
转换Boolean
JavaScript使用内置函数Boolean()转换为Boolean
转换字符串时，非空即为true。
转换数字时，非0即为true。
转换对象时，非null即为true。
1.9 函数
使用关键字function定义一个函数。
function 函数名(){
return 10;
}
函数名();
函数名后()存放参数，如果没有就表示无参。使用return返回一个返回值。
通过 函数名()；来调用函数（只有函数时无调用时，函数无用）。
作用域
局部变量作用域只用于局部，全局变量适用于全局。
function x1(a){
return a;
}
function x2(){
return a;
}
x1(5);
x2();
//a的作用域仅在x1中可以用，x2返回a就会报错。
var a = 0;
function x1(a){
return a;
}
function x2(){
return a;
}
x1(5);
x2();
// a为全局变量，x2同样可以调用，返回5;
1.10 事件
事件是JavaScript允许html与用户交互的行为。用户对网页产生的任何操作都会产生一个事件。
例如鼠标点击事件。更多时间详见DOM事件
<script>
function showHello(){
alert("Hello JavaScript");
}
</script>
<button onclick="showHello()">点击一下</button>
1.11 算术运算符
基本运算符
“+ - * / %”（取余）
自增自减
a++，a–先取值再运算
++a,–a先运算再取值
赋值运算符
=，+=，-=，*=，/=，%=
x=5 是 最基本的赋值运算符，即把右边的值，赋给左边的变量x。
x+=y, 表示 x=x+y。
其他都是一个道理。
+的多态
用于数字两端是算数加，用于任意一端是字符串，就是字符串连接符。
1.12 逻辑运算符
基本逻辑运算
==
!=
>
>=
<
<=
返回一个Boolean类型的值
绝对等于
//绝对等于===
//绝对不等于!==
//==会进行值的判断，===会进行的值和类型的判断
1=='1'返回true
1==='1'返回false
三目运算
使用?: 三相运算法进行判断。
age<18?“卡通”:“你懂的”
表示当年纪小于18的时候，就看卡通，否则就看 你懂得
而age变量的值是15，所以返回 卡通
<script>
var age = 15;
var movie = age<18?"卡通":"你懂的";
document.write('使用?: 三相运算法进行判断。 <br>');
document.write('age<18?"卡通":"你懂的" <br>表示当年纪小于18的时候，就看卡通，否则就看 你懂得<br>');
document.write('而age变量的值是15，所以返回 '+movie);
</script>
1.13 条件判断
与java一样
if()
多条件判断
if-else
else-if/switch
1.14循环判断
与java一样
for(),while(),do-while(),
continue表示退出本次循环，进入下一次循环。
break表示终止循环
错误处理
调用不存在的函数就会报错，
使用try{}catch(err){}来处理。
不处理发生的错误，后面的代码就无法执行。
1.14 JavaScript对象
Number对象
新建Number对象方式：
var num = new Number(123);
属性：
length // 长度
MAX_VALUE //最大值
MIN_VALUE //最小值
NaN // Not a Number不是一个数字
方法：
toFixed(); // 返回一个数字的小数表达
toExponential(); // 返回一个数字的科学计数法表达
valueOf(); // 判断数字的类型
//使用typeof判断对象类型的话，返回的是一个Object型
String对象
新建String对象方式：
var str = new String("zbc");
属性：
length // 字符串长度
方法：
charAt(); // 返回指定字符串位置
charCodeAt(); // 返回指定字符串的字符Unicode编码
contact(); // 拼接字符串x.contact(y);
indexOf(); // 返回字符串第一次出现的位置
lastIndexOf(); // 返回字符串最后一次出现的位置。
localeCompare(); // 比较两个字符串是否相同，相同返回0，不同返回非0；
subString(); // 截取一段字符串
split(); // 根据分隔符，把字符串拆分成数组
replace(); // 替换字符串
// 所有返回字符串的方法返回的都是基本数据类型
数组对象
// 新建对象
var arr = new Arry(); // 参数可以时长度，也可以是元素
// 属性
length
// 遍历方法
1.通过下标遍历
for (i=0; i<x.length;i++){
document.write(x[i]);
}
2.通过for in 遍历
for (i in x){
document.write(x[i]);
}
//使用contact连接数组
var a1 = new Array(1,2,3);
var a2 = new Array(4,5,6);
var a3 = a1.contact(a2);
//通过jion加入一个指定字符串的表达
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
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);
数组x是:3,1,4
y = x.join() 得到的是数组x的字符串表达，其值是3,1,4 其类型是 :string
z = x.join("@");是x的字符串表达，不过分隔符不是默认的"," 而是"@" : 3@1@4
//动态折线图时需要
push方法在最后位置插入数据，pop方法在最后位置获取数据（获取后删除）。
unshift方法在最开始的位置插入数据，shift获取最开始位置的数据（获取后删除）。
//对数组排序的方法
sort(); //对负数排序需要另外定义，
// 反转,对数组内容进行反转
reverse();
// 获取子数组
//只用一个参数表示获取默认从a开始到x.length的数组
x.slice(a,b); //参数为获取x数组从a到b的子数组。[a,b)
//奇葩方法，删除插入同时进行的方法
数组x是:3,1,4,1,5,9,2,6
x.splice (3,2) 表示从位置3开始 ，删除2个元素:3,1,4,9,2,6
x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:3,1,4,1,5,9,2,6
日期对象
//新建对象
var d = new Date();
//获取年月日
d.getFullYear();
d.getMonth();//月是基0的，所以返回0就是1月
d.getDate();
// 时:分:秒:毫秒
d.getHours();
d.getMinutes();
d.getSeconds();
d.getMilliseconds();
//获取一周的第几天
d.getDay();// 基0的，
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是 ： "+weeks[day]);
//获取从1970/1/1 08:00:00 至今的毫秒数
d.getTime();
// 修改日期和时间
d.setFullYear();
d.setMonth();
d.setDate();
d.setHours();
d.setMinutes();
d.setSeconds();
Math对象
//属性
Math.E // 自然对数
Math.PI // 圆周率
//方法
MAth.abs(); //绝对值
Math.round(); // 四舍五入
Math.min(a,b); // 取最小值
Math.max(a,b); // 取最大值
Math.pow(a,b); // a的b次方
Math.random(); //0-1随机数
自定义对象
- 通过new Object()创建一个对象。
<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name，并且赋值
hero.kill = function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill
</script
通过new Object创建对象有个问题，就是每创建一个对象，都得重新定义属性和函数。这样代码的重用性不好。
- 通过function创建一个对象。
<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>
3.为已存在的对象添加属性
现在Hero对象已经设计好了，但是我们发现需要追加一个新的方法keng(),那么就需要通过prototype实现这一点。
<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();
Hero.prototype.keng = function(){
document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();
</script>
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
