JavaScript基础语法（ECMAScript）
定义
JavaScript是一种基于对象和事件驱动的客户端脚本语言，提供用户和界面的交互方式。
(1)对象
对象:万事万物皆对象。
(2)属性
属性:描述对象的外观特征。
(3)行为
行为:(1)方法(主动的行为)
(2)事件(被动的行为)
脚本语言:(属于解析语言)
(4)编译语言、解析语言
编译语言:把代码编译成CPU可是别的语言（机器码），然后统一整体执行展示给用户。
解析语言:把程序解析一行执行一行，然后显示给用户。
(5)弱类型的脚本语言
弱类型:根据值来确定数据类型，接收数据的格式：var 变量名称=值。
JavaScript嵌入页面的方式
(1)行间式嵌入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行间式嵌入</title>
</head>
<body>
<div class="div1" onclick="alert('HELLO JavaScript')">点击一下</div>
</body>
</html>
(2)内嵌式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<script type="text/javascript">
function load() {
alert('张艺兴');
}
</script>
</head>
<body onload="load()">
</body>
</html>
(3)外部式/外联式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部式</title>
<script src="js/index01.js" type="text/javascript" charset="UTF-8">
</script>
</head>
<body onload="load()">
</body>
</html>
onload:页面加载事件
function load() {
alert('Time flies!');
}
加载事件
没有函数名称的加载事件:
window.onload=function() {
alert('没有函数名称的加载事件');
}
变量的定义以及变量的初始化
消息框
alert(‘你好’);
confirm(‘是否确定关闭窗口’);
prompt(‘值1’，‘值2’);
值1：表示消息框的提示 值2：表示该消息框中的文本内容
将内容显示到控制台:
console.log(‘我是在控制台显示的’);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>消息框</title>
<script type="text/javascript">
// alert('你好');
// confirm("是否确定关闭窗口");
// 值1表示:消息框的提示 值2表示:该消息框的文本内容
prompt('请输入姓名','张艺兴');
console.log('我是在控制台显示的');
</script>
</head>
<body>
</body>
</html>
变量
在整段程序中不断变化的量，同时用来存储数据的量。
(1)变量的定义
使用关键字var进行定义。 var num;
(2)变量的初始化
是指变量赋值 num=10;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
<script type="text/javascript">
// var num1=10,num2=20;
// alert(num1);
// var num1,num2;
var num1,num2;num1=3,num2=6;
alert(num2);
// var num1=2,num2;num2=3;
// alert(num2);
</script>
</head>
<body>
</body>
</html>
(3)变量的命名规则
①驼峰命名法：小驼峰 userName 大驼峰 UserNamePwd;
②变量的名称可以以$，_，字母开头;
③变量名称中可以包含数字，但不能以数字开头;
④变量名称不能使用JavaScript中的关键字进行命名;
⑤变量名称可以使用中文命名，但是low;
⑥变量中区分大小写:userName和UserName(表示两个不同的变量);
⑦变量名称中不允许出现空格，长度不能超过255个字符。
JavaScript数据类型
基本数据类型3种
重要方法：typeof 用来检测变量的数据类型
(1)number数字类型
var num=10;
检测方式分2种：①alert(typeof(num));
②alert(typeof num);
(2)String字符串类型
(3)boolean布尔类型
赋值结果只有两种结果true/false。
特殊的数据类型3种
(1)undefined未定义类型
声明变量未初始化
(2)null空类型
(3)object对象类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据类型</title>
<script type="text/javascript">
//基本数据类型
// number数字类型
var num=10;
// alert(typeof(num));
// alert(typeof num);
// String字符串类型
var str1='admin';
// alert(typeof str1);
var str2='123';
// alert(typeof str2);
// Boolean布尔类型:true false
var bool=false;
// alert(typeof bool);
//特殊数据类型
// undefined未定义类型:声明变量初始化
var unde;
// alert(typeof unde);
// null空类型
// Object对象类型
// 实例化，创建对象
var str1=new String();
alert(typeof str1);
</script>
</head>
<body>
</body>
</html>
数据类型的转换
1.将数字类型转换成字符串类型
2.将字符串类型转换成数字类型
3.将日期类型(object)转换成字符串类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据转换</title>
<script type="text/javascript">
//数字类型转换成字符串类型
var num=10;
var num1=String(num);
// alert(typeof num1);
var num2=num.toString();
// alert(typeof num2);
//字符串转换成数字类型
var str1='123';
// alert(typeof Number(str1));
var str2='133.45';
// alert(typeof Number(str2));
var str3=Number(str2);
// alert(str3);
var str4='abc123';
// alert(typeof Number(str4));
// 检测结果为NaN，表示非数字，表明转化失败。
// alert(Number(str4));
var str5='123abc';
// alert(typeof Number(str5));
// 检测结果为NaN，必须要求是纯数字才可进行转换。
// alert(Number(str5));
var str6='abc123';
var num_01=parseInt(str6);
// alert(typeof num_01);
// alert(num_01);
// 转换失败，NaN值。
// alert(num_01);
var str7='123abc';
var num_02=parseInt(str7);
// 在转换的过程中遇到非数字的类型就不会进行转换，然后输出转换完成的数字。
// alert(typeof num_02);
// 输出结果为123，省略abc。
// alert(num_02);
var str8='12ab33cc';
var num_03=parseInt(str8);
// alert(typeof num_03);
// 输出的结果为12，同样是遇到非数字的类型就停止转换，输出转换完成的数字。
// alert(num_03);
var str9='123.34';
var num_04=parseInt(str9);
// alert(typeof num_04);
// 结果为123。
// alert(num_04);
var str10='123.45';
var num_05=parseFloat(str10);
// alert(typeof num_05);
// alert(num_05);
//日期类型(Object)转换为字符串类型
var time=new Date();
// alert(time);
// alert(typeof time);
// 使用toString()方式
var StrTime=time.toString();
// alert(typeof StrTime);
// 最常用方式，转换为字符串，这种方式成为拼接字符串。
alert(typeof StrTime+'');
</script>
</head>
<body>
</body>
</html>
转义字符
document.write('<br/>');设置页面换行
alert(a1+’\r\n’+b1);换行的转义字符使用
运算符
JavaScript的运算符可以按照运算符的类型分为5种：
①算数运算符：+、-、*、/、%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>算数运算符</title>
<script type="text/javascript">
//算数运算符:+、-、*、/、%
var a=2,b=3;
document.write(a+b);
document.write('<hr />');
document.write(b-a);
document.write('<hr />');
document.write(a*b);
document.write('<hr />');
document.write(a/b);
document.write('<hr />');
document.write(a%b);
</script>
</head>
<body>
</body>
</html>
②比较运算符：>、<、>=、<=、!=、==
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较运算符</title>
<script type="text/javascript">
//比较运算符：>、<、>=、<=、!=、==
// 添加括号，设置优先级。
var num1=23,num2=15;
document.write('<hr />'+(num1>num2));
document.write('<hr />'+(num1<num2));
document.write('<hr />'+(num1>=num2));
document.write('<hr />'+(num1<=num2));
document.write('<hr />'+(num1!=num2));
document.write('<hr />'+(num1==num2));
</script>
</head>
<body>
</body>
</html>
③赋值运算符：=、+=、-=、*=、%=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>赋值运算符</title>
<script type="text/javascript">
//赋值运算符:=、+=、-=、/=、*=、%=
var x=5,y=4;
// x+=y;
// 相当于x=x+y;
// alert(x);
// y-=x;
// alert(y);
x*=y;
alert(x);
// x/=y;
// alert(x);
// x%=y;
// alert(x);
</script>
</head>
<body>
</body>
</html>
④条件运算符/三目运算符/三元运算符：条件?值1:值2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件运算符/三目运算符/三元运算符</title>
<script type="text/javascript">
//条件运算符:条件?值1:值2
var x=3,y=5;
// alert(x>y?'0':'1');
// alert(x<y?'成立':'不成立');
alert(x>y?true:false);
</script>
</head>
<body>
</body>
</html>
⑤逻辑运算符：&&(与) ||(或) !(非)
&&(与) ：表示的是前者条件满足的同时后者条件也要满足，只要任何一边的条件不成立，返回值都为false；
||(或)：表示的是只要满足一边的条件都为true，如果两边都为假，结果为假，两边都为真，结果为真；
!(非)：表示的是若表达式的值为true，则返回false；若表达式的值为false，则返回true。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>逻辑运算符</title>
<script type="text/javascript">
//逻辑运算符:&&(与) ||(或) !(非)
// &&表示的是前者条件满足同时后者条件也要满足，只要任何一边的条件不成立，返回都为false。
var x=3,y=4;
// alert((x>6&&y<5)?true:false);
// ||表示的是只要满足一边的条件都为true，如果两边都为假，结果为假，两边都为真，结果为真。
// alert((x<4||y>8)?true:false);
// !非：若表达式的值为true，则返回false；若表达式的值为false，则返回true。
alert(!(x>5)?true:false);
</script>
</head>
<body>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
