js1（持续更53/140）

m0_60793076

于 2021-08-11 12:09:00 发布

阅读量120

点赞数

分类专栏：暑期班2021

本文链接：https://blog.csdn.net/m0_60793076/article/details/119601687

版权

暑期班2021 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括警告框、页面输出、变量、标识符、字符串、数字、布尔值、null、类型转换、运算符、流程控制语句、对象、函数、数组和JSON的使用。特别强调了变量的声明、字符串的处理、数字的最大值、对象的属性和函数的参数。还提到了JSON转换为JS对象的方法和eval()函数的使用注意事项。

摘要由CSDN通过智能技术生成

警告框弹出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>
//警告框弹出
alert("this is my code")

</script>

</body>

</html>

js页面输出一个内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>
//让计算机在页面中输出一个内容
document.write("helloworld")
</script>

</body>

</html>

//向控制台输出一个内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>


//向控制台输出一个内容
console.log("helloworld");
</script>

</body>

</html>

按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

</body>

</html>

超链接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>


<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

可以把js编写到script标签中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
    <!--可以将js代码编写到script标签中-->
    <script type="text/javascript">alert("hello");</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

可以将js代码编写到外部js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->
    <script type="text/javascript" src="js/script.js"></script>

    
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

写到外部文件中可以在不同页面中同时引用，也可以利用到浏览器的缓存机

script标签一旦用于引入外部文件了，就不能编写代码了额，即使编写了浏览器也会忽略

字面量：

都是一些不可以改变的量

变量：

变量可以用来保存字面量，而且变量的值是可以任意改变的

变量更加方便我们的使用

声明变量：

js用var关键字来声明一个变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">
var b;
b=1;
console.log(b);
</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

标识符

变量名，函数名，属性名都属于标识符

在js中所有的可以由我们自主命名的都可以成为标识符

1、标识符可以含有字母，数字，下划线，$

2、标识符不能以数字开头

3、标识符不能是es中的关键字或保留字

var var=123;

console.log(var)

4、标识符一般采用驼峰命名法

首字母小写，每个单词的开头字母大写，其余字母小写

字符串string

js共有6种数据类型，string，number数值,boolean布尔值,null空值,undefined未定义,object对象

前5种为基本数据类型

object属于引用数据类型

字符串需要引号引起来

var str="hello";

console.log("hello");//打印hello字符串

console.log(hello);//是打印hello变量，错误

使用双引号或单引号

var str='hello';

console.log(str);

引号不能嵌套，双引号不能放双引号，单引号不能放单引号

(可以这样用法）

var str='hello';

str='hello:",,,," ';

console.log(str);

但字符串中我们可以使用\作为转义字符，当表示一些特殊符号时候可以使用\进行转义

\"表示“

\'表示‘

\n表示换行

\t表示制表符

\\表示\

var str='hello';

str='hello:\',,,,\' ';

console.log(str);

number:

js中所有的值都是number类型

包括整数和浮点数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">
var a=123;
a=456;
console.log(a);


</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

typeof检查一个变量的类型

console.log(typeof b);

js中表示数字的最大值

Number.MAX_VALUE

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">
console.log(Number.MAX_VALUE);


</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

infinity表示正无穷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">
console.log(Number.MAX_VALUE*Number.MAX_VALUE);


</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

无穷乘无穷还是无穷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">
a=Number.MAX_VALUE*Number.MAX_VALUE;
console.log(a);

</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

infinity其实是number类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">

a=Infinity;
console.log(typeof a);

</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

NaN

一个特殊的数字，表示not a number

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">

a="abc"*"bcd";
a=NaN;
console.log(typeof a);

</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

js整数运算基本可以保证精确

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>

    <!--可以将js代码编写到外部js文件
    例如有js文件下游script.js文件引入-->
    <!--js文件里面写alert('hello');-->

<script type="text/javascript">
var c=123123+1231321;
console.log(c);

</script>
</head>

<body>
<!--点击按钮的时候，js代码才会执行-->
<button onclick="alert('hello')">chick</button>

<!--可以将js写在超链接中href属性中，点击超链接时，会执行js代码-->
<a href="javascript:alert('hello');"> hello </a>
</body>


</html>

浮点型可能不精确

布尔值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>
var bool=true;
console.log(bool);
</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>
var bool="true";
console.log(bool);
console.log(typeof bool);
</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>
var bool=true;
console.log(bool);
console.log(typeof bool);
</script>

</body>

</html>

null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>

var a=null;
console.log(a);
</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>

var a=null;
console.log(typeof a);
</script>

</body>

</html>

underfined类型的值只有一个，当声明一个变量，但并不给变量赋值时，他的值就是underfined

将其他数据转string

方式1：

调用被转换数据类型的tostring（）方法

调用xxx的yyy（）方法，就是xxx.yyy()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>

var a=123;
var b=a.toString();
console.log(typeof a);
cosole.log(a);
console.log(typeof b);
cosole.log(b);
</script>

</body>

</html>

null和undefined两值没有toString()

方式2：

调用string()函数，将被转换的数据作为参数传递给函数

string()函数做强制类型转换时，number和布尔实际就是调用的tostring()

null和underfined，就不会嗲用tostrng（）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
</head>

<body>
<script>

var a=123;
a=a.toString(a);
console.log(typeof a);
cosole.log(a);

</script>

</body>

</html>

人可以让地球服、海洋降，强迫宇宙吐宝藏。

强制类型转换number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script>
var a="123";
a=Number(a);
console.log(typeof a);
console.log(a);


</script>
</body>

</html>

NaN:(以下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script>
var a="abc";
a=Number(a);
console.log(typeof a);
console.log(a);


</script>
</body>

</html>

调用number()函数来将a转换成number类型

方式1：使用number（）函数

字符串--》数字

1，如果是纯数字的字符串，则直接将其转换为数字

2，如果字符串中有非数字的内容，则转换为nan

3、如果字符串是一个空串或一个全是空格的字符串，则转换为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script>

a=true;
a=Number(a);
console.log(typeof a);
console.log(a);


</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script>
var a="abc";
a=true;
a=Number(a);
console.log(typeof a);
console.log(a);


</script>
</body>

</html>

布尔--》数字

true转成1

false转成0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script>
a=null;
a=Number(a);
console.log(typeof a);
console.log(a);


</script>
</body>

</html>

nan：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script>
a=undefined;
a=Number(a);
console.log(typeof a);
console.log(a);


</script>
</body>

</html>

<script>

a="123px";

console.log(typeof a);
console.log(a);


</script>

但这种不成功显示，只显示nan

<script>

a="123px";
a=Number(a);
console.log(typeof a);
console.log(a);


</script>

parseint函数

可以将一个字符串中的有效的整数内容去出来，转化为number

<script>

a="123px";
a=parseInt(a);
console.log(typeof a);
console.log(a);


</script>

parsefloat()和parseint()类似，不同的是它可以获得有效的小数

如果对非string使用parseint（）或parsefloat()

他会先将其转换为string然后再操作

十六进制

<script> a=0x10; console.log(a); </script>

八进制（0开头）

<script>
a=070;
console.log(a);


</script>

二进制：（0b开头)

<script>
a=0b10;
console.log(a);


</script>

在parseint()传递一个第二个参数，来指定数字的进制

<script>
a=070;
a=parseInt(a,10);
console.log(a);


</script>

你是英雄咱好汉，高炉旁边比比看，你能炼一吨，咱炼一吨半;

将a转为布尔值

<script>
a=123;
a=boolean(a);
console.log(a);
console.log(typeof a);


</script>

运算符

运算符也叫操作符

通过运算符可以对一个或多个值进行运算，并获取运算结果

typeof就是运算符，可以来获得一个值得类型

它会将该值的类型以字符串的形式返回

<script>
var a=123;
var result=typeof a;
console.log(result);
console.log(typeof result);//讨论result类型

</script>

算数运算符

<script>
var a=123;
result=a+1;
console.log(result);

</script>

<script>

result="hello"+"你好";
console.log(result);

</script>

<script>

result=true+"你好";
console.log(result);

</script>

任何值和字符串相加都会转换为字符串，并做拼串操作

<script>

result=1+2+"3";
console.log(result);

</script>

<script>

result=1+2+"1";
console.log(result);

</script>

一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
<script type="text/javascript">

var a=123;
a=+a;
console.log("a="+a);
console.log(typeof a);

</script>

</head>
<body>






</body>

</html>

<script type="text/javascript">

var a=123;
a=-a;
console.log("a="+a);
console.log(typeof a);

</script>

<script type="text/javascript">

var a;
a="18";
// a=-a;
console.log("a="+a);
console.log(typeof a);

</script>

钢锹驾火箭，驾起青龙上云端，三山五岳听我令，玉皇下马我上鞍。

自增

<script type="text/javascript">
var a=1;
a++;
console.log("a="+a);

</script>

<script type="text/javascript">
var a=1;
++a;
console.log("a="+a);

</script>

对于原变量，a++,++a没有区别

区别在

console.log(++a);

console.log(a++);

a++等于原变量（自增前的值）

++a等于原变量新值（自增后的值）

自减

对于原变量，a--,--a没有区别

a--是变量的值（减前的值）

--a是变量的新值（减后的值）

<script type="text/javascript">
var a=1;

console.log(--a);
</script>

<script type="text/javascript">

var a=1;

console.log(a--);

</script>

逻辑运算

var a=true;

a=!a;

console.log("a="+a);

如果对一个值两次取反，不会变化

var a=true;

a=!!a;

console.log("a="+a);

对非布尔值转换再输出

var b=0;

b=!b;

console.log("b="+b);

console.log(typeof b);

var result=true&&true;

console.log("result="+result);

路线错了，知识越多越反动

unicode

unicode表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    /*
     * 在字符串中使用转义字符输入Unicode编码
     * 	\u四位编码
     */
    console.log("\u2620");

    </script>
</head>
<body>

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

</body>
</html>

相等运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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(10 != 10); //false
			//console.log("abcd" != "abcd"); //false
			//console.log("1" != 1);//false
			
			//console.log("123" === 123);//false
			//console.log(null === undefined);//false
			
			console.log(1 !== "1"); //true
			
			
		</script>
	</head>
	<body>
	</body>
</html>

条件运算符

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         /*
          * 条件运算符也叫三元运算符
          *     语法：
          *        条件表达式?语句1:语句2;
          *     - 执行的流程：
          *        条件运算符在执行时，首先对条件表达式进行求值，
          *           如果该值为true，则执行语句1，并返回执行结果
          *           如果该值为false，则执行语句2，并返回执行结果
          *        如果条件的表达式的求值结果是一个非布尔值，
          *           会将其转换为布尔值然后在运算
          */
         
         //false?alert("语句1"):alert("语句2");
         
         var a = 300;
         var b = 143;
         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);
         
         //"hello"?alert("语句1"):alert("语句2");
         
         
      </script>
   </head>
   <body>
   </body>
