0
点赞
收藏
分享

微信扫一扫

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>

特征

值不可变
存放在栈中


举报

相关推荐

0 条评论