变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--js代码不能直接写,需要用script标签来包裹
js是一种弱类型的脚本语言,即语法没有严格的要求和限制,任何类型的变量都是用var来声明,
不同类型的变量可以用一个var来声明。
-->
<script>
//声明变量
var age;
var name;
//赋值
age=18;
name="张三";
//声明和赋值一起
var city="武汉",address="江夏区";
console.log("变量age的类型:"+typeof(age));
console.log("变量name的类型:"+typeof(name));
</script>
</body>
</html>
引用外部js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 引用外部js文件
注意:如果script标签引用了外部js,那么就不要在script标签里面书写js脚本,因为里面的js脚本是不会执行的
-->
<script src="../js/index.js">
//不要在引用外部js文件的script标签里面写js脚本
// console.log("我能输出在控制台吗?");
</script>
</body>
</html>
基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/* js的基本数据类型
* 1.number:包含整型,浮点型,NaN,Infinity
* 2. boolean:包含true,false两个值
* 3.undefined:表示已声明但未赋值的变量的类型
* 4.string: 表示''或者""包裹的字符的集合
* 5.null:空值,如果一个变量值为null,它是空对象,null值本身的类型又是object
* */
var age=18;
var score=65.5;
console.log("age的类型:"+typeof(age)); //number
console.log("score的类型:"+typeof score);//number
var s=Number("a111"); //Number():将参数转换为数字,如果参数包含了不能转换为数字的字符,则转换失败
//,结果就是非数字(not a number)
console.log(s); //NaN
var s2=Number("111");
console.log(s2); //111
//isNaN():判断参数是不是NaN,如果是就返回true,否则返回false
var b=isNaN(s);
console.log(b);//false
var c=-10/0;
console.log(c+",type:"+typeof c); //Infinity:正无穷大,-Infinity:负无穷大
var f=true;
console.log(typeof f);//boolean
f=!f;
console.log(f+",type:"+typeof f);
var a;
console.log(a+"..."+typeof a); //类型:undefined,值:undefined
var str="hello";
var city='wuhan';
str=str+city;
console.log(str+".."+typeof str);//类型:string
var obj=null;
console.log(typeof obj);//object
</script>
</body>
</html>
基本类型转换
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*1.强制类型转换
* 3个转换函数
* 1)Number():把参数转换为数字,如果参数的某一部分不是数字,就转换失败,返回NaN
* 2)Boolean(value):把参数转换为boolean类型,
* * 当value其值为 0、-0、null、""、false、undefined 或 NaN 时,
* 那么Boolean()转换成Boolean类型的值为 false。
* 3)String(value):把参数转换为字符串
*2.隐式类型转换
* 当两种不同数据类型的变量进行+连接的时候,浏览器的js引擎如何解释它?
* 浏览器的js引擎会隐式的调用强制转换函数,将其中的一个值转换为另一个值的类型
* 如果是String类型连接另一个类型,那么默认String类型优先,即另一个类会转换为String类型
*
* 3.转换函数
* parseInt():将参数转换为一个整数,只转换参数中的数字部分,非数字部分忽略,如果参数都不是数字那么返回NaN
* parseFloat():将参数转换为一个浮点数,只转换参数中的数字部分
*
* */
var a = Number("111");
console.log(a);
a = Number("111sxt");
console.log(a);
var b = Boolean(null);
console.log(b); //false
b = Boolean("null");
console.log(b); //true
b = Boolean("undefined");
console.log(b); //true
var c; //值undefined
var d = String(c);
console.log(d + "..." + typeof d); //d:'undefined',类型:string
var h = "hello" + 2019; //此时相当于"hello"+String(2019)
console.log(h);
d = "22" + true;
console.log(d);
var obj; //obj:undefined
if(obj) { //此处会调用Boolean(obj),结果是false
console.log('obj是一个对象,已赋值');
} else {
console.log('obj不是一个对象,未赋值');
}
var e = 11;
var f = 22;
console.log("e + f"); // 输出:e+f 数据类型:string
console.log(e + "f"); // 输出:11f 数据类型:string
console.log(e + f); // 输出:33数据类型:number
var m="111sxt";
m=parseInt(m);
console.log(m+"...type:"+typeof m);//111
m=parseInt("sxt222");
console.log(m+"...type:"+typeof m);//NaN
m="111.22sxt";
m=parseFloat(m);
console.log(m+"...type:"+typeof m);//111.22
</script>
</body>
弹出框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/* 弹出框
* 1.alert():普通的弹出框,纯提示作用
* 2.prompt():弹出一个带有输入框的弹出框,可以让用户输入信息
* 参数1:对话框上的提示文本 参数2:输入框里的默认value
* 返回值是用户输入的值
* 3.cofirm():弹出一个带有确定和取消按钮的弹出框,用于提示用户是否要进行某个操作
* 返回值是true或false,如果用户点击了确定按钮,就返回true,否则返回false
* */
alert('hello world!');
var age=prompt('请输入您的年龄',20);
console.log('您输入的年龄:'+age);
//confirm()在我们后面的web项目开发中用来提示用户是否要删除数据
var flag= confirm('是否真的要删除该数据');
if(flag){
console.log("您点击了确定按钮");
}else{
console.log("您点击了取消按钮");
}
</script>
</body>
</html>
循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 输出1-20之间的偶数的和,输出在网页上
var sum=0;
for(var i=1;i<=20;i++ ){
if(i%2==0){
sum+=i;
}
}
document.write("1到20的偶数和:"+sum);
</script>
</body>
</html>
运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- ===:全等于,比较的两个操作数的数据类型和值都相同时,才返回true,否则返回false
==:等于,只 比较内容(值),不比较类型,只要内容相同,就返回true
||:或,如果两个操作数都是boolean,, 如果第一个参数为true,则直接返回第一个数.
如果第一个参数为false,则直接返回第2个数;
如果两个操作数都不是boolean,此时js引擎会将第1个参数隐式转换为boolean类型返回true或false,
如果第1个数转换后结果是true,就直接返回第1个数;如果第1个数转换后是false,就返回第2个数
-->
<script>
var a=12;
var b="12";
console.log(a===b);//false
console.log(a==b);//true
a=true,b=false;
var c=a||b;
console.log(c);
a="111",b="222";
c=a||b;
console.log(c); //111
a=undefined;
c=a||b;//调用Boolean(a)得到false, false||b
console.log(c); //222
//三目运算符: 表达式?e1:e2,如果表达式成立,就执行e1,否则执行e2
//任意2个数,返回其中较大的那个数
var m=9,n=12;
var max= m>n?m:n;
console.log("较大的数:"+max);
</script>
</body>
</html>