</html>

条件运算符优先级

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * , 运算符
          *     使用,可以分割多个语句，一般可以在声明多个变量时使用,
          */
         //使用,运算符同时声明多个变量
         //var a , b , c;
         
         //可以同时声明多个变量并赋值
         //var a=1 , b=2 , c=3;
         //alert(b);
         
         /*
          * 就和数学中一样，在JS中运算符也有优先级，
          *     比如：先乘除 后加减
          * 在JS中有一个运算符优先级的表，
          *     在表中越靠上优先级越高，优先级越高越优先计算，
          *     如果优先级一样，则从左往右计算。
          * 但是这个表我们并不需要记忆，如果遇到优先级不清楚
          *     可以使用()来改变优先级
          */
         
         //var result = 1 + 2 * 3;
         
         /*
          * 如果||的优先级高，或者两个一样高，则应该返回3
          * 如果与的优先级高，则应该返回1
          *        
          */
         var result = 1 || 2 && 3;
         
         console.log("result = "+result);   
         
      </script>
   </head>
   <body>
   </body>
</html>

语句：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 我们的程序是由一条一条语句构成的
          *     语句是按照自上向下的顺序一条一条执行的
          *     在JS中可以使用{}来为语句进行分组,
          *        同一个{}中的语句我们称为是一组语句，
          *        它们要么都执行，要么都不执行，
          *        一个{}中的语句我们也称为叫一个代码块
          *        在代码块的后边就不用再编写;了
          * 
          *     JS中的代码块，只具有分组的的作用，没有其他的用途
          *        代码块内容的内容，在外部是完全可见的
          */
         {
            var a = 10;    
            alert("hello");
            console.log("你好");
            document.write("语句");
         }
         
         
         console.log("a = "+a);
      
         
         
         
      </script>
   </head>
   <body>
   </body>
</html>

流程控制语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 流程控制语句
			 * 	- JS中的程序是从上到下一行一行执行的
			 * 	- 通过流程控制语句可以控制程序执行流程，
			 * 		使程序可以根据一定的条件来选择执行
			 *  - 语句的分类：
			 * 		1.条件判断语句
			 * 		2.条件分支语句
			 * 		3.循环语句
			 * 
			 * 
			 * 条件判断语句：
			 * 	- 使用条件判断语句可以在执行某个语句之前进行判断，
			 * 		如果条件成立才会执行语句，条件不成立则语句不执行。
			 *  - if语句
			 * 	- 语法一：
			 * 		if(条件表达式){
			 * 			语句...
			 * 		}
			 * 			
			 * 		if语句在执行时，会先对条件表达式进行求值判断，
			 * 		如果条件表达式的值为true，则执行if后的语句，
			 * 		如果条件表达式的值为false，则不会执行if后的语句。
			 * 			if语句只能控制紧随其后的那个语句,
			 * 				如果希望if语句可以控制多条语句，
			 * 				可以将这些语句统一放到代码块中
			 * 			if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
			 * 			
			 */
			
			var a = 25;
			
			if(a > 10 && a <= 20){
				alert("a大于10，并且 a小于等于20");
			}	
			
			
		</script>
	</head>
	<body>
	</body>
</html>

if语句

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * if语句
          *     语法二:
          *        if(条件表达式){
          *           语句...
          *        }else{
          *           语句...
          *        }
          * 
          *     if...else...语句
          *        当该语句执行时，会先对if后的条件表达式进行求值判断，
          *           如果该值为true，则执行if后的语句
          *           如果该值为false，则执行else后的语句
          * 
          *     语法三：
          *        if(条件表达式){
          *           语句...
          *        }else if(条件表达式){
          *           语句...
          *        }else if(条件表达式){
          *           语句...
          *        }else{
          *           语句...
          *        }
          * 
          *        if...else if...else
          *           当该语句执行时，会从上到下依次对条件表达式进行求值判断
          *           如果值为true，则执行当前语句。
          *           如果值为false，则继续向下判断。
          *           如果所有的条件都不满足，则执行最后一个else后的语句
          *           该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
          */
         
         var age = 50;
         
         /*if(age >= 60){
            alert("你已经退休了~~");
         }else{
            alert("你还没退休~~~");
         }*/
         
         age = 200;
         
         /*if(age > 100){
            alert("活着挺没意思的~~");
         }else if(age > 80){
            alert("你也老大不小的了~~");   
         }else if(age > 60){
            alert("你也退休了~~");
         }else if(age > 30){
            alert("你已经中年了~~");
         }else if(age > 17){
            alert("你已经成年了");
         }else{
            alert("你还是个小孩子~~");
         }*/
         
         age = 90;
         
         if(age > 17 && age <= 30){
            alert("你已经成年了");
         }else if(age > 30 && age <= 60){
            alert("你已经中年了");
         }else if(age > 60 && age <= 80){
            alert("你已经退休了");
         }else{
            alert("你岁数挺大的了~~");
         }
         
         
      </script>
   </head>
   <body>
   </body>
</html>

if训练

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>if练习1</title>
      <script type="text/javascript">
         /*
          *     从键盘输入小明的期末成绩:
          * 当成绩为100时，'奖励一辆BMW'
          * 当成绩为[80-99]时，'奖励一台iphone15s'
          * 当成绩为[60-80]时，'奖励一本参考书'
          * 其他时，什么奖励也没有
          */
         
         /*
          * prompt()可以弹出一个提示框，该提示框中会带有一个文本框，
          *     用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
          *     该字符串将会作为提示框的提示文字
          * 
          * 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
          */
         //score就是小明的期末成绩
         var score = prompt("请输入小明的期末成绩(0-100):");
         
         
         //判断值是否合法
         if(score > 100 || score < 0 || isNaN(score)){
            alert("拉出去毙了~~~");
         }else{
            //根据score的值来决定给小明什么奖励
            if(score == 100){
               //奖励一台宝马
               alert("宝马，拿去~~~");
            }else if(score >= 80){
               //奖励一个手机
               alert("手机，拿去玩~~~");
            }else if(score >= 60){
               //奖励一本参考书
               alert("参考书，拿去看~~~");
            }else{
               alert("棍子一根~~");
            }
         }
         
         
         
         
         
         
      </script>
   </head>
   <body>
      
   </body>
</html>

if2训练：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>if练习2</title>
      <script type="text/javascript">
         /*
          *     大家都知道，男大当婚，女大当嫁。那么女方家长要嫁女儿，当然要提出一定的条件： 
          * 高：180cm以上; 富:1000万以上; 帅:500以上;
          * 如果这三个条件同时满足，则:'我一定要嫁给他'
          * 如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。' 
          * 如果三个条件都不满足，则:'不嫁！' 
          */
         
         var height = prompt("请输入你的身高(CM):");
         var money = prompt("请输入你的财富(万):");
         var face = prompt("请输入你的颜值(PX):");
         
         //如果这三个条件同时满足，则:'我一定要嫁给他'
         if(height > 180 && money > 1000 && face > 500){
            alert("我一定要嫁给他~~");
         }else if(height > 180 || money > 1000 || face > 500){
            //如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。' 
            alert("嫁吧，比上不足，比下有余。");
         }else{
            //如果三个条件都不满足，则:'不嫁！' 
            alert("不嫁。");
         }
         
         
         
      </script>
   </head>
   <body>
      
   </body>
</html>

