一.JavaScript简单介绍
1.JavaScript 简称 JS,是一门弱类型的语言。主要用于给HTML页面上添加动态效果与交互效果。
2.JavaScript 的组成(ECMAScript、DOM、BOM)
ECMAScript:JavaScript的基本语法
DOM:文档对象模型
BOM:浏览器对象模型
二.JavaScript的特点
1.JavaScript是一门弱类型的语言,对代码的规范性要求不是很高,使用起来较为灵活。
2.JavaScript的代码不需要编译就能执行。
3.JavaScript是基于客户端的语言,运行在客户端的浏览器上。
4.可在多平台运行 如(Windos,Linux,Max,ios,Android等)。
三.JavaScript的基本使用
1.如何使用JS?
1.使用script标签,一般而言都是放在head标签中
2.编写js文件,通过script标签中的src属性引入
3.可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致
2.JS的调试
浏览器 : 控制台(Console) 右键进入检查 点击控制台进行查看
Console:
.log() 打印信息
.dir() 打印一个对象的所有属性和方法
3.变量与数据类型:
js中的所有变量都由var来定义,并且变量的值与类型都可以发生改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript01</title>
</head>
<body>
<h1>JavaScript01</h1>
<script type="text/javascript">
/* 编写代码必须在 script 标签中*/
console.log('hello world')
console.log('你好 世界')
/* 定义变量 :js中的所有变量都由var来定义*/
var i=10;
var f=1.23;
/* 定义字符串变量 */
var s='1';
var s2='数字的值:'+f+'hello world';
var s3=`发大水发生¥{f}激发事件发生`;//反引号,用反引号可以直接用美元符号来连接字符串与数字
var s4='a';
</script>
</body>
</html>
使用 typeof 可以查看数据类型(number,string,boolean)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript01</title>
</head>
<body>
<h1>JavaScript01</h1>
<script type="text/javascript">
var s4='a';
//查看类型
console.log(s4/i);
//NaN not a number 不是一个数字
console.log(1/0);
//Infinity 无穷大
console.log(-Infinity)
//转换 在这里分整数小数
//Integer.parseInt()
console.log(parseInt("1.23"));
console.log(parseFloat("1.23"));
//答案
//在所有编程语言中,基本上小数的运算都不靠谱
console.log(0.6-0.2);
//小数的取几位
console.log((1.234).toFixed(2));//取小数点后两位
//boolean
var f1=true;
var f2=false;
console.log(f1||f2)//true 或者,只要有一真,则都为真
console.log(f1&&f2)//false 并且,只要有一假,都为假
console.log(!f1)//false f1是true !f1 就是不为true
console.log(!!-1)// !! 将这个变量变成boolean
//什么情况下会得到false
//字符串:"" 为空字符时;
//数字:0
// null 也为 false;
//underfined 未定义 也为false;
//NaN 不是数字类型 也为false;
//短路
console.log(""||0)//0 也可理解为false
console.log(1||0)//1 ||只要有一个为true 就会停止
console.log("2"||"1"||1)// 2
console.log("2"&&"1"&&1)//1 &&只要有一个为false 就会停止
console.log("2"&&0&&1)//0 0就是代表false
</script>
</body>
</html>
4.JS中的弹框
alert :提示框
confirm :询问框
prompt :输入框
5.基本语句结构
if结构
switch结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript01</title>
</head>
<body>
<h1>JavaScript01</h1>
<script type="text/javascript">
var f6=prompt("请输入星期几");//接收到的是一个String类型,需要进行类型的转换
if(!isNaN(parseInt(f6))){
switch(parseInt(f6)){
case 1:
console.log("周一")
break
case 2:
console.log("周二")
break
case 3:
console.log("周三")
break
default:
console.log("xxx")
}
}
</script>
</body>
</html>
while结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript01</title>
</head>
<body>
<h1>JavaScript01</h1>
<script type="text/javascript">
//while 循环
var j=1
while(j<10){
j++;
}
//死循环
while(true){
console.log("死循环")
}
</script>
</body>
</html>
for结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript01</title>
</head>
<body>
<h1>JavaScript01</h1>
<script type="text/javascript">
//for循环
var count=prompt("请输入次数")
for(var i=0;i<count;i++){
//在页面中进行html输出
document.write("<font color='red'>哈哈哈<font><br>")
}
</script>
</body>
</html>
6.基本语法
1.JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{}
2.JavaScript并不强制要求在每个语句的结尾加;
3.// 行注释
4./* */ 块注释
5.JavaScript严格区分大小写
今天的JS分享就到此为止,精彩下期继续。
版权归原作者 xiongᥫᩣ 所有, 如有侵权,请联系我们删除。