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

孟大大大

原创文章 18 获赞 5 访问量 937

关注私信