if3:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>if练习3</title>
      <script type="text/javascript">
         /*
          *     编写程序，由键盘输入三个整数分别存入变量num1、num2、num3，
          *     对他们进行排序，并且从小到大输出。
          */
         
         //获取用户输入的三个数
         /*
          * prompt()函数的返回值是String类型的
          */
         var num1 = +prompt("请输入第一个数:");
         var num2 = +prompt("请输入第二个数:");
         var num3 = +prompt("请输入第三个数:");
         
         
         //找到三个数中最小的数
         if(num1 < num2 && num1 < num3){
            //num1最小，比较num2和num3
            if(num2 < num3){
               //num1 num2 num3
               alert(num1 +","+num2 + ","+num3);
            }else{
               //num1 num3 num2
               alert(num1 +","+num3 + ","+num2);
            }
            
         }else if(num2 < num1 && num2 < num3){
            //num2最小，比较num1和num3
            if(num1 < num3){
               //num2 num1 num3
               alert(num2 +","+num1 + ","+num3);
            }else{
               //num2 num3 num1
               alert(num2 +","+num3 + ","+num1);
            }
            
         }else{
            //num3最小,比较num1和num2
            if(num1 < num2){
               // num3 num1 num2
               alert(num3 +","+num1 + ","+num2);
            }else{
               //num3 num2 num1
               alert(num3 +","+num2 + ","+num1);
            }
            
         }
         
         
      </script>
   </head>
   <body>
      
   </body>
</html>

switch

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         /*
          * 条件分支语句也叫switch语句
          *     语法：
          *        switch(条件表达式){
          *           case 表达式:
          *              语句...
          *              break;
          *        case 表达式:
          *              语句...
          *              break;
          *           default:
          *              语句...
          *              break;
          *        }
          * 
          *     执行流程：
          *        switch...case..语句
          *        在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
          *           如果比较结果为true，则从当前case处开始执行代码。
          *              当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
          *              这样可以确保只会执行当前case后的语句，而不会执行其他的case
          *           如果比较结果为false，则继续向下比较
          *           如果所有的比较结果都为false，则只执行default后的语句
          * 
          *     switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，
          *        同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
          */
         
         //根据num的值，输出对应的中文
         
         var num = 3;
         
         /*if(num == 1){
            console.log("壹");
         }else if(num == 2){
            console.log("贰");
         }else if(num == 3){
            console.log("叁");
         }*/
         
         num = "hello";
         
         switch(num){
            case 1:
               console.log("壹");
               //使用break可以来退出switch语句
               break;
            case 2:
               console.log("贰");
               break;
            case 3:
               console.log("叁");
               break;
            default:
               console.log("非法数字~~");
               break;
         }
         
      </script>
   </head>
   <body>
   </body>
</html>

switch训练1：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>switch练习1</title>
      <script type="text/javascript">
         /*
          * 对于成绩大于60分的，输出'合格'。低于60分的，输出'不合格'
          * 
          * 6x  /  10 = 6
          * 7x  /  10 = 7
          * 8x  /  10 = 8
          * 9x  /  10 = 9
          * 100 /  10 = 10
          * 
          */
         var score = 75;
         
         /*switch(parseInt(score/10)){
            case 10:
            case 9:
            case 8:
            case 7:
            case 6:
               console.log("合格");
               break;
            default:
               console.log("不合格");
               break;
         }*/
         
         switch(true){
            case score >= 60:
               console.log("合格");
               break;
            default:
               console.log("不合格");
               break;
         }
         
         
         
      </script>
   <body>
   </body>
</html>

