今天给大家带来的是js的基本语法，相信大家对网站都不陌生，那么想要做出好看的网站js就是一大利器了。
前端的三大要素：
- htem（网页骨架）
- css（网页样式）
- js（让网页具备动态效果）
什么是js？
- JavaScript 一门弱类型的语言（弱类型：对代码的约束性不高）
- 用于给HTML页面上添加动态效果与交互操作
- ECMA：相当于js的语言标准，目前最高是ES6
java与JavaScript的比较
- java代码需要编译才能执行，而js代码不需要编译就能执行；
- js可以动态的增加属性
- js中所有变量全部使用var来定义
- java是基于服务端的语言，js是基于客户端的语言；
（什么叫基于服务端和客户端？简单理解，就是需要服务端执行的或者需要在客户端执行的。）
如何使用js？
- 使用script标签，一般而言都是放在head标签中
- 编写js文件，通过script标签中的src属性引入
- 可以在同一个界面中引入多个文件，执行顺序与引入顺序一致
js的调试
浏览器：控制台（Console）
console.log() 打印信息
console.dir() 打印一个对象的所有属性和方法
基本语法
JavaScript的语法和java语言类似，每个语句以;结束，语句块用{}
JavaScript并不强制要求在每个语句的结尾加;
// 行注释
/* */ 块注释
JavaScript严格区分大小写
怎样区分整数变量和字符串变量？
可以通过控制台输出的颜色分辨，整数是蓝色，字符串是黑色
也可以通过在输出时加个typeof：
//js中所有变量全部使用var来定义
//整数，小数叫做number
var i=1;
//定义字符变量 string
var s="哈哈哈";
console.log(typeof i);
console.log(typeof s);怎样将整数添加到字符串
可以直接跟java一样用+连接
在反引号中可以用${}直接添加到字符串中
var s2='数字的值'+f+"hello world";
var s3=`的点点滴滴${f}多多多多多`;//``在tab键位的上方在js中字符串的数字与整数是可以运算的，如果是非数字控制台输出的是NaN（not a number 不是一个数字）
在js中1/0是可以的，输出的结果是Infinity（无穷大）
数字类型的转换：
console.log(parseInt("1.23"))
console.log(parseFloat("1.23"))取小数的后几位：
//在所有的编程运算中 基本小数的运算都不靠谱
console.log(0.6-0.2);
//小数的取几位
console.log((1.23545).toFixed(2))boolean：
var f1=true;
var f2=false;
console.log(f1||f2)//true
console.log(f1&&f2)//false
console.log(!f1)//false
console.log(!!f2)//true !!将这个变量变成boolean什么情况下会得到false？
- 字符串：""为false
- 数字：0为false
- null 也为false
- undefined （未定义） 也为false
- NaN 也是false
什么是短路？
如果前面为真就停止，如果为假就往后继续运行
在&&中如果全为真就会运行到最后，如果有假就停止
//短路 如果前面为真就停止，如果为假就往后继续运行
console.log(""||0)//0
console.log(1||0)//1
console.log("2"||"1"||0)//0
//在&&中如果全为真就会运行到最后，如果有假就停止
console.log("2"&&"1"&&1)//1
console.log("2"&&0&&1)//0如何判断用户到底输入了没有？
var m=prompt("请输入一个数字")
//判断用户到底输入了没有？
// "" 为false ！->true
// null 为false ！->true
if(!m){
alert("输入不准确")
}
console.log(m);js数组的特征：
- 数组没有类型限制
- 数组可以读取任意下标的值
- 长度可以任意变化
js如何定义对象？
//定义对象
var stu={
"stu_no":1,
"stu_name":"小明"，
"stu_age":38
}
//可以动态的增加属性
stu.stu_address="xx"//给对象新增了地址属性
console.log(stu);js中的弹框
主要有三种弹框：提示框（alert）、询问框（confirm）、输入框（prompt）
//js中的弹框
//alert("你好吗？");//提示框
//var f4=confirm("确定要删除吗？")//询问框
var f5=prompt("请输入");//输入框
console.log(f5);关于js中的“=”的意思
- = 赋值
- == 比较（无视类型的比较）
- === 转换类型的比较（先比较类型在比较值）
关于js中的循环：
switch结构：用户输入1~7，控制台输出周一~周天
//NaN不能用等于判断 只能使用isNaN
var f6=prompt("请输入星期几")
if(!isNaN(parseInt(f6))){//如果不是非数字
switch(parseInt(f6)){//转成int类型
case 1:
console.log("周一")
break
case 2:
console.log("周二")
break
case 3:
console.log("周三")
break
case 4:
console.log("周四")
break
case 5:
console.log("周五")
break
case 6:
console.log("周六")
break
case 7:
console.log("周天")
break
default:
console.log("你是xx")
}
}while结构：
// var j=1;
// while(j<10){
// j++;
// }
//死循环
// while(true){
// }for结构：用户输入次数进行循环输出
var count=prompt("请输入次数")
for(var i=0;i<count;i++){
//在页面中进行html输出
document.write("<font color='red'>哈哈哈"<font><br>)
}今日思维导图：
今日所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>标题</h1>
<script>
/*编写代码必须在script标签中*/
/*打印 console控制台 log日志*/
console.log('hello word');
console.log('你好 世界');
//定义整数变量 int i=1;
//js中所有变量全部使用var来定义
//整数，小数叫做number
var i=10;
var f=1.234;
//定义字符变量 string
var s="哈哈哈";
var s2='数字的值'+f+"hello world";
var s3=`的点点滴滴${f}多多多多多`;//``在tab键位的上方
var s4='a';
//查看类型
console.log(typeof i);
console.log(typeof f);
console.log(typeof s);
console.log(s2);
console.log(s3);
console.log(s4*i);
//NaN(非数字）not a number 不是一个数字
console.log(1/0);
//Infinity 无穷大
//转换
// Integer.parseInt
console.log(parseInt("1.23"))
console.log(parseFloat("1.23"))
//在所有的编程运算中 基本小数的运算都不靠谱
console.log(0.6-0.2);
//小数的取几位
console.log((1.23545).toFixed(2))
// boolean
var f1=true;
var f2=false;
console.log(f1||f2)//true
console.log(f1&&f2)//false
console.log(!f1)//false
console.log(!!f2)//true !!将这个变量变成boolean
//什么情况下会得到false
// 字符串：""为false
// 数字：0为false
// null 也为false
// undefined 未定义 也为false
// NaN 也是false
//短路 如果前面为真就停止，如果为假就往后继续运行
console.log(""||0)//0
console.log(1||0)//1
console.log("2"||"1"||0)//0
//在&&中如果全为真就会运行到最后，如果有假就停止
console.log("2"&&"1"&&1)//1
console.log("2"&&0&&1)//0
var m=prompt("请输入一个数字")
//判断用户到底输入了没有？
// "" 为false ！->true
// null 为false ！->true
if(!m){
alert("输入不准确")
}
console.log(m);
//数组没有类型限制
//数组可以读取任意下标的值
//长度可以任意变化
var as=[1,2,true,4,'a'];//数组
console.log(as[100]);//得到未定义
as[100]="a";//长度101
console.log(as);
as.length=2;
console.log(as);
//定义对象
var stu={
"stu_no":1,
"stu_name":"小明",
"stu_age":38
}
//可以动态的增加属性
stu.stu_address="xx"//给对象新增了地址属性
console.log(stu);
//js中的弹框
//alert("你好吗？");//提示框
//var f4=confirm("确定要删除吗？")//询问框
var f5=prompt("请输入");//输入框
console.log(f5);
// =赋值
// ==比较 无视类型比较
// ===转换类型比较 先比较类型再比较值
console.log(1=="1")
//NaN不能用等于判断 只能使用isNaN
var f6=prompt("请输入星期几")
if(!isNaN(parseInt(f6))){//如果不是非数字
switch(parseInt(f6)){//转成int类型
case 1:
console.log("周一")
break
case 2:
console.log("周二")
break
default:
console.log("你是xx")
}
}
// var j=1;
// while(j<10){
// j++;
// }
//死循环
// while(true){
// }
//for循环
var count=prompt("请输入次数")
for(var i=0;i<count;i++){
//在页面中进行html输出
document.write("<font color='red'>哈哈哈<font><br>")
}
</script>
</body>
</html>
扫一扫
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
