JS的三种书写方式:行内 内嵌 和 外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式js -->
<script>
// alert('沙漠骆驼')
</script>
<!-- 外部JS写法 -->
<script src="my.js"></script>
</head>
<body>
<!-- 行内式js 直接写到元素内部 -->
<!-- <input type="button" value="唐伯虎" onclick="alert('秋想借')"> -->
</body>
</html>
行内:
<input type="button" value="唐伯虎" οnclick="alert('秋想借')">
内嵌:
<script>
// alert('沙漠骆驼')
</script>
外部:(外部文件)
<script src="my.js">这里不能写代码切记</script>
单行注释:
//1.单行注释
多行注释 :
/* 多行注释 */ 默认快捷键shift+alt+a
JavaScript输入输出语句
// 这是一个输入框 数据送给后台
prompt('请输入您的年龄');
// alert 输出的 弹出警示框 展示给用户
alert('计算的结果是');
//console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');
变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1声明一个age变量
var age;
// 2赋值
age = 18;
//3输出结果
console.log(age);
//4变量的初始化
var myname = '林文静'
console.log(myname);
</script>
</head>
<body>
</body>
</html>
变量的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//用户输入姓名 存储在myname变量里
var myname = prompt('请输入您的名字');
//输出这个用户名
alert('欢迎'+myname);
</script>
</head>
<body>
</body>
</html>
声明多个变量
var age = 18;
var address = '火星车';
var gz = 2000;
等于
var age = 18;
addredd = '火影村';
gz = 2000;
声明的变量的特殊情况
1 ,声明但不赋值 结果为undefined
var sex;
console.log(sex);
2,不声明 不赋值 直接使用某个变量会报错
console.log(tel);
3,不声明直接赋值 可以运行单不推荐
qq = 100;
console.log(qq);
变量的命名规范:
1,区分大小写
var app = 10;
var App = 100;
console.log(app);
console.log(App);
2,不能以数字开头
var 18age = 10;
3,var有特殊意义 不能作为变量名
var var = 10;
4尽量不用name作为变量名
,
交换两个变量值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// js是编程语言有很强的逻辑性在里边 先怎么办在怎么办
//1 我们需要一个临时变量
//2 把apple1 给临时变量
//3 把apple2给apple1
//4 把临时变量给apple2
var temp;//临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
</script>
</head>
<body>
</body>
</html>
数据类型(简单数据类型,复杂数据类型)
isNaN:判断非数字并且返回一个值
<script>
//isNaN()这个方法判断非数字 并且返回一个值 如果数字返回的是false 是数字返回true
console.log(isNaN(12)); //false
console.log(isNaN('林文静')); //true
</script>
String字符串类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 'pink' '12' 'true'哪怕是数字 只要带引号都是字符串类型
// var str = '我是一个高富帅的程序员';
var str = "我是一个'高富帅'的程序员";/* 外双内单 外单内双都可以 */
console.log(str);
//字符串转义字符 都是以\开头 要写到引号里
var str1 = '我是一个"高富帅\n"的程序员';
console.log(str1);
</script>
</head>
<body>
</body>
</html>
\n换行
字符串的拼接
1.检测获取字符串的长度
var str = 'my name is body';
console.log(str.length);//15个
2.字符串的拼接 +
console.log('沙漠'+'骆驼'); //沙漠骆驼
console.log('pink老师'+18); //pink老师18
console.log('pink'+true); //pinktrue
console.log(12+12); //24
console.log('12'+12); //1212
console.log('12+12'); //12+12
显示年龄案例
<script>
//1 弹出输入框(prompt) 让用户输入年龄
var age = prompt('请输入您的年龄');
//2 把输入的值保存起来 与字符串拼接
var str = '您今年已经'+age+'岁了'
//3 alert 弹出结果
alert(str);
</script>
布尔型Boolean
<script>
var flag = true;
var flag1 = false;
console.log(flag+1); //2 true为1 false为0
console.log(flag1+1); //1
</script>
undefined未定义数据类型
<script>
//如果一个变量声明未赋值就是undefined
var str;
console.log(str); //undefined
var varible = undefined;//未定义值
console.log(varible+'pink');//undefinedpink
console.log(varible+1); //NaN undefined和数字相加结果是NaN
//null 空的
var space = null;
console.log(space+'pink');//nullpink
console.log(space+1);//1
</script>
typeof检测数据类型
var num = 10;
console.log(typeof num);//number
var str = 'pink';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var var1;
console.log(typeof var1);//undefined
var timer = null;
console.log(typeof timer);//object
//prompt 取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);//string类型的
*****prompt 取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);//string类型的
字面量:
字面量就是在源代码中一个固定值的表示方法,通俗来说,就是字面量表示如何表示这个值。
数字字面量:8,9,10
字符串字面量:'黑马程序员','大前端'
布尔字面量:true,false
数据类型的转换:
数字型转换为字符串型:
1. 变量.toString();
var num = 10; var str = num.toString(); console.log(str); console.log(typeof str);//字符串String
2 利用String();
console.log(String(num)); console.log(typeof String(num));
3 **利用+拼接字符串的方法实现转换效果 (隐式转换)
数字加上字符串结果是字符串
var num = 10; console.log(num+'');
转换为数字类型:
1 . parseInt(变量) 把字符型转化为数字型 得到的为整数取整无小数部分
var age = prompt('输入您的年龄'); console.log(parseInt(age));//变为数字型了 console.log(parseInt('3.14'));//3 console.log(parseInt('3.99'));//3 console.log(parseInt('140px'));//140 会去掉单位 console.log(parseInt('rem120px'));//NaN 第一个就是字母识别不了
2 . parseFLoat(变量) 字符转数字型 得到的带小数
console.log(parseFloat('3.14')); console.log(parseFloat('140px'));//140 会去掉单位 console.log(parseFloat('rem120px'));//NaN 第一个就是字母识别不了
3. 利用Number(变量)
var str = '123'; console.log(Number(str)); console.log(Number('12'));
4. 利用算数运算符 * - / 隐式转换
console.log('12'-0);//12 console.log('123'-120);//3 console.log('123'+'120');//123120 console.log('123'*1);//123
- * / 运算时自动把字符串类型转换为数字类型进行运算,加号不能进行转换
计算年龄案例:
<script>
var year =prompt('请输入您的出生年');
var age = 2021-year;//year为字符串类型 用减法 隐形转换
alert('您的年龄是'+age+'岁');
</script>
简单加法计算器的案例:
prompt 输出的为字符串类型 需要转换成数字类型
<script>
var num1 = prompt('请输入第一个数字');
var num2 = prompt('请输入第二个数字');
var sum = parseFloat(num1) + parseFloat(num2);
alert('总和为' + sum);
</script>
转换为布尔类型:
代表空 否定的值被转换为flase 如:'' 0 NaN null undefined