while

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">


    /*
     * 向页面中输出连续的数字
     */
    /*var n = 1;
    document.write(n++ +"<br />");*/

    /*
     * 循环语句：
     *     通过循环语句可以反复的执行一段代码多次
     *
     * while循环
     *     - 语法：
     *        while(条件表达式){
     *           语句...
     *        }
     *
     *     - while语句在执行时，
     *        先对条件表达式进行求值判断，
     *           如果值为true，则执行循环体，
     *              循环体执行完毕以后，继续对表达式进行判断
     *              如果为true，则继续执行循环体，以此类推
     *           如果值为false，则终止循环
     *
     * do...while循环
     *     - 语法：
     *        do{
     *           语句...
     *        }while(条件表达式)
     *
     *     - 执行流程：
     *        do...while语句在执行时，会先执行循环体，
     *           循环体执行完毕以后，在对while后的条件表达式进行判断，
     *           如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
     *           如果结果为false，则终止循环
     *
     *        实际上这两个语句功能类似，不同的是while是先判断后执行，
     *           而do...while会先执行后判断，
     *        do...while可以保证循环体至少执行一次，
     *           而while不能
     */
    var n = 1;

    //向这种将条件表达式写死为true的循环，叫做死循环
    //该循环不会停止，除非浏览器关闭，死循环在开发中慎用
    //可以使用break，来终止循环
    while(true){
        alert(n++);
        

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">


    /*
     * 向页面中输出连续的数字
     */
    /*var n = 1;
    document.write(n++ +"<br />");*/

    /*
     * 循环语句：
     *     通过循环语句可以反复的执行一段代码多次
     *
     * while循环
     *     - 语法：
     *        while(条件表达式){
     *           语句...
     *        }
     *
     *     - while语句在执行时，
     *        先对条件表达式进行求值判断，
     *           如果值为true，则执行循环体，
     *              循环体执行完毕以后，继续对表达式进行判断
     *              如果为true，则继续执行循环体，以此类推
     *           如果值为false，则终止循环
     *
     * do...while循环
     *     - 语法：
     *        do{
     *           语句...
     *        }while(条件表达式)
     *
     *     - 执行流程：
     *        do...while语句在执行时，会先执行循环体，
     *           循环体执行完毕以后，在对while后的条件表达式进行判断，
     *           如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
     *           如果结果为false，则终止循环
     *
     *        实际上这两个语句功能类似，不同的是while是先判断后执行，
     *           而do...while会先执行后判断，
     *        do...while可以保证循环体至少执行一次，
     *           而while不能
     */
    var n = 1;

    //向这种将条件表达式写死为true的循环，叫做死循环
    //该循环不会停止，除非浏览器关闭，死循环在开发中慎用
    //可以使用break，来终止循环
    while(true){
        alert(n++);

        //判断n是否是10
        if(n == 10){
            //退出循环
            break;
        }

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">



    var i = 1;

    //2.在循环中设置一个条件表达式
    while(i <= 10){
        //3.定义一个更新表达式，每次更新初始化变量
        document.write(i++ +"<br />")

    }

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">



    var i = 1;

    do{
        document.write(i++ +"<br />");
    }while(i <= 10);



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

while练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    /*
     * 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
     *
     * 1000 1000*1.05
     * 1050 1050*1.05
     */

    //定义一个变量，表示当前的钱数
    var money = 1000;

    //定义一个计数器
    var count = 0;

    //定义一个while循环来计算每年的钱数
    while(money < 5000){
        money *= 1.05;

        //使count自增
        count++;
    }


    //console.log(money);
    console.log("一共需要"+count+"年");



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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">
    /*
     *     从键盘输入小明的期末成绩:
     * 当成绩为100时，'奖励一辆BMW'
     * 当成绩为[80-99]时，'奖励一台iphone15s'
     * 当成绩为[60-80]时，'奖励一本参考书'
     * 其他时，什么奖励也没有
     */

    /*
     * prompt()可以弹出一个提示框，该提示框中会带有一个文本框，
     *     用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
     *     该字符串将会作为提示框的提示文字
     *
     * 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
     */
    //将prompt放入到一个循环中
    while(true){
        //score就是小明的期末成绩
        var score = prompt("请输入小明的期末成绩(0-100):");
        //判断用户输入的值是否合法
        if(score >= 0 && score <= 100){
            //满足该条件则证明用户的输入合法，退出循环
            break;
        }

        alert("请输入有效的分数！！！");
    }



    //判断值是否合法
    if(score > 100 || score < 0 || isNaN(score)){
        alert("拉出去毙了~~~");
    }else{
        //根据score的值来决定给小明什么奖励
        if(score == 100){
            //奖励一台宝马
            alert("宝马，拿去~~~");
        }else if(score >= 80){
            //奖励一个手机
            alert("手机，拿去玩~~~");
        }else if(score >= 60){
            //奖励一本参考书
            alert("参考书，拿去看~~~");
        }else{
            alert("棍子一根~~");
        }
    }






    </script>
</head>
<body>

</body>
</html>

for

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    /*
     * for语句，也是一个循环语句，也称为for循环
     *     在for循环中，为我们提供了专门的位置用来放三个表达式：
     *        1.初始化表达式
     *        2.条件表达式
     *        3.更新表达式
     *
     *  for循环的语法：
     *        for(①初始化表达式;②条件表达式;④更新表达式){
     *           ③语句...
     *        }
     *
     *        for循环的执行流程：
     *           ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
     *           ②执行条件表达式，判断是否执行循环。
     *              如果为true，则执行循环③
     *              如果为false，终止循环
     *           ④执行更新表达式，更新表达式执行完毕继续重复②
     */

    //创建一个执行10次的while循环
    //初始化表达式
    var i = 0;

    //创建一个循环，定义条件表达式
    while(i < 10){
        //设置更新表达式
        alert(i++);
    }
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    /*
     * for语句，也是一个循环语句，也称为for循环
     *     在for循环中，为我们提供了专门的位置用来放三个表达式：
     *        1.初始化表达式
     *        2.条件表达式
     *        3.更新表达式
     *
     *  for循环的语法：
     *        for(①初始化表达式;②条件表达式;④更新表达式){
     *           ③语句...
     *        }
     *
     *        for循环的执行流程：
     *           ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
     *           ②执行条件表达式，判断是否执行循环。
     *              如果为true，则执行循环③
     *              如果为false，终止循环
     *           ④执行更新表达式，更新表达式执行完毕继续重复②
     */

    //创建一个执行10次的while循环
    //初始化表达式
    var i = 0;

    //创建一个循环，定义条件表达式
    for(var i = 0 ; i < 10 ; i++ ){
        alert(i);
    }
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 打印1-100之间所有奇数之和
			 */
			
			//创建一个变量，用来保存奇数之和
			//var sum = 0;
			
			//打印1-100之间的数
			for(var i=1 , sum=0 ; i<=100 ; i++){
				
				//判断i是否是奇数
				//不能被2整除的数就是奇数
				if(i%2 != 0){
					//如果i除以2有余数则证明i是奇数
					//console.log(i);
					sum = sum+i;
				}
			}
			
			console.log("奇数之和为 : "+sum);
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 打印1-100之间所有7的倍数的个数及总和
          */
         //定义一个变量，来保存总和
         var sum = 0;
         //定义一个计数器，来记录数量
         var count = 0;
         
         //打印1-100之间所有的数
         for(var i=1 ; i<=100 ; i++){
            
            //判断i是否是7的倍数
            if(i % 7 == 0){
               //console.log(i);
               sum += i;
               //使计数器自增1
               count++;
               
            }
            
         }
         
         //输出总和
         console.log("总和为:"+sum);
         //输出总数
         console.log("总数量为:"+count);
         
         
         
      </script>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 水仙花数是指一个3位数，它的每个位上的数字的3 次幂之和等于它本身。
            （例如：1^3 + 5^3 + 3^3 = 153）,请打印所有的水仙花数。
          */
         
         //打印所有的三位数
         for(var i=100 ; i<1000 ; i++){
            
            //获取i的百位 十位 个位的数字
            //获取百位数字
            var bai = parseInt(i/100);
            
            //获取十位的数字
            var shi = parseInt((i-bai*100)/10);
            
            //获取个位数字
            var ge = i % 10;
            
            //判断i是否是水仙花数
            if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
               console.log(i);
            }
            
            
         }
         
         
      </script>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         /*
          * 在页面中接收一个用户输入的数字，并判断该数是否是质数。
            质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。   
          */
         
         var num = prompt("请输入一个大于1的整数:");
         
         
         //判断这个值是否合法
         if(num <= 1){
            alert("该值不合法！");
         }else{
            
            //创建一个变量来保存当前的数的状态
            //默认当前num是质数
            var flag = true;
            
            //判断num是否是质数
            //获取2-num之间的数
            for(var i=2 ; i<num ; i++){
               //console.log(i);
               //判断num是否能被i整除
               if(num % i == 0){
                  //如果num能被i整除，则说明num一定不是质数
                  //设置flag为false
                  flag = false;
               }
            }
            
            //如果num是质数则输出
            if(flag){
               alert(num + "是质数！！！");
            }else{
               alert("这个不是质数")
            }
            
            
         }
         
         
      </script>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    for(var i=0 ; i<5 ; i++){

   for(var j=0 ; j<5 ; j++){
       document.write("*");
    }
    }
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    for(var i=0 ; i<5 ; i++){

   for(var j=0 ; j<5 ; j++){
       document.write("*");
    }
   document.write("<br/>");
    }
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    for(var i=0 ; i<10; i++){

        for(var j=0 ; j<5; j++){
            document.write("*&nbsp;&nbsp;&nbsp;");
        }

        //输出一个换行
        document.write("<br />");


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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    for(var i=0 ; i<10; i++){

        for(var j=0 ; j<i+1; j++){
            document.write("*&nbsp;&nbsp;&nbsp;");
        }

        //输出一个换行
        document.write("<br />");


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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    for(var i=0 ; i<10; i++){

        for(var j=0 ; j<5-i ; j++){
            document.write("*&nbsp;&nbsp;&nbsp;");
        }

        //输出一个换行
        document.write("<br />");


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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 1.打印99乘法表
          *      1*1=1
          *      1*2=2 2*2=4
          *      1*3=3 2*3=6 3*3=9
          *      1*4=4 2*4=8 3*4=12 4*4=16 
          *                    ....9*9=81
          * 
          * 2.打印出1-100之间所有的质数
          */
         
         //创建外层循环，用来控制乘法表的高度
         for(var i=1 ; i<=9 ; i++ ){
            //创建一个内层循环来控制图形的宽度
            for(var j=1 ; j<=i ; j++){
               document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
            }
            
            //输出一个换行
            document.write("<br />");
            
         }
         
         
      </script>
      <style type="text/css">
      
         body{
            width: 2000px;
         }
         
         span{
            display: inline-block;
            width: 80px;
         }
         
      </style>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 打印出1-100之间所有的质数
          */
         
         //打印2-100之间所有的数
         for(var i=2 ; i<=100 ; i++){
            
            //创建一个布尔值，用来保存结果，默认i是质数
            var flag = true;
            
            //判断i是否是质数
            //获取到2-i之间的所有的数
            for(var j=2 ; j<i ; j++){
               
               //判断i是否能被j整除
               if(i%j == 0){
                  //如果进入判断则证明i不是质数,修改flag值为false
                  flag = false;
                  
               }
               
            }
            
            //如果是质数，则打印i的值
            if(flag){
               console.log(i);
            }
            
         }
         
         
      </script>
   </head>
   <body>
   </body>
</html>

break，continue

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
              * break关键字可以用来退出switch或循环语句
              *    不能在if语句中使用break和continue
              *    break关键字，会立即终止离他最近的那个循环语句
              */

    for(var i=0 ; i<5 ; i++){
        console.log(i);

        if(i == 2){
            break;
        }

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
              * break关键字可以用来退出switch或循环语句
              *    不能在if语句中使用break和continue
              *    break关键字，会立即终止离他最近的那个循环语句
              */

    for(var i=0 ; i<5 ; i++){
        console.log("@外层循环"+i)
        for(var j=0 ; j<5; j++){
            break;
            console.log("内层循环:"+j);
        }
    }
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
              * break关键字可以用来退出switch或循环语句
              *    不能在if语句中使用break和continue
              *    break关键字，会立即终止离他最近的那个循环语句
              */

    /*
               * 可以为循环语句创建一个label，来标识当前的循环
               * label:循环语句
               * 使用break语句时，可以在break后跟着一个label，
               *   这样break将会结束指定的循环，而不是最近的
               */
    outer:
    for(var i=0 ; i<5 ; i++){
        console.log("@外层循环"+i)
        for(var j=0 ; j<5; j++){
            break outer;
            console.log("内层循环:"+j);
        }
    }
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
              * break关键字可以用来退出switch或循环语句
              *    不能在if语句中使用break和continue
              *    break关键字，会立即终止离他最近的那个循环语句
              */

    /*
               * 可以为循环语句创建一个label，来标识当前的循环
               * label:循环语句
               * 使用break语句时，可以在break后跟着一个label，
               *   这样break将会结束指定的循环，而不是最近的
               */
    /*
          * continue关键字可以用来跳过当次循环
          *     同样continue也是默认只会对离他最近的循环循环起作用
          */
    for(var i=0 ; i<5 ; i++){

        if(i==2){
            continue;
        }

        console.log(i);
    }
    </script>
</head>
<body>
</body>
</html>

continue和break区别：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
              * break关键字可以用来退出switch或循环语句
              *    不能在if语句中使用break和continue
              *    break关键字，会立即终止离他最近的那个循环语句
              */

    /*
               * 可以为循环语句创建一个label，来标识当前的循环
               * label:循环语句
               * 使用break语句时，可以在break后跟着一个label，
               *   这样break将会结束指定的循环，而不是最近的
               */
    /*
          * continue关键字可以用来跳过当次循环
          *     同样continue也是默认只会对离他最近的循环循环起作用
          */
    for(var i=0 ; i<5 ; i++){

        if(i==2){
            continue;
        }

        console.log(i);
    }
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
              * break关键字可以用来退出switch或循环语句
              *    不能在if语句中使用break和continue
              *    break关键字，会立即终止离他最近的那个循环语句
              */

    /*
               * 可以为循环语句创建一个label，来标识当前的循环
               * label:循环语句
               * 使用break语句时，可以在break后跟着一个label，
               *   这样break将会结束指定的循环，而不是最近的
               */
    /*
          * continue关键字可以用来跳过当次循环
          *     同样continue也是默认只会对离他最近的循环循环起作用
          */
    outer:
        for(var i=0 ; i<5 ; i++){

            for(var j=0 ; j<5 ; j++){

                continue;

                console.log("-->"+j);

            }

            console.log("@--->"+i);
        }
    </script>
</head>
<body>
</body>
</html>

https://www.bilibili.com/video/BV1YW411T7GX?p=44

https://www.bilibili.com/video/BV1YW411T7GX?p=45

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         //测试如下的程序的性能
         //在程序执行前，开启计时器
         //console.time("计时器的名字")可以用来开启一个计时器
         //它需要一个字符串作为参数，这个字符串将会作为计时器的标识
         console.time("test");
         
         //打印2-100之间所有的数
         for(var i=2 ; i<=100000 ; i++){
            var flag = true;
            for(var j=2 ; j<=Math.sqrt(i) ; j++){
               if(i%j == 0){
                  //如果进入判断则证明i不是质数,修改flag值为false
                  flag = false;
                  //一旦进入判断，则证明i不可能是质数了，此时循环再执行已经没有任何意义了
                  //使用break来结束循环
                  break;
                  
                  //不加break 215ms
                  //加break 25ms
                  //修改j<=后 2.6
               }
            }
            //如果是质数，则打印i的值
            if(flag){
               //console.log(i);
            }
         }
         
         //终止计时器
         //console.timeEnd()用来停止一个计时器，需要一个计时器的名字作为参数
         console.timeEnd("test");
         
         /*
          * 36
          * 1 36
          * 2 18
          * 3 12
          * 4 9
          * 6 6
          */
         
         //可以通过Math.sqrt()对一个数进行开方
         //var result = Math.sqrt(97);
         
         //console.log("result = "+result)
         
         
      </script>
   </head>
   <body>
   </body>
</html>

摩西摩西（44，45讲略跳）讲性能

对象

* JS中数据类型 * - String 字符串 * - Number 数值 * - Boolean 布尔值 * - Null 空值 * - Undefined 未定义 * - 以上这五种类型属于基本数据类型，以后我们看到的值 * 只要不是上边的5种，全都是对象

*   - Object 对象
* 
* 
* 基本数据类型都是单一的值"hello" 123 true,
*  值和值之间没有任何的联系。
* 
* 在JS中来表示一个人的信息（name gender age）：
*  var name = "孙悟空";
*  var gender = "男";
*  var age = 18;
* 如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
* 
* 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
* 
* 对象的分类：
*  1.内建对象
*     - 由ES标准中定义的对象，在任何的ES的实现中都可以使用
*     - 比如：Math String Number Boolean Function Object....
*

*   2.宿主对象
*     - 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
*     - 比如 BOM DOM
* 
*  3.自定义对象
*     - 由开发人员自己创建的对象
* 
*/

对象的基本操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">
    //创建对象
    /*
     * 使用new关键字调用的函数，是构造函数constructor
     *     构造函数是专门用来创建对象的函数
     * 使用typeof检查一个对象时，会返回object
     */
    var obj = new Object();
    console.log(obj);
    console.log(typeof obj);








    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">
    //创建对象
    /*
     * 使用new关键字调用的函数，是构造函数constructor
     *     构造函数是专门用来创建对象的函数
     * 使用typeof检查一个对象时，会返回object
     */
    var obj = new Object();
    /*
          * 在对象中保存的值称为属性
          * 向对象添加属性
          *     语法：对象.属性名 = 属性值;
          */

    //向obj中添加一个name属性
    obj.name = "孙悟空";
    //向obj中添加一个gender属性
    obj.gender = "男";
    //向obj中添加一个age属性
    obj.age = 18;

    /*
     * 读取对象中的属性
     *     语法：对象.属性名
     *
     * 如果读取对象中没有的属性，不会报错而是会返回undefined
     */
    console.log(obj.name);
    console.log(obj.gender);
    console.log(obj.hello);








    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">
    //创建对象
    /*
     * 使用new关键字调用的函数，是构造函数constructor
     *     构造函数是专门用来创建对象的函数
     * 使用typeof检查一个对象时，会返回object
     */
    var obj = new Object();
    /*
          * 在对象中保存的值称为属性
          * 向对象添加属性
          *     语法：对象.属性名 = 属性值;
          */

    //向obj中添加一个name属性
    obj.name = "孙悟空";
    //向obj中添加一个gender属性
    obj.gender = "男";
    //向obj中添加一个age属性
    obj.age = 18;

    /*
     * 读取对象中的属性
     *     语法：对象.属性名
     *
     * 如果读取对象中没有的属性，不会报错而是会返回undefined
     */
    obj.name = "tom";

    /*
     * 删除对象的属性
     *     语法：delete 对象.属性名
     */
    delete obj.name;

    console.log(obj.name);
    console.log(obj.age);








    </script>
</head>
<body>

</body>
</html>

属性名和属性值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();
   
    obj["123"] = 789;
    console.log(obj["123"]);



    </script>
</head>
<body>

</body>
</html>

/*
 * 如果要使用特殊的属性名，不能采用.的方式来操作
 *     需要使用另一种方式：
 *        语法：对象["属性名"] = 属性值
 *     读取时也需要采用这种方式
 * 
 * 使用[]这种形式去操作属性，更加的灵活，
 *     在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
 * 
 */

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();

    obj["123"] = 789;
    obj["nihao"] = "你好";
    var n = "nihao";
    console.log(obj["123"]);
    console.log(obj[n]);


    </script>
</head>
<body>

</body>
</html>

/*
 * 属性值
 *     JS对象的属性值，可以是任意的数据类型
 *        甚至也可以是一个对象
 */

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();

    obj["123"] = 789;
    obj["nihao"] = "你好";
    var n = "nihao";
    console.log(obj["123"]);
    console.log(obj[n]);
    obj.test = true;
    console.log(obj.test);
    obj.test = null;
    console.log(obj.test);
    obj.test = undefined;
    console.log(obj.test);



    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();

    obj["123"] = 789;
    obj["nihao"] = "你好";
    var n = "nihao";
    var obj2 = new Object();
    obj2.name = "猪八戒";

    //将obj2设置为obj的属性
    obj.test = obj2;

    console.log(obj.test.name);



    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();
    obj.name = "孙悟空";
    obj["123"] = 789;
    obj["nihao"] = "你好";
    var n = "nihao";
    var obj2 = new Object();
    obj2.name = "猪八戒";

    //将obj2设置为obj的属性
    obj.test = obj2;

    console.log(obj);



    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();
    obj.name = "孙悟空";
    obj["123"] = 789;
    obj["nihao"] = "你好";
    var n = "nihao";
    var obj2 = new Object();
    obj2.name = "猪八戒";

    //将obj2设置为obj的属性
    obj.test = obj2;

    /*
          * in 运算符
          *     - 通过该运算符可以检查一个对象中是否含有指定的属性
          *        如果有则返回true，没有则返回false
          *  - 语法：
          *        "属性名" in 对象
          */
    console.log(obj.test2);

    //检查obj中是否含有test2属性
    console.log("test2" in obj);
    console.log("test" in obj);
    console.log("name" in obj);


    </script>
</head>
<body>

</body>
</html>

对象地址谈论

 JS中的变量都是保存到栈内存中的，
*     基本数据类型的值直接在栈内存中存储，
*     值与值之间是独立存在，修改一个变量不会影响其他的变量
* 
*

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间， * 而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用， * 当一个通过一个变量修改属性时，另一个也会受到影响

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">

    var obj = new Object();
    obj.name = "孙悟空";

    var obj2 = obj;

    //修改obj的name属性
    obj.name = "猪八戒";


    //设置obj2为null
    obj2 = null;

    console.log(obj);
    console.log(obj2);

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>if练习1</title>
    <script type="text/javascript">
    var obj3 = new Object();
    var obj4 = new Object();
    obj3.name = "沙和尚";
    obj4.name = "沙和尚";

    console.log(obj3);
    console.log(obj4);

    /*
     * 当比较两个基本数据类型的值时，就是比较值。
     * 而比较两个引用数据类型时，它是比较的对象的内存地址，
     *        如果两个对象是一摸一样的，但是地址不同，它也会返回false
     */
    console.log(obj3 == obj4);


    </script>
</head>
<body>

</body>
</html>

//创建一个对象
//var obj = new Object();

/*
 * 使用对象字面量来创建一个对象
 */
var obj = {};

//console.log(typeof obj);

obj.name = "孙悟空";

//console.log(obj.name);

/*
 * 使用对象字面量，可以在创建对象时，直接指定对象中的属性
 * 语法：{属性名:属性值,属性名:属性值....}
 *     对象字面量的属性名可以加引号也可以不加，建议不加,
 *     如果要使用一些特殊的名字，则必须加引号
 * 
 * 属性名和属性值是一组一组的名值对结构，
 *     名和值之间使用:连接，多个名值对之间使用,隔开
 *     如果一个属性之后没有其他的属性了，就不要写,
 */
var obj2 = {
   
   name:"猪八戒",
   age:13,
   gender:"男",
   test:{name:"沙僧"}
   
};

console.log(obj2.test);

函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    /*
     * 函数 function
     *     - 函数也是一个对象
     *     - 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
     *     - 函数中可以保存一些代码在需要的时候调用
     *     - 使用typeof检查一个函数对象时，会返回function
     */

    //我们在实际开发中很少使用构造函数来创建一个函数对象
    //创建一个函数对象
    //可以将要封装的代码以字符串的形式传递给构造函数
    //var fun = new Function("console.log('Hello 这是我的第一个函数');");

    //封装到函数中的代码不会立即执行
    //函数中的代码会在函数调用的时候执行
    //调用函数 语法：函数对象()
    //当调用函数时，函数中封装的代码会按照顺序执行
    //fun();

    /*
     * 使用 函数声明 来创建一个函数
     *     语法：
     *        function 函数名([形参1,形参2...形参N]){
     *           语句...
     *        }
     */

    function fun2(){
        console.log("这是我的第二个函数~~~");
        alert("哈哈哈哈哈");
        document.write("~~~~(>_<)~~~~");
    }

    console.log(fun2);
    //调用fun2
    fun2();

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">


    var fun3 = function(){
        console.log("我是匿名函数中封装的代码");
    };


    fun3();

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

函数参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(){
      var a=1;
      var b=1;
      console.log(a+b);
    }
sum();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(a,b){
        console.log(a+b);
    }
sum(1,2);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(a,b){
        console.log(a+b);
    }
sum(1,"hello");
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(a,b){
        console.log(a+b);
    }
sum(1,false);
    </script>
</head>
<body>
</body>
</html>

* 在调用函数时，可以在()中指定实参（实际参数）
*  实参将会赋值给函数中对应的形参

* 调用函数时解析器不会检查实参的类型,
*  所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
* 函数的实参可以是任意的数据类型

* 调用函数时，解析器也不会检查实参的数量
*  多余实参不会被赋值
* 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(a,b){
        console.log(a+b);
    }
sum(1,false);
    sum(123,456,"hello",true,null);
    sum(123);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(a,b){
        console.log("a = "+a);
        console.log("b = "+b);
        console.log(a+b);
    }
sum(1,false);
    sum(123,456,"hello",true,null);
    sum(123);
    </script>
</head>
<body>
</body>
</html>

函数的返回值

 <script type="text/javascript">
function sum(a,b,c){
    alert(a+b+c);
}
 sum(1,2,3);

 </script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function sum(a,b,c){
   var d=a+b+c;
   return d;
    }
    var result=sum(4,7,8);
    console.log("result="+result);
    </script>
</head>
<body>
</body>
</html>

//调用函数
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么

/*
 * 创建一个函数，用来计算三个数的和
 * 
 * 可以使用 return 来设置函数的返回值
 *     语法：
 *        return 值
 * 
 *     return后的值将会会作为函数的执行结果返回，
 *        可以定义一个变量，来接收该结果
 * 
 *  在函数中return后的语句都不会执行
 * 
 *     如果return语句后不跟任何值就相当于返回一个undefined，
 *     如果函数中不写return，则也会返回undefined
 * 
 *     return后可以跟任意类型的值
 * 
 */

实参可以是任意值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        /*
         * 定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false
         */

        function isOu(num){

            return num % 2 == 0;
        }

    var result = isOu(2);

    console.log("result = "+result);



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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        /*
         * 定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false
         */

        function isOu(num){

            return num % 2 == 0;
        }

    var result = isOu(15);

    console.log("result = "+result);



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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    /*
          * 定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果
          * 3.14*r*r
          */
    function mianji(r){

        return 3.14*r*r;

    }

    result = mianji(5);

    console.log("result = "+result);

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

<script type="text/javascript">
/*
             * 创建一个函数，可以在控制台中输出一个人的信息
             *     可以输出人的 name age gender address
             *
             * 实参可以是任意的数据类型，也可以是一个对象
             *     当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
             */
function sayHello(o){


    console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
}

var obj = {
    name:"孙悟空",
    age:18,
    address:"花果山",
    gender:"男"

};

sayHello(obj);


</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 创建一个函数，可以在控制台中输出一个人的信息
                 *     可以输出人的 name age gender address
                 *
                 * 实参可以是任意的数据类型，也可以是一个对象
                 *     当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
                 */
    function sayHello(name,age,gender,address){


        console.log("我是"+name+",今年我"+age+"岁了,"+"我是一个"+gender+"人"+",我住在"+address);
    }

    sayHello("猪八戒",28,"高老庄","男");



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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 创建一个函数，可以在控制台中输出一个人的信息
                 *     可以输出人的 name age gender address
                 *
                 * 实参可以是任意的数据类型，也可以是一个对象
                 *     当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
                 */
    function sayHello(o){

        //console.log("o = "+o);
        console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
    }


    //创建一个对象
    var obj = {
        name:"孙悟空",
        age:18,
        address:"花果山",
        gender:"男"

    };
    sayHello(obj);


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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
     * 定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false
     */

    function isOu(num){

        return num % 2 == 0;
    }

    var result = isOu(15);

    //console.log("result = "+result);


    /*
     * 定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果
     * 3.14*r*r
     */
    function mianji(r){

        return 3.14*r*r;

    }

    result = mianji(5);

    //console.log("result = "+result);


    /*
     * 创建一个函数，可以在控制台中输出一个人的信息
     *     可以输出人的 name age gender address
     *
     * 实参可以是任意的数据类型，也可以是一个对象
     *     当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
     */
    function sayHello(o){

        //console.log("o = "+o);
        console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
    }

    //sayHello("猪八戒",28,"高老庄","男");
    //创建一个对象
    var obj = {
        name:"孙悟空",
        age:18,
        address:"花果山",
        gender:"男"

    };

    //sayHello(obj);

    /*
     * 实参可以是一个对象，也可以是一个函数
     */

    function fun(a){
        console.log("a = "+a);

    }

    fun(sayHello);

    fun(function(){alert("hello")});

fun(mianji(10));

    /*
     * mianji()
     *     - 调用函数
     *     - 相当于使用的函数的返回值
     *
     * mianji
     *     - 函数对象
     *     - 相当于直接使用函数对象
     */

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

/*
 * mianji()
 *     - 调用函数
 *     - 相当于使用的函数的返回值
 *
 * mianji
 *     - 函数对象
 *     - 相当于直接使用函数对象
 */

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
             * 返回值可以是任意的数据类型
             *     也可以是一个对象，也可以是一个函数
             */
    function fun2(){

        //返回一个对象
        return {name:"沙和尚"};
    }

    var a = fun2();

    console.log("a = "+a);
    console.log("a = "+a.name);
    </script>
</head>
<body>
</body>
</html>

效果一样

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    function fun3(){
        //在函数内部再声明一个函数
        function fun4(){
            alert("我是fun4");
        }

        //将fun4函数对象作为返回值返回
        return fun4;
    }

    a = fun3();
    // console.log(a);
    a();
  
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    function fun3(){
        //在函数内部再声明一个函数
        function fun4(){
            alert("我是fun4");
        }

        //将fun4函数对象作为返回值返回
        return fun4;
    }

    a = fun3();
    // console.log(a);
    // a();
    fun3()();//和用a()一样
    </script>
</head>
<body>
</body>
</html>

`立即执行函数`

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //函数对象() /* * 立即执行函数 * 函数定义完，立即被调用，这种函数叫做立即执行函数 * 立即执行函数往往只会执行一次 */ /*(function(){ alert("我是一个匿名函数~~~"); })();*/ (function(a,b){ console.log("a = "+a); console.log("b = "+b); })(123,456); </script> </head> <body> </body> </html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         /*
          * 变量的声明提前
          *     - 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
          *        但是如果声明变量时不适用var关键字，则变量不会被声明提前
          * 
          * 函数的声明提前
          *     - 使用函数声明形式创建的函数 function 函数(){}
          *        它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数
          *        使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用 
          */
         /*console.log("a = "+a);
         
         var a = 123;*/
         
         //fun();
         
         
         //函数声明，会被提前创建
         function fun(){
            console.log("我是一个fun函数");
         }
         
         //函数表达式，不会被提前创建
         var fun2 = function(){
            console.log("我是fun2函数");
         };
         
         fun2();
         
         
         
      </script>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        var a = "我是fun函数中的变量a";
        var b = 20;

        console.log("a = " + a);
        console.log("a = " + window.a);
        console.log("b = "+b);
    }
    fun();

    console.log("b = "+b);

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

就近原则

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        // var a = "我是fun函数中的变量a";
        var b = 20;

        console.log("a = " + a);
        console.log("a = " + window.a);
        console.log("b = "+b);
    }
    fun();

    console.log("b = "+b);

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        // var a = "我是fun函数中的变量a";
        var b = 20;

        
    }
    fun();


    function fun3(){
        console.log(a);
        var a=35;


    }
    fun3();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        // var a = "我是fun函数中的变量a";
        var b = 20;


    }
    fun();

    /*
                 * 在函数作用域也有声明提前的特性，
                 *     使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
                 *     函数声明也会在函数中所有的代码执行之前执行
                 */
    function fun3(){
        fun4();
        console.log(a);
        var a=35;

        function fun4(){
            alert("I'm fun4");
        }

    }
    fun3();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        // var a = "我是fun函数中的变量a";
        var b = 20;


    }
    fun();

    /*
                 * 在函数作用域也有声明提前的特性，
                 *     使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
                 *     函数声明也会在函数中所有的代码执行之前执行
                 */
    function fun3(){
        fun4();
        console.log(a);
        var a=35;

        function fun4(){
            alert("I'm fun4");
        }

    }
   // fun3();

    var c = 33;

    /*
     * 在函数中，不适用var声明的变量都会成为全局变量
     */
    function fun5(){
        console.log("c = "+c);
        c = 10;

        //d没有使用var关键字，则会设置为全局变量
        d = 100;
    }

    fun5();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        // var a = "我是fun函数中的变量a";
        var b = 20;


    }
    fun();

    /*
                 * 在函数作用域也有声明提前的特性，
                 *     使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
                 *     函数声明也会在函数中所有的代码执行之前执行
                 */
    function fun3(){
        fun4();
        console.log(a);
        var a=35;

        function fun4(){
            alert("I'm fun4");
        }

    }
   // fun3();

    // var c = 33;

    /*
     * 在函数中，不适用var声明的变量都会成为全局变量
     */
    function fun5(){
        console.log("c = "+c);
        c = 10;

        //d没有使用var关键字，则会设置为全局变量
        d = 100;
    }

    fun5();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
                 * 函数作用域
                 *     - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                 *     - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
                 *     - 在函数作用域中可以访问到全局作用域的变量
                 *        在全局作用域中无法访问到函数作用域的变量
                 *     - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
                 *        如果没有则向上一级作用域中寻找，直到找到全局作用域，
                 *        如果全局作用域中依然没有找到，则会报错ReferenceError
                 *     - 在函数中要访问全局变量可以使用window对象
                 */

    //创建一个变量
    var a = 10;

    function fun() {

        // var a = "我是fun函数中的变量a";
        var b = 20;


    }
    fun();

    /*
                 * 在函数作用域也有声明提前的特性，
                 *     使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
                 *     函数声明也会在函数中所有的代码执行之前执行
                 */
    function fun3(){
        fun4();
        console.log(a);
        var a=35;

        function fun4(){
            alert("I'm fun4");
        }

    }
   // fun3();

    // var c = 33;

    /*
     * 在函数中，不适用var声明的变量都会成为全局变量
     */
    function fun5(){
        console.log("c = "+c);
        c = 10;

        //d没有使用var关键字，则会设置为全局变量
        d = 100;
    }

    // fun5();
    console.log("d = "+d);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    var e = 23;

    /*
     * 定义形参就相当于在函数作用域中声明了变量
     */
    function fun6(e){
        alert(e);
    }

    fun6();


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

