学习方法
JS基础主要是认识语法,以后的大部分知识点都在此基础上扩展和延伸,我们学一部分常用的。 类似于学中文,不必把字典学完。 JS体系: ECMAScript DOM BOM JS的原型链(typescript), ES5,ES6,Node, Vue,React
学习目标
熟练掌握JS基础语法的相关概念和写法 学完JS基础你并不能做什么?但是以后的所有学习都跟这个有关系,就像读小学,只是打基础,但是却很重要。
知识讲解
JS的三种书写方式
行内JS 很少用 内嵌JS 学习的时候用(少量代码也可以) 外链JS 做项目的时候用(代码量较多时)
注意: 在JS中常用的是单引号.
内嵌JS
<!--在网页的head标签中,添加script标签,所有的JS代码都放在Script标签中.--> <head> <script> alert('Hello World~!'); </script> </head>
外链JS
<script src="outdoor.js"></script> 注意:外链和内嵌不能混合使用
**注意:**引用外部 js 文件的 script 标签中不可以写代码
行内JS
<input type="button" value="点我试试" onclick="alert('Hello World')" /> 可以在行内标签上添加事件操作.
JS中的常见3中打印输出
// 1. 弹出警示框 alert 警示 警惕 实际开发不太常用 用户体验不好 经常用来检测结果 alert('迪丽热巴'); // 2. 控制台打印 输出 console 控制台 log 日志 经常内部测试用的 程序猿看的 console.log('古丽扎娜'); // 3. 提示用户输入框 prompt 提示 prompt('请输入您喜欢的明星:');
变量的基本写法
在JS中,变量就是使用var标识的内容. 变量的作用:用来存储数据,这样可以多次使用. var user="张三"; console.log(user+"来了") console.log(user+"走了") 1.JS中见到var 就知道是一个变量,后面跟上一个自己取的名字 例如age var age; //这就声明了一个变量 age =10; //将数字10存储到age这个变量中 //那么 age以后就可以代表10来使用. 2.工作中的常见用法是: 声明+赋值, 一起完成 var age=10; 3.变量的其他写法 //同时声明多个变量 var age, name, sex; // 等价于 var age; var name; vae sex; age = 10; name = 'zs'; sex = 2; //同时声明多个变量并赋值 var age = 10, name = ..,sex = 2;
//变量的命名规范 1.字母,数字,下划线,美元符号($)的组合 2.区分大小写 3.不能数字开头 4.不能是中文 5.不能是关键字,保留字,代码符号(var、for、while、name) 建议使用驼峰命名法: 多个单词组合,第一个单词都小写,后面每个单词的首字母大写. userName getName getSum
常见的数据类型
数据类型是将现实生活中的数据,用计算机存储起来. -----js能直接认识这些数据 数值类型 对应现实生活中的数字 字符串类型 对应现实生活中的各种字符 布尔类型 对应现实生活中的 真,假, 正确,错误. 未定义类型 就是计算机不认识的
数值类型
var num = 10; //num这个变量存的是数字10,那么num就是一个数值类型 同样是数值类型有: 浮点数(也叫小数) isNaN() 方法,可以判断不是一个数字。
字符串类型
字符串就是字符,包括文字,数字,字母等. var strMsg = "北京欢迎你"; // 使用 双引号 表示字符串 var strMsg2 = '武汉欢迎你'; // 使用 单引号 表示字符串
布尔类型
布尔类型就两个值: true false
未定义和Null类型
var usrName; // 声明变量后没有直接赋值,此时它的默认值就是 undefined alert(usrName); // 显示 undefined 总结: 没有存值的变量,或者没有声明的变量都是undefined var username = null; //声明一个变量,但是不知道是谁?先占个座位
其他字符串知识
转义字符
当编程语言中已经使用了一些符号,而我们要表示.需要用转义字符,常见如下表:
字面量 | 含义 |
\n | 换行符(重要) newline |
\ \ | 斜杠 \ |
’ | 单引号 ’ |
" | 双引号 " |
\t | Tab |
\b | 空格 blank |
\r | 回车符 |
**注意:** `\n` 和 `\r` 都起到换行的作用,但平时用 `\n` 比较合适。因为 `\n` 是 windows/mac/linux 都支持,`\r` 只有 windows 支持。
2.字符串长度
var strMsg = "我是帅气多金的程序猿!--- 恩,我看出了你的自信。"; alert(strMsg.length); // 显示 26
3.字符串拼接
口诀:数值相加 字符相连 console.log("hello"+"world"); var user="张三"; console.log("你好"+user+"今天吃了吗?");
数据类型检测
//typeof 可用来获取检测变量的数据类型 var num = 3747; var isNum = typeof num; // 也可以 写成 typeof(num) alert(isNum); // "number" 注意: 使用typeof检测null,返回Object类型,是一种历史错误.
注意: 1995年JavaScript语言的第一版,所有值都设计成32位,
其中最低的3位用来表述数据类型,object对应的值是000。
当时,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),
完全没考虑null,只把它当作object的一种特殊值,32位全部为0。这是typeof null返回object的根本原因。
数据类型转换
转换成数值类型
parseInt() ------只能转换开头是数字的字符串 "123abc" parseFloat() ----只能转换开头是数字,并且能识别第一个小数点. var num1 = parseInt('12.3abc'); // 返回12,第一个字符是数字会解析知道遇到非数字结束 var num2 = parseInt('abc123'); // 返回NaN,如果第一个字符不是数字或者符号就返回NaN var num3 = parseInt('100px'); // 100
转换为字符串类型
//toString() 将其他类型转换成字符串 var num = 5; console.log(num.toString());
转换为布尔类型
Boolean() 0 ''(空字符串) null undefined NaN 等会转换为false 非0 和非空都会转换成 true
隐式转换
显式转换: 就是使用parseInt() toString() Boolean() 等进行转换 隐式转换: 就是不使用上面这些转换函数, 自动转换的类型. //字符串+任何类型都是字符串----因为进行了隐式转换 //加号有两个功能: 1.数值相加 2.字符相连 console.log('20' + 10); //如果是减法,乘除,会进行隐式转换,----转换成数值 console.log('20' - 10); //容易出现隐式转换成布尔类型, 比较符号的时候 console.log(10 > 15);