目录
一、什么是JavaScript?
JavaScript 是面向 Web 的编程语言,获得了所有网页浏览器的支持,是目前使用最广泛的脚本编程语言之一,也是网页设计和 Web 应用必须掌握的基本工具。
二、JavaScript的组成
1、ECMAScript:是Javascript的核心,主要规定JavaScript的基本语法。所有的浏览器厂商都会遵循这个语法(标准)。以后说的ES也指代JS。
2、DOM:文档对象模型(Document Object Model),是W3c组织提供的编程接口。用户可以通过DOM的接口去操作页面中的元素
3、BOM:浏览器对象模型(Browser Object Model),独立于内容,可以和浏览器进行交互的对象结构通过BOM可以直接对浏览器窗口进行操作
三、JS的使用
1.嵌入式
所谓的嵌入式就是写在html文件中,JS部分的代码包含在<script></script>标签里。
<script>
JavaScript代码部分;
</script>
2.外链式
外链式是指JavaScript代码保存到一个单独的文件中,通常使用”js”作为文件的扩展名,让然后使用<script>标签的src属性引入文件。
<script src="./js/cript.js"></script>
3.行内式
行内式是将JavaScript代码作为Html标签的属性值使用。
<button onclick="alert('这是一个警示框');">点击</button>
这个代码实现的功能是点击一个按钮随即弹出一个警示框,警告框里的内容是“这是一个警示框”。
四、JS的输入与输出
1.常用输入语句prompt(‘’);
<script>
prompt('输入一个数字:')
</script>
2.常用输出语句
- alert(警告框里的内容)--------弹出一个警告框
<script>
alert('这是一个警告框')
</script>
- console.log(内容)---------在控制台输出内容
<script>
console.log('这是在控制台显示的内容')
</script>
- document.write(内容)---------输出在页面上
<script>
document.write('这是显示在页面上的内容')
</script>
五、JS的语法规范
1、基本的语法规则:
(1)严格区分大小写
(2)对空格、换行、缩进不敏感,一条语句可以多行写
(3)一条语句结束后可以是用分号,也可以不用分号
2、注释符号
(1)单行注释符:以 '//'开始,到所在行结束.快捷键:ctrl+/
(2)多行注释符:以'/*'开始,以'*/'结束,中间可以包含多行.
快捷键:shift+alt+a
六、JS的变量
1.如何声明变量
变量是用来存储数据的容器,在使用前必须要进行声明,否则将没有意义。
我们用var关键字声明变量。
<script>
var x;
x = 5;
</script>
2.变量命名
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
- 变量通常使用驼峰命名法--------即首字母小写后面的单词首字母大写。(eg:myName、newArr)
3.变量的数据类型
1.String字符串
2.Number数值
3.Boolean布尔值 false / true
4.Null空值
5.Undefined未定义
6.Object对象
------其中String Number Boolean Null Underfined 属于基本数字类型
-----而Object属于引用数据类型
①String字符串
字符串是存储字符(比如 “Bill Gates”)的变量。
字符串可以是引号中的任意文本。可以使用单引号或双引号:
<script>
var a = '12';//此时a是一个字符串而不是数字型
//可嵌套 外单内双 外双内单
var str = ' 我是美女!';
var str = 'my name is hyh';
//字符串的拼接
var cc = '沙漠' + '骆驼';
console.log(cc);
</script>
关于字符串类型的变量我们需要知道:
a、转义字符:以'\'开头,后跟一个字符,代表某个特殊含义
\n:表示换行
\t:Tab符号
\b:退格符
\x:十六进制数 \x61
\\:表示一个反斜杠
b、字符串的长度:字符串变量默认有length属性,代表字符串的长度(有效字符的个数)
c、访问字符串中的某个字符:字符串变量名[index],index的取值从0开始到字符串的长度减1
d、字符串的拼接:通过'+'实现.不同类型的数据和字符串拼接时,会将其他类型的数据先转换成字符串.
②Number数值
数字型常用的数制
a、二进制:由0和1组成的数字序列
b、八进制:由0开头,0~7组成的数字序列,逢8进1
c、十六进制:是0x开头,由0~9数字和a~f字母组成
d、十进制
数字可以带小数点,也可以不带:
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
③Boolean布尔值
布尔(逻辑)只能有两个值:true 或 false。
布尔常用在条件测试中。
var x=true;
var y=false;
④Undefined 和 Null未定义值和空值
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
4.数据类型的检测
用typeof关键字检测变量的数据类型
<script>
var a = 11;
var b = '11';
console.log(typeof a);
console.log(typeof b);
</script>
5.数据类型的转换
(1)转换为字符串
a、通过连接符'+'
b、通过toString()方法
c、通过String()类进行转换
以数字型转换为字符串型为例:
<script>
//Number转换为String
//1 变量名.toString()
var num = 10;
var str = num.toString();
console.log(num);
console.log(str);
console.log(typeof str);
//2 String(变量名) 强制转换
console.log(String(num));
//3 ****** 利用拼接字符串(空字符串)实现转换 隐式转换
console.log(num + '');
</script>
(2)转换为数字型
a、通过parseInt()将字符转换成整数
b、通过parseFloat()将字符串转换为浮点型数据(小数)
c、通过Number()将字符串转为数字型
d、通过算术运算符进行隐式转换
<script>
var age = '18';
console.log(typeof age);
//age = parseInt(age);
//age = parseFloat(age);
//age = Number(age);
age = age * 1;
console.log(typeof age);
</script>
七、JS的运算符
1.算数运算符
y=5为例:
运算符 | 描述 | 例子 | x运算结果 | y运算结果 |
---|---|---|---|---|
+ | 加法 | x=y+2 | 7 | 5 |
- | 减法 | x=y-2 | 3 | 5 |
* | 乘法 | x=y*2 | 10 | 5 |
/ | 除法 | x=y/2 | 2.5 | 5 |
% | 取余 | x=y%2 | 1 | 5 |
++ | 自增 | x=y++ | 5 | 6 |
x=++y | 6 | 6 | ||
- - | 自减 | x=y- - | 5 | 4 |
x=- -y | 4 | 4 |
2.赋值运算符
x=10 y=5为例:
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
- = | x- =y | x=x- y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
3.比较运算符
x=5 为例:
运算符 | 描述 | 比较 | 返回值 |
---|---|---|---|
== | 等于 | x==8 | false |
=== | 绝对等于 | x===‘5’ | false |
!= | 不等于 | x!=4 | true |
!== | 不绝对等于 | x!==5 | false |
> | 大于 | x>1 | true |
< | 小于 | x<1 | false |
>= | 大于等于 | x>=5 | true |
<= | 小于等于 | x<=8 | true |
4.逻辑运算符
x=6 y=3 为例
运算符 | 描述 | 例子 |
---|---|---|
&& | 与 | (x < 10 && y > 1) 为 true |
ll | 或 | (x==5 |
! | 非 | !(x==y) 为 true |
注意
&&运算的短路现象:当’表达式1’为false时,不运算’表达式2’
||运算的短路现象:当’表达式1’为true时,不运算’表达式2’
优先级顺序:!> && > ||
5.条件运算符
条件运算符(? : ):是一个三目运算符(参加运算的对象有三个)
条件表达式: 表达式1?表达式2:表达式3
先运算’表达式1’,
-------若结果为true则选择’表达式2’进行运算,并把’表达式2’的值作为整个条件表达式的值;
-------若’表达式1’的结果为false,则选择’表达式3’进行运算,并把’表达式3’的值作为整个条件表达式的值