JavaScript基础语法 demo1

JavaScript基础语法

这篇主要讲了JavaScript的基础知识和变量和数据类型
这是初学者写下的笔记，如有错误，欢迎前来指正！

• JavaScript不再是标记语言啦，是一个编程语言！

JavaScript Hello World

• 代码示例：

<script>
  alert('Hello World');
script>

初识JavaScript

创始人Brendan Eich
和Java完全没有关系 (和Java同属于sun公司)

• JavaScript是脚本语言

• 最初是判断密码强度的

• JavaScript组成

  • ECMAScript：JavaScript语法
  • DOM：文档对象模型
  • BOM：浏览器对象模型

JavaScript书写位置

• 行内式js：在标签内加入属性

• 内嵌式的js：在script标签里写js代码

• 外部js：新建一个js文件，然后用引入

  • 在两个标签之间不允许写代码

• 小知识：在js中推荐使用单引号

JavaScript注释

• 代码示例：

// 单行注释

/* 多行
   注释 */

• 单行注释快捷键 Ctrl + /
• 多行注释快捷键 Shift + alt + a

JavaScript输入输出语句

参数值	说明
alert(‘msg’)	浏览器弹出警示框
console.log(‘msg’)	浏览器控制台打印输出消息
prompt(‘info’)	浏览器弹出输入框，用户可以输入

• 代码示例：

<script>
  //输入框
  prompt('请输入');
  //警示框
  alert('输出为');
  //控制台输出
  console.log('程序猿才能看到');
script>

• console.log 在F12里的Console可以看到

JavaScript变量

• 变量：存储数据的容器

变量的使用

• 声明变量和赋值：

//声明一个age变量
var age;
age = 18;
//或者
var name = '菜鸟小铭';
//声明多个变量
var name = '菜鸟小铭' , age = '18';

• var关键字 (variable 变量) ，用来声明变量
• 声明多个变量时用逗号隔开
• 未赋值的变量默认值是undefined
  • 未赋值直接使用会报错" xx is not defined "
• 变量不声明可以直接使用 (前提条件必须要赋值) 不推荐

变量实例

• 让用户输入并且在页面上输出

var myname;
myname=prompt('请输入名字');
alert('欢迎您'+name);
// 可以使用 + 作为字符串连接

JavaScript变量命名规范

• 字母数字 _ 和 $ 符号 (和Java命名一样)

• 大小写敏感

• 小驼峰式命名

• 不要用name做变量名 (因为name在浏览器里面有含义)

  • name在浏览器中本身就已经被定义了

JavaScript数据类型

• JavaScript是弱类型语言，类型在运行时会被自动确定
• 变量的数据类型可以变化 (例如声明一个变量等于1，后面可以将一个字符串付给这个变量)

简单数据类型

数据类型	默认值
Number(数字)	0
Boolean(布尔型)	false
String(字符串)	“”
Undefined(未定义的变量)	undefined
Null(空)	null

数字(Number)

• 包括整数和小数

• 八进制：var num = 010; (十进制的8)

• 十六进制：var num = 0xa; (十进制的10)

• .MAX_VALUE最大值, MIN_VALUE最小值

alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);

• infinity: 无穷大 (超过Number的范围)

• -infinity：无穷小

• NaN(Not a number)：非数值 (例如一个字符串减去一个数字)

• isNAN() 判断是否为非数字，是数字返回false，非数字返回true

字符串(String)

• 单引号双引号皆可，推荐单引号
• 字符串的嵌套：

var str = '菜鸟"小铭"学习JavaScript';

• 转义符号 “”

字符串属性

• 检测字符串长度：length属性
• 代码示例：

var str = 'noobxiaoming';
colsole.log(str.length);

• 字符串拼接：+
• +会将所有的其他类型转换成字符串类型

var str = 'xiaoming' , num = 2333;
conlsole.log(str+num);
// 输出结果xiaoming2333 (字符串型)

其他数据类型

• 布尔型(Boolean)

  • true在参与计算时当作1 (false当0)

• 未定义的(undefined)

  • 没有赋初值的类型
  • undefined + 数字 = NaN

• 空值(null)

  • null + 1 = 1

获取数据类型

• 关键字：typeof
• 代码示例：

var num = 10;
console.log(typeof num);

• 在数据类型为null时，typeof检测的数据为object (对象)

• 数据类型特例：

var age = prompt('请输入年龄');
// 这里输入18
console.log(typeof age);
// 这里输出 String类型

• prompt取得的值是字符型的

通过控制台获取数据类型

• 数字型：蓝色
• 字符型：黑色
• 布尔型：深蓝色
• bool和null：浅灰色

数据类型转换

转换成字符串型

方式	默认值
.toString()	转换成字符串
String()	强制转换成字符串
+	拼接结果为字符串

• 代码示例：

var num = 12;
console.log(num.toString());
console.log(String(num));
console.log('' + num);

转换成数字型

方式	默认值
parseInt(string)	string转换成int
parseFloat(string)	string转换成float
Number()	强制转换成数值型
- * /	计算结果为数字

• 代码示例：

var str = '2020';
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));
// 减号方法
console.log(str - 0);
console.log(str - '20');
// 结果为 2000

• 如果字符串里后面有单位(首个必须是数字，后面可以是字母)，parseInt和parseFloat会自动把单位去掉
• 如果前后都有字母，parseInt和parseFloat会返回NaN
• 例如：

var unit = '120px';
var str = 'abc123abc';
console.log(parseInt(unit));
// 输出120
console.log(parseInt(str));
// 输出NaN

布尔型转换

• Boolean() 函数
• 把 ‘’，0，NaN，null，undefined 为 false
• 代码示例：

console.log(Boolean(''));
// 输出false