debug调试

https://www.bilibili.com/video/BV1YW411T7GX?p=60/61/62/63/64（磨洗磨洗）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function createPerson(name , age ,gender){
        //创建一个新的对象
        var obj = new Object();
        //向对象中添加属性
        obj.name = name;
        obj.age = age;
        obj.gender = gender;
        obj.sayName = function(){
            alert(this.name);
        };
        //将新的对象返回
        return obj;
    }

    var obj2=createPerson();
    var obj4 = createPerson("猪八戒",28,"男");
    var obj3 = createPerson("白骨精",16,"女");
    console.log(obj2);
    console.log(obj3);
    console.log(obj4);
    </script>
</head>
<body>
</body>
</html>

使用工厂方法创建对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function createPerson(name , age ,gender){
        //创建一个新的对象
        var obj = new Object();
        //向对象中添加属性
        obj.name = name;
        obj.age = age;
        obj.gender = gender;
        obj.sayName = function(){
            alert(this.name);
        };
        //将新的对象返回
        return obj;
    }

    var obj2=createPerson();
    var obj4 = createPerson("猪八戒",28,"男");
    var obj3 = createPerson("白骨精",16,"女");
    console.log(obj2);
    console.log(obj3);
    console.log(obj4);


    /*
          * 用来创建狗的对象
          */
    function createDog(name , age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.sayHello = function(){
            alert("汪汪~~");
        };

        return obj;
    }


    /*
          * 使用工厂方法创建的对象，使用的构造函数都是Object
          *     所以创建的对象都是Object这个类型，
          *     就导致我们无法区分出多种不同类型的对象
          */
    //创建一个狗的对象
    var dog = createDog("旺财",3);

    console.log(dog);
    </script>
