JS基础
一、简介:
什么是javascript?
JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。
虽然它作为开发web页面的脚本语言而出名,但是它也被用到了很多非游览器环境中
JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象。命令式、声明式、函数式编程范式
JavaScript的组成?
由三部分实现:
ECMAScript: 描述了该语言的语法和基本对象
文档对象模型(DOM): 用来操作网页中的元素
游览器对象模型(BOM):用来获取游览器信息或操作游览器,例如:游览器的前进与后退、游览器弹出提示框、游览器地址栏输入网址跳转等操作
JavaScript主要功能
- 嵌入式动态文本于HTML页面
- 对游览器事件做出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的游览器信息、控制cookies、包括创建和修改等
- 基于Node.js技术进行服务器端编程
JavaScript特点
- 脚本语言
- JavaScript是一种解释型的脚本语言,其他语言都是先编译后执行,js不需要编译即可运行在客户端,需要通过游览器在程序运行过程中逐行进行解释
- 基于对象
- JavaScript是一种基于对象的脚本语言,不仅可以创建对象,也可以使用现有的对象
- 简单
- JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求
- 动态性
- JavaScript是一种采用事件驱动的脚本语言,它不需要经过web服务器就可以对用户的输入做出响应,在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
- 跨平台性
- JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。
二、JS的基本使用
JS的编写位置
1.编写到script标签中
<script> js代码 </script>
2.编写到外部的js文件中
<script src="xxx.js"></script>
3.编写到标签的指定属性中
<button onclick='js代码'></button> <a href="javascript:js代码"></a>
注意点:
1. 可以有多个script标签,多个script标签是自上而下顺序执行
2. 一个script标签只能专心的做一件事
向页面中输出内容
1.document.write(‘这是一些内容’);
2.alert(‘这是一些内容’); 在页面上弹出警告框
- console.log(‘这是一些内容’); 在游览器调试面板控制台输出内容
三、字面量和变量
字面量
字面量就是一个一个的值,就像1、2、'hello'、true、NaN
所有的字面量在JS中都可以直接使用,但是一般不会这么做
变量
- 量用来存储值,一个变量可以用来“存储”任意值
- 并且变量中“存储”的值可以任意修改
- JS中的变量并没有直接存储值,而是存储值的内存地址
- JS中的变量更像是一个值的别名
变量的使用
1.声明变量(必须声明以后才能使用)
关键字(系统征用的有特殊功能的单词叫做关键字):
var 声明变量
var num = 10;[声明和赋值同时进行]
alert(num) ;
2. 初始化:声明变量的时候,直接给这个变量赋值叫做初始化。
3.如果我们声明变量的时候,没有值赋给这个变量,系统默认值为undefined。
4.提高整个程序运行的效率,我们可以将声明变量,没有值赋值给这个变量的时候,我们可以设置为null
变量命名:
标识符: 所有用户自定义的名字叫做标识符(变量名也是标识符)
命名规则:
1.只能由数字、字母、下划线和美元符号(💲)组成
2.不能以数字开头
3.不能使用保留字和关键字
4.大小写敏感 age Age这是两个完全不同的变量
5.见名思意(尽量用英文全称)
3.如果命名变量时单词个数超过2个以上时:
①驼峰命名法:className
②用下划线隔开:class_name
关键字
typeof
格式:typeof 常量/变量
功能:输出当前常量或者变量的数据类型
例子:alert(typeof "Hello"); 为string(字符串类型)
注:
alert(typeof typeof 100);为string(字符串类型)
先通过typeof判断100为number类型,再通过typeof判断number的类型是字符串
四、数据类型:
基本数据类型
数值(number)
-
在js中所有的整数和浮点数(小数)都是number类型
-
特殊的数字:
Infinity (无穷)
NaN (非法数字) -
其他进制的数字
二进制:0b开头
八进制:0o开头
十六进制:0x开头 -
在js中可以确保大部分的整数运算取得一个精确的结果(别太大)小数运算可能会得到一个近似值,所以不要直接在js中进行精度要求高的运算
-
使用typeof检查数字时,会返回 ‘number’
布尔值(boolean)
- boolean(布尔值)
- 布尔值用来进行逻辑判断,布尔值只有两个:
- true 表示真
- false 表示假
- 使用typeof检查boolean时会返回 ‘boolean’
字符串(string)
-
JS中的字符串使用引号引起来,单双都行,但是不要混合
-
同类型的引号不要发生嵌套
-
转义字符串,js中使用 \ 作为转义字符
’ --> ’
" --> "
\t --> 制表符
\n --> 换行
\ --> \ -
模板字符串(新增的)
- 使用 `(反单引号)来表示模板字符串
- 模板字符串可以跨行使用,并且在模板中可以直接嵌入变量
- 例子:
let str =xxxx ${变量}
;
-
使用 typeof 检查一个字符串时,它会返回 ‘string’
特殊数据类型:
null(空值)
- 空值用来表示一个空的对象,只有一个值null
- 使用typeof检查控制时,返会’Object’
undefined:表一种状态(未定义)
- 未定义用来表示声明但没有赋值的变量,只有一个值undefined
- 使用typeof检查未定义时,会返回 ‘undefined’
- 一般我们不会主动使用undefined
三、运算符
运算符:
-
算术运算符 + - * / %(取余运算符)
-
关系运算符 > < >= <= == != === !==
-
逻辑运算符 && || !
-
一元运算符 ++ –
-
a++
- 值:++后置,先取a的值作为a++表达式的值,然后再对a进行+1
- 功能:对原有的变量进行+1操作
-
++a
- 值:++前置,先对a进行+1,再取a的值作为a++表达式的值
- 功能:对原有的变量进行+1操作
-
a–
- 值:–后置,先取a的值作为a–表达式的值,然后再对a进行-1.
- 功能:对原有的变量进行-1操作
-
–a
- 值:–后置,先对a进行-1,再取a的值作为a–表达式的值
- 功能:对原有的变量进行-1操作
-
-
赋值运算符
- 基本赋值运算符 =
- 复合赋值运算符 += -=…x=
注:
将不同数据类型进行算术运算
-
自动数据类型转换:不同数据类型直接是没有办法进行运算 ,将数据转成同一数据类型,再进行计算。
- 其中有一个字符必须是字符串,运算符必须是+号,别的数据类型会转成字符串,进行字符串拼接。
alert("Hello" + 100); 显示为Hell100 alert("Hello" + "Word"); 显示为HelloWord
-
任何数据和字符串做+加法以外的操作,那么字符串先转换为数字再去进行运算
- 如果字符串是一个纯数字字符组成的字符串,转成对应的数字。
- 如果字符串不是一个纯数字字符组成的字符串,转成NaN,NaN和任何数据运算都是NaN(除了和字符串拼接)
alert(100 - "20"); 显示为80
alert(100 - "20a"); 显示为NaN
- 除字符串以外的数据,在进行算术运算的时候,先转成数字,再进行运算。
alert(10 - null); 显示为10(null//0)
alert(10 - undefined); 显示为NaN(undefined//NaN)