概述
javascript简称js
1.js的特点，基本语法，对象等
2.js的功能，用来操作页面元素，用户交互，浏览器交互，网络数据的请求
后期使用的更多的是js的框架
jquery.js vue.js react.js
JS相关概念
javascript是运行在客户端上的脚本语言，风格类似java。
脚本语言:不需要编译;
js在运行过程中通过浏览器中的js引擎逐行来进行解释并执行的。解释型语言;
类java风格;
弱语言——写法不那么规范;
解释型语言和编译型语言
javascript是运行在客户端上的脚本语言，风格类似java。
脚本语言:不需要编译;
js在运行过程中通过浏览器中的js引擎逐行来进行解释并执行的。解释型语言;
类java风格;
弱语言——写法不那么规范;
js的书写位置
- 行内
- 内部
- 外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>js基础</h1>
<!-- js的书写格式
1.行内书写
2.内部书写
3.外部书写
-->
<!--
onclick : 代表用户点击按钮或者点击元素之后的监听事件
console.log("xxx") 相当于java中的输出语句 System.out.println("xxxx");
行内写法不推荐,一般就是在元素的点击事件中,调用一个js的函数
-->
<button onclick="console.log('你好世界')">我是一个按钮</button>
</body>
<!-- 引入外部js文件 -->
<script src="index.js">
// 如果script标签 引入了外部js文件,那么标签中的内容就没用了
console.log("hello world")
</script>
<script>
// js语言 在行内写法 需要在script标签中书写
console.log("你好 我是内部js");
console.log("你好");
// 要求将script标签写在body的后边, 主要是为了防止页面元素获取失败
var btn = document.querySelector("button");
console.log(btn)
</script>
</html>常的基本功能
// console.log() 代表数据语句 在控制台中显示对应信息s
// console.log("我是输出语句");
//alert("弹出一个提示框")
// alert("我是一个提示");
// 弹出一个带有确定和取消的按钮
// 当前方法的返回值 true false
// console.log(confirm("是否要删除内容"))
// 弹出一个带有输入框的提示
// 会返回一个用户输入的内容,类似于java中Scanner
// console.log( prompt("请输入手机号"));
//通过js在页面上 加载元素
//document 代表当前文档对象
document.write('<div style="width:100px;height:100px;background-color:red;"></div>');
js的命名格则和规范
和java一样
在应用程序中，使用变量来作为值的符号名。变量的名字又叫做标识符，其需要遵守一定的规则。
一个 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开头；后续的字符也可以是数字（0-9）。因为 JavaScript 语言是区分大小写的，所以字母可以是从“A”到“Z”的大写字母和从“a”到“z”的小写字母。
除了每条语句后面的;可以忽略不写，建议加上
注释
-
单行注释 //
-
多行注释 /**/
字面量与变量
字面量是变量的字符串表示形式。它不是一种值，而是一种变量记法。
字面量:当给变量赋值时，等号右边都可以认为是字面量
var a = 1 //1是字面量
var b = 'css' / /css是字面量
var c = [5,6,7] //567是字面量
var d = {"my","box"} //{"my","box"}是字面量
js声明变量
/*
js的变量声明赋值
一般顺序是先声明 ,后赋值,和java一样
不同点:顺序换了之后 有些情况也可以直接使用
java:数据类型 变量名 = 具体的值
// java是根据数据类型绝对 字面量的类型
js:var(let,const) = 具体的值
js是根据 字面量的类型来决定变量的数据类型
*/
// 先声明 后附值
//声明
var name ;
//赋值
name ="张三";
console.log(name);
// 只声明 不赋值
var sex;
console.log(sex);//undefined
//不声明 只赋值
gender = "男";
console.log(gender) //正常
//不声明 不赋值
console.log(className);//className is not defined
var let const的区别
/*
var let const 都是声明一个变量
var作用域比较大(会自动提升变量的作用域),可以声明多个相同变量名的常量
let 只在当前的块级作用域中使用
const 声明一个只读常量
*/
var a =10;
var a =20;
console.log(a);
// if(false){
let c =100;
c=200;
// console.log(c);
// }
// console.log(c);
// const 代表变量是一个只读常量 不能够修改值
const d = 20;// Assignment to constant variable.
d=30;
关键字
break、case、catch、continue、default、delete、do、else、 finally、for、function、if、in、instanceof、new、return、 switch、this、throw、try、typeof、var、void、while、with
保留字
boolean、byte、char、class、const、debugger、double、enum、 export、extends、final、float、goto、implements、import、 int、interface、long、mative、package、private、protected、 public、short、static、super、synchronized、throws、 transient、volatile
数据类型
js中虽然声明变量选择使用var或者let，但是依旧是有数据类型的，数据类型一共有8种;六种基本数据 类型，null，Object数据类型。
基本数据类型: undefined 、boolean、number、bigint、String、symbol;
// boolean false true
// false
let boo1 = true; //true= 1 false =0
let boo2 = false; //true= 1 false =0
//布尔值只能是true或者false; 使用布尔值参加运算的时候，true转换为1，false转换为0;
console.log(boo1 + boo2);
//number 包含整数和小数 理解为 java中的int double float类型
//bigint 需要在字面量后面添加n 来表示
let num1 = 100n;
let num2 = 100.05;
let numStr = "123";
//通过Number() 将字符串转换为number数字类型
let num3 = Number(numStr);
//通过isNaN()函数判断 这个字符串是否不是数字
console.log(isNaN(numStr))
console.log(numStr);
console.log(num3);
// typeof 查看当前变量是什么数据类
console.log(typeof num1)
/*
推荐使用 '字符串' ;
可以通过字符串.length获取字符串的长度; 也可以使用+进行拼接字符串;
*/
let name = '张三';
console.log(name.length)
// document.write(' <div class="box1">'+
// name+
// '</div>'+
// '<div class="box2">'+
// 'box2'+
// '</div>')
// `` 反引号 模板字符串
// 通过${} 可以在模板字符串中引用外部的变量名
document.write(`
<div class="box1">
${name}
</div>
<div class="box2">
box3
</div>
`)数据类型的转换
undefined和null的区别
可以对变量赋值为null: var 变量名 =null;
undefined和null对比
undefined和null都表示“无，没有”，都是js中的数据类型
如果把变量a分别赋值undefined和null，这两种写法基本等价
如果应用在if语句中，则两者都会被自动转成false
区别：
null 空对象，赋值了的但是内容是空的
Undefined表示没有赋值进行+1计算的时候 undefined是NAN
Null 还是1你可以定义一个值为null，证明它是空的，但如果你定义它是undefined（未被定义的），逻辑上不合理，尽管你可以这样做
运算符
/*
js和java中的运算符 完全一致
算数运算符 + - & / % += -=...
比较运算符 < > >= <= == !=
js 特有的 === !==
逻辑运算符 && || & |
位运算符
三元运算符
(逻辑表达式)?表达式1:表达式2
*/
// == 只比较变量的值是否相同 ===比较变量的值和数据类型是否都相同
let a = 10;
let b ='10';
// 忽略对象本生的数据类型 只比较值
console.log(a==b);
console.log(a===b);
js数组
/*
java中的数组
int [] arr = new int [10];
int [] arr ={1,2,3,4};
js中的数组
// 使用new关键字创建数组:
var 数组名字 = new Array();// 第二种方式: 通过字面量进行创建数组:
var 数组名字 =[元素1,元素2,...元素n];
*/
// 动态创建 创建一个长度为0的数组
var nameArr = new Array();
nameArr[1]=20;
console.log(nameArr)
// 静态创建
var ageArr = [1,2,3,4,5,null,true,"123a",123n];//0-5的索引长度为6的数组
console.log(ageArr)
/*
js数组和java的区别
js数组不需要指定数据类型,可以将任何的元素存储进来
如果在java中数组的索引为负数或者操作了最大索引 会提示indexoutofbounds错误
但是在js中 不会有这个错误 只会提示为undefind
在java中如果要在最大索引以外的索引上添加元素 那么需要数组扩容
在js中不需要 直接添加就可以
*/
console.log(ageArr[5])
ageArr[6] = 100;
console.log(ageArr)数组转换字符串
// 数组的操作
console.log( ageArr.toString())
console.log( ageArr.join())
console.log( ageArr.join("-"))
console.log( ageArr.toLocaleString())