</head>
<body>
</body>
</html>

构造函数

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
      
         /*
          * 创建一个构造函数，专门用来创建Person对象的
          *     构造函数就是一个普通的函数，创建方式和普通函数没有区别,
          *     不同的是构造函数习惯上首字母大写
          * 
          * 构造函数和普通函数的区别就是调用方式的不同
          *     普通函数是直接调用，而构造函数需要使用new关键字来调用
          * 
          * 构造函数的执行流程：
          *     1.立刻创建一个新的对象
          *     2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
          *     3.逐行执行函数中的代码
          *     4.将新建的对象作为返回值返回
          * 
          * 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
          *     我们将通过一个构造函数创建的对象，称为是该类的实例
          * 
          * this的情况：
          *     1.当以函数的形式调用时，this是window
          *     2.当以方法的形式调用时，谁调用方法this就是谁
          *     3.当以构造函数的形式调用时，this就是新创建的那个对象
          * 
          */
         function Person(name , age , gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayName = function(){
               alert(this.name);
            };
         }
         
         function Dog(){
            
         }
         
         var per = new Person("孙悟空",18,"男");
         var per2 = new Person("玉兔精",16,"女");
         var per3 = new Person("奔波霸",38,"男");
         
         var dog = new Dog();
         
         /*console.log(per);
         console.log(dog);*/
         
         /*
          * 使用instanceof可以检查一个对象是否是一个类的实例
          *     语法：
          *        对象 instanceof 构造函数
          * 如果是，则返回true，否则返回false
          */
         //console.log(per instanceof Person);
         //console.log(dog instanceof Person);
         
         /*
          * 所有的对象都是Object的后代，
          *     所以任何对象和Object左instanceof检查时都会返回true
          */
         //console.log(dog instanceof Object);
         
         
      </script>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         /*
          * 创建一个Person构造函数
          *     - 在Person构造函数中，为每一个对象都添加了一个sayName方法，
          *        目前我们的方法是在构造函数内部创建的，
          *           也就是构造函数每执行一次就会创建一个新的sayName方法
          *        也是所有实例的sayName都是唯一的。
          *        这样就导致了构造函数执行一次就会创建一个新的方法，
          *           执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
          *           这是完全没有必要，完全可以使所有的对象共享同一个方法
          */
         function Person(name , age , gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            //向对象中添加一个方法
            //this.sayName = fun;
         }
         
         //将sayName方法在全局作用域中定义
         /*
          * 将函数定义在全局作用域，污染了全局作用域的命名空间
          *     而且定义在全局作用域中也很不安全
          */
         /*function fun(){
            alert("Hello大家好，我是:"+this.name);
         };*/
         //向原型中添加sayName方法
         Person.prototype.sayName = function(){
            alert("Hello大家好，我是:"+this.name);
         };
         
         //创建一个Person的实例
         var per = new Person("孙悟空",18,"男");
         var per2 = new Person("猪八戒",28,"男");
         per.sayName();
         per2.sayName();
         
         //console.log(per.sayName == per2.sayName);
         
         
      </script>
   </head>
   <body>
   </body>
