JavaScript学习笔记

JavaScript简介

它的出现主要是用于处理页面中前端验证,就是指检查用户输入的内容是否符合一定的规则,比如:用户名长度、密码的长度、邮箱的格式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <!--JS代码需要编写到script标签中-->
  <script>
    /*控制浏览器弹出一个警告框*/
    alert("这是一个警告框")
    /*让计算机在页面中输出一个内容,结果在body中显示*/
    document.write("这是一段文字")
    /*向控制台输出一个内容*/
    console.log("这是一段文字")
  </script>
</head>
<body>

</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <!--可以将js代码写在外部文件中,再引入
推荐使用的
script标签一旦用于引入外部文件,就不能再编写代码了
需要建一个新的script标签-->
 <script src="js/script.js"></script>
</head>
<body>
<!--可以将js代码编写到标签的onclick属性中
    虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用。
当我们点击按钮时,js代码才会执行-->
<button onclick="alert('点我干嘛');">点我一下</button>
<!--可以将js代码写在超链接属性中,当我们点击超链接时,会执行代码-->
<a href="javascript:alert('点我干嘛');">点我一下</a>
</body>
</html>

wu

1.js中严格区分大小写
2.js中每一条语句以分号结尾,如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,而且有的时候,浏览器会加错分号,所以在开发中分号必须写。
3.js中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
   /*
   标识符
   在JS中所有 的可以由我们自主命名的都可以称为是标识符
  例如:变量名、函数名、属性名都属于标识符
  命名一个标识符时需要遵守如下的规则:
  1.标识符中可以含有字母、数字、_、 $
  2.标识符不能以数字开头
  3.标识符不能是ES中的关键字或保留字●
  4.标识符- -般都采用驼峰命名法
  -首字母小写,每个单词的开头字母大写,其余字母小写
  helloworld xxxYyyZzz
  JS底层保存标识符时实际上是采用的Unicode编码,
  所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
  
   */   
   
  </script>
   
</head>
<body>

</body>
</html>

wu
wu

数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  /*
数据类型指的就是字面量的类型
在JS中一共有六种数据类型
String字符串
Number数值
Boolean布尔值
Null空值
Undefined未定义
Object对象
其中String Number Boolean Null Undefined属 于基本数据类型
而0bject属于引用数据类型
*/

/*string字符串
在JS中字符串需要使用引号引起来
-使用双引号或单引号都可以,但是不要混着用
引号不能嵌套,双引号不能放双引号,单引号不能放单引号
*/
var str = 'hello';
str = '我说:"今天天气真不错! " ';
alert(str);
/*
在字符串中我们可以使用\作为转义字符,
当表示一-些特殊符号时可以使用\进行转义
\"表示"
\'表示'
\n表示换行
\t制表符
\\表示\
*/  
  </script>   
</head>
<body>

</body>
</html>

Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  /*
   生JS中所有的数值都是Number类型,
包括整数和浮点数(小数)

JS中可以表示的数字的最大值
Number. MAX_ VALUE
76931348623157e+308
Number .MIN_ VALUE大千0的最小值
5e-324
如果使用Number表示的数字超过了最大值,则会返回一个Infinity
表示正无穷
-Infinity表示负无穷
使用typeof检查Infinity也会返回Number
NaN是一一个特殊的数字,表示Not A Number
使用typeof检查一个NaN也会返回number

  */
 /*
可以使用一个运算符typeof
来检查一个变量的类型
语法: typeof变量
检查字符串时,会返回string
检查数值时,会返回number
 */
 /*在JS中整数的运算基本可以保证精确
var C = 1865789 + 7654321;
*如果使用JS进行浮点元素,可能得到一个不精确的结束
var c=0.1+0.2;
*/
/*
如果使用JS进行浮点运算,可能得到一个不精确的结果
所以千万不要使用JS进行对精确度要求比较高的运算
*/
  </script>  
</head>
<body>

</body>
</html>

### Boolean

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
 /*
布尔值只有两个,主要用来做逻辑判断
true表示真
false表示假
使用typeof检查-一个布尔值时, 会返回boolean
*/

  </script>  
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*
Null (空值)类型的值只有一个,就是null
*
nu1l这个值专门用来表示ri为空的对象
*使用typeof检查- -个nulI值时, 会返回object
*
* Undefined (未定义)类型的值只有一一个,就undefind
*
当声明一个变量,但是并不给变量赋值时,它的值就是undefined
*使用typeof检 查一个undefined时 也会返回undefined
*/  </script>  
</head>
<body>

</body>
</html>

