一、如何在HTML语言中使用JavaScript:
- 内部JavaScript代码:
在<head></head>
内部或<body></body>
内部书写下列代码:
<script type=”text/javascript”>
window.alert(“任意文本”); //在页面加载时自动弹出一个窗口并显示文本内容
</script>
- 外部JavaScript代码:
将JavaScript代码书写为一个独立的文件,扩展名为.js
如何将外部的js文件引入到HTML文档中:在<head></head>
标记对内部书写下列代码。
<script type=”text/javascript” src=”js/index.js”></script>
src属性:为HTML文档指定一个需要进行拼接的js文件,需要指定文件的路径和文件名。
- 内联JavaScript代码:
将较短的临时使用的JavaScript代码书写在HTML标记对中。
例:利用一个链接实现关闭窗口的功能。
<a href=”#” onclick=”javascript:window.close();”>关闭窗口</a>
二、JavaScript语言的基本数据类型:
1.数值型(number):允许在JavaScript代码中出现的数字。
(1)带有小数点的整数就是整型数据。
A .十进制整整型数据:不型数据:逢十进一。
例:10、25、3569、10000等。
B .八进制整型数据:逢八进一,所有的八进制数字都是由0-7八个数字组成的。
八进制数据必须以数字0开头,不能带有8和9。
例:046、057(合法的)、068(非法的)、079(非法的)。
八进制:0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20 21 22 23 24 25 26 27 30
十进制:0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
C .十六进制整型数据:逢十六进一,所有的十六进制数字由0-9、A、B、C、D、E、F十六个数组组成的。
十六进制数据必须以0x或0X开头。
例:在页面中以弹窗的形式输出十六进制数据。
x=0x4a;
window.alert(x)
(2)实型数据:带有小数点的数据就是实型数据。
A .定点实数:实型数据的小数形式。例:3.14、5.0、0.0、9.、.6等。(小数点必须固定的实型数据)
B .浮点实数:实型数据的科学计数形式。(小数点可以浮动的实型数据)
1598000000000 1.598×1012 15.98×1011 159.8×1010
1.598e+012(e后面带有正负号并跟三个数位)
1.598e+12(e后面带有正负号并跟两个数位)
1.598E+12(E大写)
1.598E12(e后面省略正号)
2.36e+05 6.39e-5
2、字符型(string):字符型数据必须用单引号或双引号扩住。
(1)字面字符:‘你好’、”Hello”、”18000319142”等。
(2)转义字符:必须以\开头。例:”\n”,换行。
3、逻辑型(boolean):也叫做布尔型。用于反应生活中只有两种状态的量。
第一个状态:逻辑真(true)
第二个状态:逻辑假(false)
4、未定义型(undefined)
面试题:var x;
window.alert(x); //undefined
5、空型(null)
三、常量和变量:
1、常量:在程序执行过程中不变的量。
(1)数值型常量:
整型数据常量:5、064、0xff等。
实型数据常量:3.14、2.69e+05等。
(2)字符型常量:
字面量字符:”abc”、”12345”等。
转义字符:”\n”等。
(3)逻辑型常量:true、false。
(4)未定义型常量:undefined。
(5)空型常量:null。
2、变量:在程序执行过程中变化的量。
(1)变量的声明:var 变量名;
JavaScript语言是弱变量体系下的语言,变量不声明是可以使用的。
例:x=150;
document.write(x);
(2)允许在声明变量的同时为其赋初值。例:var x=5;
(3)一个声明语句可以同时声明多个变量:var a,b,c;
多个变量之间利用逗号隔开。
例:var a=5,b=10,c;
(4)变量名的命名规则:
A .变量名只允许出现大小写字母、数字、下划线、美元符号、汉字。
var a4,_b6,$abc; //全部合法
B .变量名不得以数字开头。
var 4c; //非法
C .建议变量的命名遵循“见名知意”的原则。
(5)变量的输出:
A .利用弹窗输出:window.alert();
不具备翻译HTML代码的功能,要想换行需要使用\n转义字符。
B .输出至页面:document.write();
原样输出:document.write(“同学们好”);
实现运算:document.write(5+10);
翻译HTML代码:document.write(“<h1>前端开发专业</h1>”);
混合使用:用 + 连接。
document.write(“15-6=” + (15-6)); // 15-6=9
document.write(“今天学习了变量的用法<br />下午讲运算符与表达式”);
C .输出至控制台:console.log()
控制台一样无法完成HTML代码的翻译。
(6)测试变量的数据类型:typeof()运算符。
格式:typeof(变量/常量);
例:
var x;
alert(x); //undefined
alert(typeof(x)); //undefined
例:alert(typeof(null)); //object
(7)声明变量的本质:在内存中为变量开辟了一个存储空间。
四、运算符和表达式:
1、运算符:具有运算功能的数学符号。
运算符的目:参与运算的数据的个数。
单目运算符、双目运算符、三目运算符、多目运算符。
运算符的三要素:
(1)功能:反映运算符的运算法则。
(2)优先级:反映运算符的运算顺序。
(3)结合性:反映运算符的运算方向。(从左向右:常规结合)
2、表达式:利用运算符连接常/变量所组成的式子。
所有的表达式必须有一个运算结果。
3、【算术运算符】:
(1)() + - * / % 正号 负号
(2)功能:
(),提高运算符的优先级。
%,求两个数相除的余数。
(3)优先级/结合性:
A .(),正数第一高。
B .单目运算符【从右向左】:正号、负号。
C .* / %
D .+ -
(4)+除了实现两个数相加之外,还带有两个字符串相连的功能。
“abc”+“123” 结果:abc123
“abc”+123 结果:abc123
123+“abc” 结果:123abc
123+123 结果:246
加号两端有一端是字符,最后的结果就实现两端的拼接。
4、【关系运算符】
(1)> >= < <= == (等于) !=(不等于) === (精确等于) !== (精确不等于)
(2)功能:判断数量关系是否成立,成立表达式的结果为true,不成立表达式的结果
为false。
5>3 结果true
3<1 结果false
5>=5 结果true
5== 5 结果true
5== 10 结果false
5!=10 结果true
5=== 5 结果true
5!== 10 结果true
5==”5” 结果true(成立)
5===”5” 结果false(不成立)
===:两端的数据必须完全一致才能被判定为精确相等,结果为true,否则为false。
5、【逻辑运算符】
(1)&&(逻辑与) ||(逻辑或) !(逻辑非,单目运算符)
参与逻辑运算的数据必须是逻辑值。
(2)&&的功能:
true && true 结果true
true && false 结果false
false && true 结果false
false && false 结果false
运算法则:两端同时成立结果就成立,否则一律不成立。(全真则真,有假则假)
用于表示数值关系在一个范围内:x>10 && x<30 x>=10 && x<=30
逻辑与运算可以翻译为“且”。
(3)||的功能:
true || true 结果true
true || false 结果true
false || true 结果true
false || false 结果false
运算法则:两端只要有一端成立结果就成立,否则不成立。(有真则真,全假则假)
用于表示数值关系在分开的两个区域内:x<10 || x>30
逻辑或运算可以翻译为“或”。
(4)!的功能: !true 结果false , !false 结果true
(5)优先级:
A .!
B .&&
C .||
6、赋值运算符:
(1)基本赋值运算符:=(赋值号)
A .赋值号的左侧必须是变量,右侧可以是常量、变量、表达式。
格式:变量=常量/变量/表达式
例:x=5、y=x、w=5+x*y
B .基本赋值运算符的功能:将右侧的结果赋给左侧的变量。
C .优先级:倒数第二低。
D .赋值表达式的结果:赋值表达式的最终结果是赋值号左侧变量最后的结果。
E .结合性:从右向左。
x=5;
console.log(x); //5
console.log(x=5); //输出x=5表达式的结果:5
(2)自反运算符:
+=(自反加) -=(自反减) *=(自反乘) /=(自反除) %=(自反求余)
A .自反运算符左侧必须是变量。
B .功能:以自反加为例。
x+=3 理解为:将x和3发生+运算,将运算的结果再赋给x变量本身。
C .优先级:倒数第二低
D .结合性:从右向左。
(3)自加自减运算符:++、–(单目运算符)
A .这两个单目运算符唯一的运算数必须是变量。
B .有两种格式:i++ 、++i 、i–、--i
C .功能:让变量进行和1的运算,将和1的运算结果再赋给这个变量。
i++ 类似于 i=i+1
y=(i++) i=6 y=5
问题:能不能说右侧表达式的结果是5并赋给y。
i++:导致变量i加1,但是整个表达式的结果仍是5。
(1)这个式子有几个运算符:2个【= ++】
(2)这两个运算符谁的优先级别高:++,谁的级别高我就用括号扩住谁。
7、逗号运算符:(多目运算符)
格式:表达式1,表达式2,表达式3,表达式4,…
功能:从左向右依次运算每一个表达式,最后一个表达式的结果是整个表达式的结果。
优先级:倒数第一低。
8、条件运算符(三目运算符):
格式:表达式1?表达式2:表达式3
功能:测试表达式1的运算结果是否成立,如果成立则表达式2的运算结果是整个表
达式的结果;如果不成立表达式3的运算结果是整个表达式的结果。
例:x>=0?x:-x 当x=5时,整个表达式的结果是5。
当x=-5时,整个表达式的结果是5。
优先级:倒数第三。
结合性:从右向左。
JavaScript运算符优先级:
1、()
2、【单目运算符】正号、负号、!、++、–(从右向左的结合性)
3、【算术运算符】、/、%
4、【算术运算符】+、-
5、【关系运算符】> 、>=、<、<=
6、【关系运算符】 == 、!=、=== 、!==
7、【逻辑运算符】&&
8、【逻辑运算符】||
9、【三目运算符】? :(从右向左的结合性)
10、【赋值运算符】=、+=、-=、=、/=、%=(从右向左的结合性)
11、【多目运算符】,