</html>

原型对象

莫西莫西

数组

/*
 * 内建对象
 * 宿主对象
 * 自定义对象
 * 
 * 数组（Array）
 *     - 数组也是一个对象
 *     - 它和我们普通对象功能类似，也是用来存储一些值的
 *     - 不同的是普通对象是使用字符串作为属性名的，
 *        而数组时使用数字来作为索引操作元素
 *     - 索引：
 *        从0开始的整数就是索引
 *     - 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
 */

//创建数组对象

<script type="text/javascript">
var arr = new Array();
//使用typeof检查一个数组时，会返回object
console.log(typeof arr);
</script>

/*
 * 向数组中添加元素
 * 语法：数组[索引] = 值
 */
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;

/*
 * 读取数组中的元素
 * 语法：数组[索引]
 *     如果读取不存在的索引，他不会报错而是返回undefined
 */

var arr = new Array();
//使用typeof检查一个数组时，会返回object
console.log(typeof arr);

arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;
console.log(arr.length);
console.log(arr);

var arr = new Array(); //使用typeof检查一个数组时，会返回object
 console.log(typeof arr); arr[0] = 10; arr[1] = 33; arr[2] = 22; arr[3] = 44;
* 修改length
 *     如果修改的length大于原长度，则多出部分会空出来
 *  如果修改的length小于原长度，则多出的元素会被删除
 */
//arr.length = 10;

/*arr.length = 2;

console.log(arr.length);
console.log(arr);*/

arr[4] = 50;
arr[5] = 60;

//向数组的最后一个位置添加元素
//语法：数组[数组.length] = 值;
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;

console.log(arr);

数组字面量