强制类型装换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*
强制类型转换- 指将一个数据类型强制转换为其他的数据类型
一类型转换主要指,将其他的数据类型,转换为
string Numper Boolean
*/
/*将其他的数据类型转换为String
方式一:
调用被转换数据类型的tostring()方法
该方法不会影响到原变量,它会将转换的结采返回
但是注意: null和undefined这两个值没有toString()方法,
var a=123;
a=a.toString();
*/
/*
方式二:
有用String()函大
并将被转换的数据作为参数传递给函数
专用String()函数做强制类型转换时,
对于Number和Boolean实际上就是调用的tostring()方法
但是对于null和undefined,就不会调用tostring()方法
它会将null直接转换为 "null"
将undefined直接转换为"undefined"
var a=123;
a=String(a);
*/
  </script>  
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*将其他的数据类型转换为Number
转换方式一:
使用Number( )函数
  字符串-->数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字的内容,则转换为NaN
3.如果字符串是-一个空串或者是一一个全是空格的字符
布尔-->数字
true转成1
false转成0
nu11-->数字0
undefined -->数字NaN
var a=123;
a=null;
a=Number(a);

/*
转换方式二:
-这种方式专门用来对付字符串
parseInt()把一个字符串转换为一 一个整数
parseFloat()把一 个字符串转换为一个浮点数
调用parseInt()函数将a转换为Number
parseInt( )可以将一个字符串中的有效的整数内容去出来,
然后转换为Number
parseInt(a);
parseFloat()作用和parseInt( )类似,不同的是它可以获得有效的小数
var a=123px;
a=parseInt(a);
*/
  </script>  
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*在js中,如果需要表示16进制的数字,则需要以0x开头
如果需要表示8进制的数字,则需要以0开头
如果要要表示2进制的数字,则需要以0b开头
但是不是所有的浏览器都支持

向"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
a = "070";
//可以在parseInt()中传递一个第二个参数,来指定数字的进制
a = parseInt(a,10);
console .1og(typeof a);
console.log(a);
*/
  </script>  
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*将其他的数据类型转换为Boolean
使用Boolean()函数
-数字--->布尔
-除了0和NaN,其余的都是true
字符串--->布尔
-除了空事,其余的都是true
null和undefined都会转换为false
对象也会转换为true
*/
  </script>  
</head>
<body>

</body>
</html>

运算符

算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*运算符也叫操作符
通过运算符可以对一一个或多个值进行运算,并获取运算结果
比如: typeof就是运算符,可以来获得-一个值的类型
它会将该值的类型以字符串的形式返回
number string boolean undefined object

算数运算符
当对非Number类型的值进行运算时,会将这些值转换为Number?
任何值和NaN做运算都得NaN
+
+可以对两个值进行加法运算,并将结果返回
如果对两个字符串进行加法运算,则会做拼串
会将两个字符串拼接为一一个字符串,并返回
任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
我们可以利用这一-特点,来将一个任意的数据类型转换为String
我们只需要为任意的数据类型+ - - -个"”即可将其转 换为String
这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String( )函数
result="1"+2+3;//123
result=1+2+"3";//33

*/
  </script>  
</head>
<body>

</body>
</html>

一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    /*  - -元运算符,只需要一个操作数
+正号
-正号不会对数字产生任何影响
-负号
-负号可以对数字进行负号的取反
对于非Number类型的值,会将先转换为Number,然后在运算
可以对一-个其他的数据类型使用+,来将其转换为number
它的原理和Number()函数-样

    */                            
  </script>  
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/* 自增++
-通过自增可以使变量在自身的基础上增加1
 对于一个变量自增以后,原变量的值会立即自增1
 自增分成两种:后++(a++)和前++(++a)
无论是a++还是++a,都会立即使原变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量新值(自增后的值)
自减--
-通过自诚可以使变量在自身的基础上减1
一自减分成两种: 后--(a--)和前--(--a)
无论是a--还是--a都会立即使原变量的值自减1
不同的是a--和--a的值不同
a--是变量的原值(自减前的值)
--a是变量的新值(自减以后的值)
*/                   
  </script>  
</head>
<body>
</body>
</html>

逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
/*JS中为我们提供了三种逻辑运算符
!非
- !可以用来对一个值进行非运算
一所谓非运算就是值对一个布尔值进行取反操作,
true变false, false变true
如果对一个值进行两次取反,它不会变化
如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反
所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
可以为一个任意数据类型取两次反,来将其转换为布尔值,
原理和Boolean()函数一样
&&与
&&可以对符号两侧的值进行与运算并返回结果
-运算规则
//如果两个值都是true则返回true
var result =true && true;
//只要有一个false,就返回false
result = true && false;
result = false && true; 
result = false && false;
JS中的“与”属于短路的与,
如果第一个值为false,则不会看第二个值
||可以对 符号两侧的值进行或运算并返回结果
运算规则:
-两个值中只要有一个true,就返回true
如果两个值都为false,才返回false
- JS中的“或”属于短路的或
如果第一个值为true,则不会检查第二个值

*/
  </script>
