<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01简介</title>
</head>
<body>
<!--
HTML:负责页面标签结构
CSS:负责页面的样式
JS:负责页面的交互
JavaScript由三部分组成
1.ECMAScript(核心部分)
2.DOM
3.BOM
-->
</body>
<script type="text/javascript">
//单行注释
/*
* 多行注释
*/
//JS的几种输出方式
/*
* 1.弹窗(警示框/提示框)
*/
alert("笑死我了");
//2.输出到控制台
console.log("是是是");
//带有输入框的弹框
prompt("随便写点文字就可以了");
/*
* 4.往HTML文档中写入内容
* 注意:是写在文档的最后面
*/
document.write("哈哈哈哈")
</script>
</html>
//一.常量:程序运行期间,值不能被改变的量
//具体的数字,字符串,数据等,都是常量.eg:3,9,.....
//二.变量:程序运行期间,值可以被改变的量(变量相当于一个容器)
//变量的定义:var 变量名 = 初始值
var num=88
/*
* 变量名的命名规则:
* 1.由数字,字母,下划线,$组成,但是不能以数字开头
* 2.不能与其他变量名重名
* 3.不能与系统关键字重名
* 4.见名如意
* 4.使用驼峰命名法(或k+驼峰命名法)
*/
/*
* 三.基本数据类型
*/
//1.number 数值类型
var age=18;
var pai=3.1415926535;
//typeof():用来识别变量的类型
console.log(typeof(age));
console.log(typeof(pai));
//2.string:字符串类型,单引号或者双引号括起来的内容都是字符串,注意:不要单引号套单引号,双引号套双引号
var nameStr ="张飞";
var nameStr ="关羽";
console.log(typeof(nameStr));
/*
* +号两端如果出现字符串的话,将会进行字符串的拼接操作
* 如果+号两端都是Number类型的数值,将执行加法运算
*/
console.log(nameStr+age);//字符串拼接
console.log(pai+age);//加法运算
/*
* 3.布尔类型 BOOL:只有两个值,true(真)false(假)
*/
var isBoy = true;
var isGirl = false;
/*
* 4.空类型 null
* 注意:使用typeof输出的是object
*/
var a = null;
console.log(typeof(a));
/*
* 5.未定义类型 undefined
*/
var bingbing;
console.log(bingbing);
/*
* 四.类型转换
*/
//1.
var numA=18;
numA=numA+"";
console.log(typeof(numA))
//2.String转Number
var strA="88";
strA=strA-0;
console.log(typeof(strA));
/*
* 五.转义字符:计算机会对转义字符做特殊处理
* \" 代表"
* \' 代表'
* \\ 代表\
* \n 代表换行
*
*
*/
/*
* 运算符
*/
//算数运算符:+,-,*,/,%,++,--
var num1 = 4,num2 = 9,result = 0;
//+
result = num1 + num2;
console.log(result);
//-
result = num1 - num2;
console.log(result);
//*
result = num1 * num2;
console.log(result);
// /
result = num1 / num2;
console.log(result);
// 取余数 %
result = num1 % num2;
console.log(result);
//自增
console.log(++num1);//前++:先自增1,再输出
console.log(num2++);//后++:先输出,再自增1
console.log(num2);
//自减 原理同自增
//2.赋值运算符:=,+=,-=,*=,/=,%=
//(1) = 作用:将=右侧的值赋给=左侧的变量
//(2) += 的意义:
var a = 3 , b = 5;
a += b;//等价于a = a + b;
b += a;//等价于b = b + a;
//3.关系运算符:>,<,>=,<=,==,!=,===,!==
var m = 3, n = "3", isTrue = true;
/*
* ===与==的区别:===不但要判断数值,还要判断类型,而==只判断值,不关心类型
* !==与!=的区别:!==不但要判断数值,还要判断类型,而!=只判断值,不关心类型
*/
isTrue = m !==n;
console.log(isTrue);
//4.逻辑运算符:&&(逻辑与),||(逻辑或),!(逻辑非)
/*
* 逻辑运算符连接起来的式子叫做逻辑表达式,逻辑表达式的结果只有两种情况: 真 或 假
*/
//逻辑与(&&)的运算原理:逻辑与符号 && 两端的表达式同时为真,整个逻辑与表达式的结果为真.(同真为真)
//逻辑或(||)的运算原理:逻辑或符号 || 两端的表达式同时为假,整个逻辑与表达式的结果为假.(同假为假)
var m = 4, n = 9, x = 3, y = 5, rel = false;
//逻辑与的短路现象:逻辑与符号 && 左端的表达式结果如果为假,根据逻辑与的运算原理(同真为真)已经能够判定
//整个逻辑与表达式的结果为假,计算机根据效率最大化原色将不再执行 && 右侧的表达式
rel = m > n && (x = 99)
console.log(x);//输出结果为3
//逻辑或的短路现象:逻辑或符号 || 左端的表达式结果如果为真,根据逻辑或的运算原理(同真为真)已经能够判定
//整个逻辑或表达式的结果为真,计算机根据效率最大化原色将不再执行 || 右侧的表达式
rel = m < n || (x = 99)
console.log(x);//输出结果为3