JavaScript基础语法
文章目录
JavaScript入门
1.JavaScript介绍
JS是一种客户端脚本语言，运行在客户端的浏览器中。每一个浏览器都具备解析JS的引擎。
脚本语言：不需要编译就可以被浏览器直接解析执行。
核心功能：增强用户和HTML页面的交互过程，让页面具有一些动态效果，从而增强用户的体验。
2.快速入门
2.1 创建一个HTML
2.2 在标签下面编写一个
2.3 可以在script标签下编写js代码
2.4 通过浏览器执行
引入js的方式一：内部方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="f()">点我</button>
</body>
</html>
<script>
function f(){
alert("点我有啥事？")
}
</script>
引入js的方式二：外部方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/firstjs.js"></script>
</head>
<body>
<button onclick="f()">点我</button>
</body>
</html>
------------------------------------------------
function f(){
alert("点我有啥事？")
}
3.注释
单行注释：
//注释的内容
多行注释：
/*
注释的内容
*/
4.基本的语法
4.1 输入输出的语法
alert("弹出警告框");
//基本的输入框
prompt("请输入您的年龄");
console.log("控制台输出");
document.writeln("页面内容输出");
4.2 变量和常用
//变量
function f(){
let name="张三";
var age=12;
document.write(name+","+age+"<p>456</p>")
document.write(123)
}
//var和let的区别:var的作用域是整个函数(java中的方法)，let的作用域是一个块(比如for循环的循环体)
//---------------------------------------------------
//常量
function f(){
//在js中常量也不可以被修改 否则会在控制台报错
const PI=3.1415926;
//PI=3.14;
document.write(PI);
alert(123456)
}
4.3 原始数据类型和typeof方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOiD04AB-1621338220273)(C:\Users\机械师\Desktop\XJA_JavaWeb\JavaScript\img\原始数据类型.png)]
原始数据类型：number,string,boolean,null,undefined
function f(){
//number
var num=3.5;
//string
var str="这是字符";
//boolean
var flag=false;
//null
var name=null;
//undefined
var age;
alert(typeof(age))
//typeof(变量) 返回变量的数据类型
}
4.4 运算符
4.4.1赋值运算符
4.4.2算术运算符
4.4.3逻辑运算符
4.4.4比较运算符
//三目运算符
//语法 (比较表达式)？表示1：表示2
//比较表达式为true 取表达式1 反而取2
var num1 = 123;
var num2 = "123";
var flag = num1==num2?1:2;
alert(flag)
4.5 流程控制和循环语句
function f(){
var age = prompt("请输入您的年龄");
var sex = prompt("请输入您的性别")
//年龄小于20的女性 老板要
//年龄大于20 的女性 老板勉强要
//性别为男的 隔壁保安部报道
if(age<20&&sex=="女"){
document.write("办公室等着你。")
}else if(age>20&&sex=="女"){
document.write("也可以")
}else{
document.write("保安部报道")
}
}
//switch语句和java一致
function f(){
var month = 5;
switch (month){
case 1:
case 2:
case 3:
document.write("春季")
break;
case 4:
case 5:
case 6:
document.write("夏季")
break;
case 7:
case 8:
case 9:
document.write("秋季")
break;
case 10:
case 11:
case 12:
document.write("冬季")
break;
default:
document.write("输入有误")
break;
}
}
//js中的循环
//for循环
//while循环
function f(){
for(let i=0;i<5;i++){
console.log(i)
}
let j=0;
while(j<5){
document.write(j);
j++;
}
}
4.6 数组
//数组的使用和Java中的数据基本一致。但是JS中的数据更加灵活，数据类型和长度没有限制
//索引也是从0开始。获取数组长度使用length属性
//4.6.1 定义数组并且遍历
var arr = [100,200,300];
for(let i=0;i<arr.length;i++){
document.write(arr[i])
}
//4.6.2 复制数组
var arr = [100,200,300,"张三"];
var arr2 = [...arr];
for(let i=0;i<arr2.length;i++){
document.write(arr2[i])
}
//4.6.3 合并数组
var arr = [100,200,300,"张三"];
var arr2 = [40,500,600];
var arr3 = [...arr,...arr2];
for(let i=0;i<arr3.length;i++){
document.write(arr3[i])
}
//4.6.4 字符串转换成数组
let arr = [..."zhangsan"]
for(let i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>")
}
4.7 函数
//函数类似于Java中的方法。可以讲一些代码进行抽取提高复用性
//普通函数
function 函数名(参数列表){
函数体
return 返回值；
}
//可变参数函数
function 函数名(...参数){
函数体
return 返回值；
}
//匿名函数
function(参数列表){
函数体
return 返回值；
}
7195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