</head>
<body>
</body>
</html>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
 /*&&||非布 尔值的情况
对于非布尔值进行与或运算时,
会先将其转换为布尔值,然后再运算,并且返回原值
-与运算:
如果第一个值为tru,则必然返回第二个值
-如果第一个值为false,则直接返回第一个值
-
//true|I true
//如果第一一个值为true,则直接返回第一 个值
result = 2|11 ;
result = 2|1 NaN;
result = 2|1 0;
//如果第一一个值为false,则直接返回第二个值
result = NaN| | 1;

*/
  </script>
</head>
<body>
</body>
</html>
**数值运算符**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
 /*=
可以将符号右侧的值赋值给符号左侧的变量
十=
a+=5等价于a=a+5
-=
a -=5等价于a=a-5
*=
a*=5等价于a=a*5
/=
a /= 5等价于a=a/5|Y
%=
a%=5等价于a=a%5

*/
  </script>
</head>
<body>
</body>
</html>

**关系运算符**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
 /*通过关系运算符可以比较两个值之间的大小关系,
如果关系成立它会返回true,如果关系不成立则返回false
>大于号
-判断符号左侧的值是否大于右侧的
-如果关系成立,返回true;如果关系不成立则返回false
>大于号
判断符号左侧的值是否大于右侧的值
-如果关系成立,返回true,如果关系不成立则返回false
>=大于等于
一判断符号左侧的值是否大于或等于右侧的值
<小于号
<=小于等于
//比较两个字符串时,比较的是字符串的字符编码
//console.1og("a" < "b");//true
//比较字符编码时是一一位一位进行比较
//如果两位一样,则比较下一位,所以借用它来对英文进行排序
//console.1og("abc" < "bcd");//true
//比较中文时没有意义
//console.1og("戒”>“我"); //true
//如果比较的两个字符串型的数字,可能会得到不可预期的结果
console.1og("11123123123123123123" < "5"); //true

*/
98811+
10.15-181

  </script>
</head>
<body>
</body>
</html>

**Unicode编码表**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
 /*
在字符串中使用转义字符输入Unicode编码
\u四位编码

<!--在网页中使用Unicode编码
&#编码;这里的编码需要的是10进制
<h1 style="font-size: 200px;">&#9760;</h1>
<h1 style="font-size: 200px;">&#9856;</h1>

*/
  </script>
</head>
<body>
</body>
</html>

**相等运算符**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
 /*
相等运算符用来比较两个值是否相等,
如果相等会返回true, 否则返回false
使用==来做相等运算
相等运算符用来比较两个值是否相等,
如果相等会返回true.否则返回false
使用==来做相等运算

-当使用==来比较两个值时,如果值的类型不同,
则会自动进行类型转换,将其转换为相同的类型
然后在比较

不相等
不相等用来判断两个值是否不相等,如果不相等返回true,否则返回falsel
使用!=来做不相等运算
不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false

=== 
全等
-用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换
如果两个值的类型不同,直接返回false
↓== :
不全等
-用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换
如果两个值的类型不同,直接返回true

undefined 衍生自null
所以这两个值做相等判断时,会返回true
//console. log(undefined == nu1l);

 NaN不和任何值相等,包括他本身
//console. 1og(NaN == NaN); //false
var b = NaN;
//判断b的值是否是NaN
//console.1og(b == NaN);
*可以通过isNaN( )函数来判断-一个值是否是NaN
*如果该值是NaN则返回true,否则返回false


*/

  </script>
</head>
<body>
</body>
</html>

**条件运算符**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
/*条件运算符也叫三元运算符
语法:
条件表达式?语句1:语句2;
-执行的流程:
条件运算符在执行时,首先对条件表达式进行求值,
如果该值为true,则执行语句1,并返回执行结果
如果该值为false,则执行语句2,并返回执行结果
//false?alert("语句1"):alert("语句2");
vara=30;
var b =43;
var C= 50;
//a > b ? alert("a大"):alert("b大");
/ /获取a和b中的最大值
var max = a>b ?a: b;
//获取abC中的大值
max=max>c?max:cal
console.1og("max = "+max);
/ /这种写法不推荐使用,不方便阅读
var max
a >b?(a> C?a:C ):(b>C?b:c);

*/

  </script>
</head>
<body>
</body>
</html>





























                                                                                                                                                                                               


























                                                                                                                                                                                               

























                                                                                                                                                                                               




























                                                                                                                                                                                               
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值