html-7（JavaScript-1）

放在函数里面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>dem</title>

<style type="text/css">

 h1 {

  color: red;

 }

</style>

</head>

<body>

<p id="dem">改变内容</p>

<button type="button" onclick="dd()">点击</button>

<script type="text/javascript">

function dd(){

document.getElementById('dem').innerHTML='<h1>Hello Javascript</h1>';

}

</script>

</body>

</html>

（一）输入输出

语句	功能
window.alert();	弹出警告框
document.write();	写入HTML，重置文档
innerHTML();	写入HTML，不会重置文档
console.log();	写入控制台

1.alert（）；

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <button type="button" onclick="alert('hello word!');">点击</button>

</body>

</html>

2.innerHTML
在被选中元素的内部添加新的HTML代码；不会使页面重置

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>dem</title>

<style type="text/css">

h1 {

 color: red;

}

</style>

</head>

<body>

<p id="dem">改变内容</p>

<button type="button" onclick='document.getElementById("dem").innerHTML="<h1>Hello Javascript</h1>"'>点击</button>

</body>

</html>

3.document.write();

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <p>Frist</p>

 <button type="button" onclick='document.write(5+6);'>点击</button>

</body>

</html>

4.console.log();

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <p>Frist</p>

 <button type="button" onclick='console.log("sssaa")'>点击</button>

</body>

</html>

常用输入
1.prompt对话框

prompt（text，defaultText）；

text:可选，在对话框中显示的纯文本
default：可选，默认的输入文本

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <button type="button" onclick="f_prompt()">点击</button>

 <script type="text/javascript">

  function f_prompt(){

   var name=prompt("请输入姓名！","admin");

   if(name!=null&&name!=""){

    document.write("你好！"+name+"!");

   }

   else{

    alert("Wrong!");

   }

  }

 </script>

</body>

</html>

（二）变量，常量，字面量

常量：const q=10；不可改
变量：可以使用var关键字声明变量，变量的值可以是任意类型

var name="sss";

let与var类似，但是只是声明的变量只在其所在代码块内有效

let name="sss";

变量提升：
浏览器会先解析代码
例子：

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  console.log(content);

 </script>

</body>

</html>

以上代码会报错： content is not defined

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  console.log(content);

  var content="sss";

 </script>

</body>

</html>

以上代码不会报错：undefined（为content的值）
因为浏览器将 var content=“sss”;拆分为var content；content=“sss”;然后将var content；提到代码最前面
所以上面代码实际为：

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var content;

  console.log(content);

  content="sss";

 </script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var content;

  console.log(content);

  content="sss";

  console.log(content);

 </script>

</body>

</html>

1.例题：

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <button onclick="foo();">点解</button>

 <script type="text/javascript">

  function foo(){

   if(false){

    //var content="sss";

   }

   console.log(content);

  }

 </script>

</body>

</html>

var content=“sss”;
注释掉前：undfined
注释掉后：报错
2.例子

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  console.log(vl);

  var vl=100;

  function foo(){

   console.log(vl);

      var vl=200;

   console.log(vl);

  }

  foo();

 </script>

</body>

</html>

结果为：
undfined
undfined
200

全局污染

1.不写关键字

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>dem</title>

</head>

<body>

<script type="text/javascript">

 function foo(){

      vl=200;

 }

 foo();

 console.log(vl);

 var v1=100;

 console.log(vl);

</script>

</body>

</html>

输出的都是200

(三）基本数据类型

number
string
boolean
symbol

number

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var v1=100;

  var v2=100.2;

  console.log(typeof v1);

  console.log(typeof v2);

 </script>

</body>

</html>

NaN

代表非数字的值，两个等于号只能比较值，不能比较类型；三个等于号可以比较类型

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var v1=100;

  var v2="100";

  console.log(v1==v2);

  console.log(v1===v2);

 </script>

</body>

</html>

Number()函数将字符串转化为数字

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var v1=100;

  var v2="100";

  console.log(typeof Number(v2));

  console.log(Number("sss"));//NaN

  console.log(typeof Number("sss"));

 </script>

</body>

</html>

NaN与所有值都不相等，包括他自己

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  console.log(NaN==NaN);

  console.log(NaN===NaN);

 </script>

</body>

</html>

isNaN()判断是否为数字

isNaN(NaN);//true

isNaN(123);//false

isNaN()会隐式的将他们的参数换成数字，所以即便参数是个字符串，他会返回true（因为先调用Number()函数转换，然后对结果调用isNaN（）调用

string

单引号和双引号都是string类型

undefined

已声明、未赋值的值，没有值的值，连数据类型都没有
1.

var test;

console.log(test);//undefined

function() f(x){

return x;

}

console.log(f());//undefined

function() f(x){

alert(x);//弹框

}

console.log(f(1));//undefined

null

空值

null与undefined

console.log(undefined==null);//true

console.log(undefined===null);//false

console.log(Number(null));//0

console.log(Number(undefined));//NaN

console.log(5+null);//5

console.log(5+undefined);//NaN

symbol

给变量创建一个全局唯一的值。属于基本数据类型

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var a=Symbol("qq");

  var b=Symbol("qq");

  console.log(a==b);

  console.log(a===b);

  console.log(a.description);

 </script>

</body>

</html>

description并不是Symbol的值，仅仅对值的描述，就像注释一样

for声明的是全局变量

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>dem</title>

</head>

<body>

 <script type="text/javascript">

  var a=Symbol.for("qq");

  var b=Symbol.for("qq");

  console.log(a==b);

  console.log(a===b);

  console.log(a.description);

 </script>

</body>

</html>

特征

值不可变
存放在栈中