Java Script 学习第一节
一、初识
1.Java Script 诞生于1995年，它的出现主要是用于处理网页中的前端验证。
2.前端验证，即检查用户输入的内容是否符合一定的规则。
3.比如：用户名的长度，密码的长度，邮箱的格式等。
4.为了确保不同浏览器上运行的Java Script 标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript。
5.JS特点
解释型语言
类似于C和Java的语法结构
动态语言
基于原型的面向对象
二、JS标签下的HelloWorld
1.alert
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JS代码需要编写到script标签中-->
<script type="text/javascript">
/*
控制浏览器弹出一个警告框
*/
alert("想回家");
</script>
</head>
<body>
</body>
</html>
2.document.write
/*让计算机在页面输出一个内容*/
document.write("看我出不出来~~~")
3.console.log
/*向控制台输出一个内容
console.log()作用是向控制台输出一个内容*/
console.log("你猜我在哪里出来呢？");
三、JS编写位置
1.button onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--可以将js代码编写到标签onclick属性中
当我们点击按钮是，js代码才会执行
-->
<button onclick="alert('你点我干嘛');">点我一下</button>
</body>
</html>
2.编写到href属性中
<!--可以将js代码编写到标签onclick属性中
当我们点击按钮是，js代码才会执行
虽然可以写在标签属性中，但他们属于结构与行为耦合，不方便维护，不推荐使用。
-->
<button onclick="alert('你点我干嘛');">点我一下</button>
<!--
可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
-->
<a href="javascript：alert('让你点你就点');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>
3.编写到script标签中
<!--可以将js代码编写到script标签中-->
<script type="text/javascript">
alert("我是script标签中的代码");
</script>
<!--可以将js代码编写到外部的js文件中，通过script标签引入
写到外部文件中可以在不用页面中同时使用，也可以利用浏览器的缓存机制推荐使用方式
-->
<!--script一旦引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略
如果需要则可以创建一个新的script标签用于编写内部代码
-->
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
alert("我是内部的js代码");
</script>
四、js的基本语法
<script type="text/javascript">
/* （行间的*不是必须的）
多行注释
js注释
多行注释，注释中的内容不会被执行，但可以在源代码中查看。
要养成良好的编写注释的习惯，也可以通过注释对代码进行一些简单的测试。
*/
//单行注释（斜线后面的内容）
alert("hello");
document.write("hello");
console.log("hello");
//通过不同注释，确定不同位置的hello由谁控制
/*
1.js中严格区分大小写
2.js中每一条语句以分号（；）结尾
如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
而且有时候，浏览器会加错分号，所以在开发中分号必须写
3.js中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化 */
</script>
五、字面量和变量
/*
字面量，都是一些不可改变的值
比如：1 2 3 4 5
字面量可以直接使用，但是我们一般都不会直接使用字面量
变量 变量可以用来保存字面量，而且变量的值是可以任意改变的
变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量
而很少直接用字面量
可以通过变量对字面量进行描述*/
//声明变量
//在js中使用var关键字来声明一个变量
var a;
//为变量赋值
a = 123;
a = 456;
a=15897642474321;
console.log(a);
//声明和赋值同时进行
var b =789;
var c =0;
var age=80
console.log(age);
console.log(b);
六、标识符
/*
标识符
在js中所有的可以由我们自主命名的都可以称为是标识符
例如：变量名、函数名、属性名都属于标识符
命名一个标识符只能怪需要遵守如下的规则：
1.标识符中可以含有字母，、数字、_\$
2.标识符不能以数字开头
3.标识符不能是js中的关键字或保留字
4.标识符一般都采用驼峰命名法
首字母小写，每个单词的开头字母大写，其余字母小写
helloWorld XxxYyyZzz
* js底层保存标识符时实际上是采用Unicode编码
所以理论上讲，所有的utf-8中含有的内容都可以作为标识符*/
var 锄禾日当午 = 789;
console.log(锄禾日当午);
七、字符串
1.String
/*
数据类型指的就是字面量的类型
在js中一共有六种数据类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
其中以上前五个为基本数据类型
而Objrct属于引用数据类型*/
/*String 字符串
在js中需要使用引号引起来
使用双引号或者单引号都可以
引号不能嵌套，双引号里不能放双引号，单引号不能放单引号
*/
var str = "hello";
/*
在字符串中我们可以使用\作为转义字符
当表示一些特殊符号时可以使用\进行转义
\"表示"
\'表示'
\n 表示换行
\t 制表符
\\表示斜杠
*/
str = '我说："今天天气真不错"'
str = "\\"
//输出字面量 字符串 str
alert("str");
//输出变量str
alert(str);
2.Number
<script type="text/javascript">
/*在js中所有数值都是Number类型
包括整数和浮点数（小数）
js中可以表示数字的最大值
Number.MAX_VALUE
Number.MIN_VALUE 大于0的最小值
如果使用Number表示的数字超过了最大值，则会返回一个Infinity表示正无穷
（-infinity负无穷大）
使用typeof检查Infinity也会返回Number
NaN是一个特殊的数字，表示Not A Number
使用typeof检查NaN也会返回number
*/
//数字123
var a = 123;
//字符串123
var b ="123";
/*
可以使用一个运算符typeof
来检查一个变量的类型
语法：typeof 变量
检查字符串时，会返回String
检查数值时，会返回Number
*/
/*console.log(typeof a);
console.log(typeof b);*/
a =Number.MAX_VALUE*Number.MIN_VALUE;
a = "abc"*"bcd";
a = NaN;
//console.log(typeof a);
a=Number.MIN_VALUE;
/*在js中整数的运算基本可以保证准确*/
/*如果使用js进行浮点元素，可能得到一个不精确的结果
所以不要用js进行对精确度要求比较高的运算*/
var c=0.1+0.2
console.log(a);
</script>
3.Boolean
<script type="text/javascript">
/*
Blooean 布尔值
布尔值只有两个，主要用来做逻辑判断
true-表示真
false-表示假
使用typeof检查一个布尔值时，会返回boolean
*/
var bool = false;
console.log(typeof bool);
console.log(bool);
</script>
4.Null和Undefined
/*
Null类型的值只有一个，就是Null
Null这个值专门用来表示一个为空的对象
使用typeof检查一个null值时，会返回object
* Undefined（未定义）类型的值只有一个，就Undefined
* 当声明一个变量，但是并不给变量赋值时，它的值就是Undefined
* 使用typeof检查一个undefined时也会返回undefined*/
var a=null;
var b = undefined;
console.log(typeof b);*/
八、强制类型转换
1.转换成String
<script type="text/javascript">
/*
强制类型转换
指将一个数据类型强制转换为其他的数据类型
类型转换主要指，将其他的数据类型，转换为
String Number Boolean*/
/* 将其他数据类型转换为String
方式一：调用被转换数据类型的toString（）方法
该方法不会影响原变量，它会将转换的结果返回
注意：null和undefined 两个值没有toString（）方法，
如果调用他们的方法，会报错
方式二：调用String（）函数,并将要转换的数据作为参数
传递给函数
调用Number和Boolean 实际上是调用的toString（）方法
但是对于null和undefined，就不会调用toString（）方法
它会将null直接转换成"null"
将undefined直接转换为"undefined"*/
var a=123;
//调用a的toString（）的方法
//调用xxx的yyy（）的方法，就是xxx，yyy（）
a = a.toString();
a=true;
a= a.toString();
a=null;
// a=a.toString();//报错
a=123;
//调用String函数，将a转换为字符串
a=String(a);
a=null;
a=String(a);
a=undefined;
a=String(a);
console.log(typeof a);
console.log(a);
String()
alert()
</script>
2.转换成Number转换
<script type="text/javascript">
/*
将其他数据类型转换成Number
转换方式一：
使用Number（）函数
字符串→数字
1.如果是纯数字的字符串，则直接将其转换为数字
2.如果字符串中有非数字的内容，则转换成NaN
3.如果字符串时一个空串或者是一个全是空格的字符，则转换为0
布尔→数字
true→1 false→0
Null→数字0
Undefined→NaN
转换方式二：
专门用来对付字符串
parseInt（）把一个字符串转换成一个整数
parseFloat（）把一个字符串转换成一个浮点数
*/
var a="123";
//调用Number（）函数将a转换为Number
a=Number(a);
a=false;
a=Number(a);
a=null;
a=Number(a);
a=undefined;
a=Number(a);
a="1.2a3px";
//调用parseInt（）函数将a转换成Number
/*
parseInt（）可以将一个字符串中有效的整数内容取出来
然后转换成number
*/
a=parseInt(a);
/*parseFloat()作用和parseInt（）类似，不同的是它可以获得有效的小数*/
a="123.456.789px";
a=parseFloat(a);
/*
如果对非String使用parseInt（）和parseFloat（）
它会先将其转换成String然后再操作*/
a=true;
a=parseInt(a);
a=198.23;
a=parseInt(a);
console.log(typeof a);
console.log(a);
</script>
3.其他进制的数字
<script type="text/javascript">
var a=123;
/*
在js中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0x开头
如果需要表示2进制的数字，则需要以0b开头，但不是所有浏览器都支持*/
//十六进制
a=0x10;
a=0xff;
a=0XCafe;
//八进制
a=070;
//二进制数字
// a=0b10;
//像"070"这种字符，有些浏览器会当成8进制解析，有些会当成10进制解析
a="070";
//可以在parseInt（）传递一个第二个参数，来制定数字的进制
a=parseInt(a,8);
console.log(typeof a);
console.log(a);
</script>
4.转换成Boolean
<script type="text/javascript">
/*
将其他的数据类型转换为Boolean
使用Boolean（）函数
数字→布尔
除了0和NaN，其余的都是true
字符串→布尔
字符串除了空串，其余的都是true
null和undefined都会转换成flase
对象也会转换为true*/
var a=123;//true
a=-123;//true
a=0;//false
a=undefined;//true
a=NaN;//flase
//调用Blooean（）函数将a转换成布尔值
a=Boolean(a);
a="false";
a=Boolean(a);
a=null;//flase
a=Boolean(a);
a=undefined//false
a=Boolean(a);
console.log(typeof a);
console.log(a);
</script>
九、运算符
1.二元运算符
<script type="text/javascript">
/*
运算符也叫操作符
通过运算可以对一个或多个值进行运算，并获取运算结果
比如：typeof就是运算符，可以获得一个值的类型
它会将该值的类型以字符串的形式返回
number string boolean undefined object
算术运算符
当对非Number类型的值进行运算时，会将这些值转换为Number，再运算
任何值和NaN做运算都得NaN
+
可以对两个进行加法运算，并将结果返回
如果对两个字符串进行加法运算，则会拼串
会将两个字符串拼接成一个字符串
任何的值与字符串做加法运算，都会先转换字符串，然后拼接
-
可以对两个值进行减法运算，并将结果返回
*
可以对两个值进行乘法运算
/
可以对两个值进行除法运算
%
%取余运算*/
var a=123;
var result=typeof a;
//console.log(typeof result);
result=a+1;
result=456+789;
result=true+1;
result=false+true;
result=2+null;
result=2+NaN;
result="你好"+"再见";
var str = "明天，" +
"今天，" +
"昨天，" +
"再见";
result=123+"1";
result=true+"hello";
//任何值和字符串相加都会转换为字符串，并做拼串
/*
我们可以利用这一特点，来将一个任意的数据类型转换成String
我们只需要为任意的数据类型+一个""即可将其转换为String
这是一种隐式的类型转换，有浏览器自动完成，世纪山他也是调用String*/
var c=123;
c=c+"";
//c=null;
//c=c+"";
//console.log(result);
//console.log(typeof c);
//console.log("c="+c);
result=1+2+"3";//33
result="1"+2+3;//123
result=100-5;
result=100-true;
result=100-"1";//99
result=2*2;
result=2*"8";//16
result=2*undefined;//NaN
result=2*null;//0
result=4/2;
result=3/2;
/*
任何值做-运算都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
可以通过为一个值-0 *1 /1 来将其转换为Number
原理和Number（）函数一样，使用起来更加简单
*/
var d="123";
//console.log("result="+result);
d=d-0;
/*console.log(typeof d);
console.log(d);
*/
result=9%3;
result=9%4;
console.log("result="+result);
</script>
2.一元运算符
<script type="text/javascript">
/*
一元运算符，只需要一个操作数
+ 正号 不会对数字产生任何影响
- 负号 可以对数字取反
对于非Number值
会先转换为Number ，再运算
对于一个其他的数据类型使用+，来将其转换为Number
它的原理和Number（）函数一样
*/
var a=123;
a=-a;
a=true;
a="18";
a=+a;
/*console.log("a="+a);
console.log(typeof a);*/
var result =1+"2"+3;
console.log("result="+result);
</script>
3.自增自减
<script type="text/javascript">
/*
自增++
通过自增可以使变量在自身的基础上增加1
对于一个变量自增以后，原变量的值会立即自增1
自增分成两种：后++（a++） 前++（++a）
无论是a++还是++a，都会立即使变量的值自增1
不同的是a++和++a的值不同
a++等于原变量的值（自增前的值）
++a的值等于原变量的新值（自增后的值）
自减--
使变量在自身基础上减1
自减分成两种，后--（a--） 前--（--a）
无论是a--还是--a 都会立即使原变量减1
不同的是--a和a--的值不同
a--是变量的原值（自减前的值）
--a是变量的新值（自减后的值）
* */
var num=10;
//num--;
//--num;
console.log(num--);
console.log("num="+num);
var a=1;
//使a自增1
//a++；
//++a;
//console.log(a++);
//console.log("++a"+ ++a);
/*console.log("a++="+ a++);
console.log("a="+a);*/
var c=10;
//第一次c++，是在10的基础上自增
//console.log(c++);
//第二次c++，是在11的基础上自增
c++;
var d=20;
//console.log(++d);//21
//console.log(++d);//22
//20+22+22
//var result =d++ + ++d + d;
//d=20
d=d++;
/*
var e=d++;
d=e;
*/
//console.log("d="+d);
</script>
十、逻辑运算符
1.非、与、或
<script type="text/javascript">
/*
js中我们提供了三种逻辑运算符
！非 对一个布尔值取反的操作
true变false false变true
如果进行两次取反，则值不改变
如果对非布尔值进行运算，则会先转换为布尔值，再运算
可以利用这一特点，将其他类型数据转换为布尔值
可以为一个任意数据类型取两次反，来将其转换为布尔值，
原理和Boolean（）函数一样
&&与
&&可以对符号两侧的值进行与运算并返回结果
运算规则:
两个值中只要有一个值为false就返回false
只有两个值都为true才返回true
js中的"与"属于短路的与，如果第一个值为false，
则不会再看第二个
||或
可以对符号两侧的值进行或运算并返回结果
运算规则：
两个值中只要有一个true，就返回true
如果两个值都为false，才返回false
js中的“或”属于短路的或
如果第一个值为true，则不会检查第二个
*/
//如果值都为true
var result=true&&true;
//只要有一个false，就返回false
result=true&&false;
result=false&&true;
result=false&&false;
//console.log("result="+result);
//第一个值为true,会检查第二个值
//true&&alert("看我")
//第一个值为false，不会检查第二个值
//false&&alert("看我");
//两个都为false，就返回false
result=false||false;
//只要有一个true，就返回true
result=true||false;
result=false||true;
result=true||true;
//console.log("result="+result);
//第一个值为false，则会检查第二个值
false||alert("123");
//第一个值为true，则不会检查第二个值
true||alert("123");
//对a进行非运算
var a=true;
a=!a;
//console.log("a="+a);
var b=10;
b=!b;
//console.log("b="+b);
//console.log(typeof b);
</script>
2.非布尔值的与、或运算
<script type="text/javascript">
/*
&& || 非布尔值的情况
对于非布尔值进行或运算时，
会将其转换为布尔值，再运算
与运算：
如果第一个值为true，则必然返回第二个值
如果第一个为false，则直接返回第一个值
或运算：
如果第一个值为true，则直接返回第一个值
如果第一个值为false，则返回第二值
*/
//true && true
//与运算，如果都为true，则返回后面的值
var result = 1 && 2;
//与运算：如果两个值中有false，则返回靠前的false
//false && true
result = 0 && 2;
result = 2 && 0;
//false &&false
result = NaN&&0;
result = 0 && NaN;
//true||true
//如果第一个值为true，则直接返回第一个值
result = 2 || 1;
result = 2 || NaN;
result = 2 || 0;
//如果第一个值为false，则直接返回第二个值
result=NaN||0;
console.log("result="+result);
</script>
十一、赋值运算符
<script type="text/javascript">
/*
= 可以将符号右侧的值赋值给符号左侧的变量
+= a+=5等价于a=a+5
-= a-=5等价于a=a-5
*= a*=5等价于a=a*5
/= a/=5等价于a=a/5
%= a%=5等价于a=a%5
*/
var a=10;
//a=a+5;
//a+=5;
//a-=5;
a*=5;
console.log("a="+a);
</script>
十二、关系运算符
<script type="text/javascript">
/*
通过关系运算符可以比较两个值之间的大小关系
如果关系成立它会返回true，如果关系不成立则返回false
* > 大于号
* 判断符号左侧的值是否大于右侧
* 如果关系成立，返货true，如果关系不成立，则返回false
*
* >= 大于等于
* 判断符号左侧的值是否大于或等于右侧的值
*
* 对于非数值进行比较时，会先转换成数字，再比较
* 如果符号两侧的值都是字符串时，不会将其转换为数字进行
* 比较，而会分别比较字符串中字符的Unicode编码
* */
var result=5>10;//false
result=5>4;//true
result=5>5;//false
result=5>=5;//true
result=5>=4;//true
result=5<4;//false
result=5<=4;//false
result=4<=4;//true
//console.log("result="+result);
//console.log(1>true);//false
//console.log(1>=true);//true
//console.log(1>"0");//true
//console.log(10>"null");//true
//任意值和NaN做任何比较都是false
//console.log(true>false);//false
//console.log("11"<"5");//true
//console.log("a"<"b");//true
//比较字符编码时是一位一位进行比较
//如果两位一样，则比较下一位，所以借用它来对英文进行排序
//console.log("abc"<"b");//true
//console.log("你">"我");//true
//如果比较的两个字符串型的数字，可能会得到不饿预测的结果
//注意：在比较两个字符串型的数字时，一定一定要转型
</script>
十三、Unicode编码表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
在字符串中使用转义字符输入unicode编码
\u四位编码
*/
console.log("\u0031");
</script>
</head>
<body>
<!--在网页中使用unicode编码
&#编码；这里的编码需要的是10进制
-->
<h1 style="font-size: 200px;">☠</h1>
</body>
</html>
十四、关系运算符
<script type="text/javascript">
/*
相等运算符用来比较两个值是否相等
如果相等会返回true，否则会返回false
使用==来做相等运算
当使用==来比较两个值时，如果值的类型不同，
则会自动进行类型转换，将其转化为相同的类型
然后在比较
不相等 ！=
用来判断两个值是否不相等，如果不相等返回true，相等返回false
不相等也会对变量类型进行自动的类型转换，如果转换后相等它会返回false
=== 全等
用来判断两个值是否全等，它和相等类似，不同的是它不会自动进行类型转换
如果两个值类型不同，直接返回false
!== 不全等
用来判断两个值是否不全等，和不等类似，不同的是它不会做自动类型转换
如果两个值不相等，则直接返回true
*/
//console.log(1==1);//true
var a=10;
//console.log(a==4);//false
//console.log("1"==1);//true
//console.log(true=="1");//true
//console.log(null==0);//false
/*
undefined 衍生自null
所以这两个值做相等判断时，会返回true
*/
//console.log(undefined==null);
/*
NaN不和任何值相等，包括他本身
*/
//console.log(NaN==NaN);//false
var b=NaN;
//判断b的值是否是NaN
//console.log(b==NaN);
/*
可以通过isNaN()函数来判断一个值是否是NaN
如果该值是NaN刚返回true，否则返回false
*/
//console.log(isNaN(b));
//console.log(10!=5);//true
//console.log("abcd"!="abcd");//false
//console.log("1"!=1);//false
//console.log("123"===123);//flase
//console.log(null===undefined);//false
</script>
十五、条件运算符
<script type="text/javascript">
/*
条件运算符也叫三元运算符
语法：
条件表达式？语句1：语句2；
执行的流程：
条件运算符在执行是，首先定义条件进行求值
如果该值为true，则执行语句1，冰饭狐疑执行结果
如果该值为false，则执行语句2，并返回执行结果
*/
//true?alert("语句1"):alert("语句2");
//false?alert("语句1"):alert("语句2");
var a=30;
var b=43;
var c=50;
//a>b?alert("a大"):alert("b大");
//获取a和b中的最大值
var max=a>b?a:b;
//获取a b c 中的最大值
max=max>c?max:c;
//这种写法不推荐使用，不方便阅读
var max =a>b?(a>c?a:c):(b>c?b:c);
console.log("max="+max);//max=20
</script>
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