<script type="text/javascript">
   
   //创建一个数组
   //var arr = new Array();
   
   //使用字面量来创建数组
   //语法:[]
   //var arr = [];
   
   //console.log(typeof arr);
   
   //使用字面量创建数组时，可以在创建时就指定数组中的元素
   var arr = [1,2,3,4,5,10];
   
   //console.log(arr[3]);
   
   //使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
   //元素之间使用,隔开
   var arr2 = new Array(10,20,30);
   //console.log(arr2);
   
   //创建一个数组数组中只有一个元素10
   arr = [10];
   
   //创建一个长度为10的数组
   arr2 = new Array(10);
   
   //console.log(arr2.length);
   //数组中的元素可以是任意的数据类型
   arr = ["hello",1,true,null,undefined];
   
   //也可以是对象
   var obj = {name:"孙悟空"};
   arr[arr.length] = obj;
   arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];

//也可以是一个函数
arr = [function(){alert(1)},function(){alert(2)}];

//console.log(arr);
//arr[0]();

//数组中也可以放数组，如下这种数组我们称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);

    <script type="text/javascript">


    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    /* push()
    *  - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
    *  - 可以将要添加的元素作为方法的参数传递，
    *     这样这些元素将会自动添加到数组的末尾
    *  - 该方法会将数组新的长度作为返回值返回
*/
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    console.log(arr);
    console.log("result = "+result);
</script>

push

数组pop()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">


    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    /* push()
    *  - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
    *  - 可以将要添加的元素作为方法的参数传递，
    *     这样这些元素将会自动添加到数组的末尾
    *  - 该方法会将数组新的长度作为返回值返回
*/
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    /*
         * pop()
         *     - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
         */
    result = arr.pop();
    console.log(arr);
    console.log("result = "+result);
</script>
</head>
<body>

</body>
</html>

unshift()

    <script type="text/javascript">


    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    /* push()
    *  - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
    *  - 可以将要添加的元素作为方法的参数传递，
    *     这样这些元素将会自动添加到数组的末尾
    *  - 该方法会将数组新的长度作为返回值返回
*/
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    /*
              * unshift()
              *    - 向数组开头添加一个或多个元素，并返回新的数组长度
              *    - 向前边插入元素以后，其他的元素索引会依次调整
              */
    //console.log(arr);

    arr.unshift("牛魔王","二郎神");

    console.log(arr);
    console.log(arr);
    console.log("result = "+result);
</script>

shift（）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">


    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    /* push()
    *  - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
    *  - 可以将要添加的元素作为方法的参数传递，
    *     这样这些元素将会自动添加到数组的末尾
    *  - 该方法会将数组新的长度作为返回值返回
*/
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    /*
              * unshift()
              *    - 向数组开头添加一个或多个元素，并返回新的数组长度
              *    - 向前边插入元素以后，其他的元素索引会依次调整
              */
    //console.log(arr);

    arr.unshift("牛魔王","二郎神");

    console.log(arr);
    console.log(arr);
    console.log("result = "+result);
    /*
          * shift()
          *     - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
          */
    result = arr.shift();
    result = arr.shift();

    console.log(arr);
    console.log("result = "+result);
</script>
</head>
<body>

</body>
</html>

数组的遍历

 <script type="text/javascript">
    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

    //所谓的遍历数组，就是将数组中所有的元素都取出来
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
</script>

<script type="text/javascript">
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

//所谓的遍历数组，就是将数组中所有的元素都取出来
for(var i=0 ; i<arr.length ; i++){
    console.log(arr[i]);
}

</script>

数组练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    function Person(name , age , gender){
        this.name = name;
        this.age = age;
    }

    //修改Person原型的toString
    Person.prototype.toString = function(){
        return "Person[name="+this.name+",age="+this.age+"]";
    };

    //创建一个Person对象
    var per = new Person("孙悟空",18);
    var per2 = new Person("猪八戒",28);
    var per3 = new Person("红孩儿",8);
    var per4 = new Person("蜘蛛精",16);
    var per5 = new Person("二郎神",38);

    /*
     * 将这些person对象放入到一个数组中
     */
    var perArr = [per,per2,per3,per4,per5];

    /*
     * 创建一个函数，可以将perArr中的满18岁的Person提取出来，
     *     然后封装到一个新的数组中并返回
     * arr
     *     形参，要提取信息的数组
     */
    function getAdult(arr){
        //创建一个新的数组
        var newArr = [];

        //遍历arr，获取arr中Person对象
        for(var i=0 ; i<arr.length ; i++){
            var p = arr[i];
            //判断Person对象的age是否大于等于18
            if(p.age >= 18){
                //如果大于等于18，则将这个对象添加到newArr中
                //将对象放入到新数组中
                newArr.push(p);
            }
        }
        //将新的数组返回
        return newArr;

    }

    var result = getAdult(perArr);

    console.log(result);


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

foreach()

<script type="text/javascript">

/*
 * 一般我们都是使用for循环去遍历数组，
 *     JS中还为我们提供了一个方法，用来遍历数组
 * forEach()
 *        - 这个方法只支持IE8以上的浏览器
 *           IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
 *           还是使用for循环来遍历
 */

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

/*
 * forEach()方法需要一个函数作为参数
 *     - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
 *     - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
 *        
 *
 */
arr.forEach(function(){
    console.log("hello");
});


</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

    /*
     * 一般我们都是使用for循环去遍历数组，
     *     JS中还为我们提供了一个方法，用来遍历数组
     * forEach()
     *        - 这个方法只支持IE8以上的浏览器
     *           IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
     *           还是使用for循环来遍历
     */

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

    /*
     * forEach()方法需要一个函数作为参数
     *     - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
     *     - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
     *
     *
     */
    arr.forEach(function(a){
        console.log("a="+a);
    });


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

<script type="text/javascript">

/*
 * 一般我们都是使用for循环去遍历数组，
 *     JS中还为我们提供了一个方法，用来遍历数组
 * forEach()
 *        - 这个方法只支持IE8以上的浏览器
 *           IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
 *           还是使用for循环来遍历
 */

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

/*
 * forEach()方法需要一个函数作为参数
 *     - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
 *     - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
 *
 *
 */
arr.forEach(function(a,b,c,d){
 console.log("a="+a);
 console.log("a="+b);
 console.log("a="+c);
    console.log("d="+d);
});


</script>

第一个参数，就是当前正在遍历的元素
*     第二个参数，就是当前正在遍历的元素的索引
*     第三个参数，就是正在遍历的数组

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 一般我们都是使用for循环去遍历数组，
          *     JS中还为我们提供了一个方法，用来遍历数组
          * forEach()
          *        - 这个方法只支持IE8以上的浏览器
          *           IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
          *           还是使用for循环来遍历
          */
         
         //创建一个数组
         var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
         
         /*
          * forEach()方法需要一个函数作为参数
          *     - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
          *     - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
          *        以实参的形式传递进来，我们可以来定义形参，来读取这些内容
          *     - 浏览器会在回调函数中传递三个参数：
          *        第一个参数，就是当前正在遍历的元素
          *        第二个参数，就是当前正在遍历的元素的索引
          *        第三个参数，就是正在遍历的数组
          *        
          */
         arr.forEach(function(value , index , obj){
            console.log(value);
         });
         
         
      </script>
   </head>
   <body>
   </body>
</html>

moxi摩西

json（140）

//服务器 ---》      json只有js自己认识------》网页

<script>
//创建一个对象
var obj={"name":"hello","age":18,"gender":"man"};
console.log(obj.name);
console.log(obj.age);
//服务器 ---》      json只有js自己认识------》网页
</script>

<script>
var obj='{"name":"hello","age":18,"gender":"man"}';
console.log(typeof  obj);//字符串，json，谁都读得懂，特殊格式的字符串
//服务器 ---》      json只有js自己认识------》网页
</script>

json数据交互

json字符串中的属性名必须加双引号，其他和js一样

json分类：1，对象{}，2数组【】

var arr='[1,2,3,"hello",true]';

json中允许的值：

1、字符串 2、数值 3、布尔值

4、null 5、对象

将json转js

js有个工具类叫json

json转js

<script>


var json='{"name":"hello","age":18,"gender":"man"}';
//json.parse()
var o=JSON.parse(json);
console.log(o.gender);
</script>

eval()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
<script type="text/javascript">
//这个函数可以用来执行一段字符串形式的js代码，并将执行结果返回
var str2="alert('hello');";
eval(str2);
</script>

</head>
<body>






</body>

</html>

eval()执行的字符串中含有{}，它会将{}当成为代码

如果不希望将其当成代码解析，则需要字符串前后各加一个（）

开发尽量不要使用eval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
<script type="text/javascript">
//这个函数可以用来执行一段字符串形式的js代码，并将执行结果返回
var str2='({"name":"hello","age":18,"gender":"man"})';
var obj=eval("("+str2+")");
console.log(obj);
</script>

</head>
<body>






</body>

</html>

外部引入json即可

<script type="text/javascript" src="js/json2.js></scipt>

（请关注暑期特训1.1强化训练）

m0_60793076

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js1（持续更53/140）

警告框弹出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击 DIV 换色</title></head><body><s.
复制链接

扫一扫