目录
JS介绍
Javascript是什么,由什么组成?
-
Javascript是一种在浏览器上的编程语言,由 ECMAscript和WebAPI(BOM和DOM)组成
//实现点击按钮更改样式
<body>
<button class='pink'>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<script>
let bts=document.querySelectorAll('button') //获取所有的button
for(i=0;i<bts.length;i++){ //循环遍历
bts[i].addEventListener('click',function(){ //添加点击事件
document.querySelector('.pink').className='' //1 先将当前classname为空
this.className='pink' //2 再给当前点击的button元素添加classname
})
}
</script>
</body>
JS书写位置
-
css
-
行内样式表 <div style="bgclor='red’"></div>
-
内部*** <style></style>
-
外部*** <link rel="stylesheet" type="text/css" href="./style.css"/>
-
-
js
-
行内javascript (在标签内部)
-
内部** <script></script> 写在</body>的上方
-
顺序加载 ,不然会因为有的html尚未被加载而失效
-
-
外部** <script src="my.js"></script>
-
JS 输入输出语法
-
输出语法
-
方法一:document.write
-
<script> document.write('要输出的内容,可输入标签') // eg. document.write('<h1>我是标题</h1>') </script>
-
-
方法二:alert(‘ ’)
-
方法三:console.log(‘ 控制台打印输出’)
-
-
输入语法
-
prompt(‘’)
-
JS 代码执行顺序
从上向下
字面量
字符串字面量
数字字面量
数组字面量
对象字面量
变量
-
“容器”,用来存储数据
使用变量
-
声明/定义 变量
let name
-
賦值
name=feng
-
调用
console.log(name)
注:let 不允许多次声明一个变量
//声明单个变量 (提倡)
let num = 20
let uname = 'fff'
// 声明多个变量
let num=20,uname = 'fff'
// 交换变量的值
let num1=10
let num2=20
let n // 定义一个临时变量来存取
console.log("num1:"+num1+"num2:"+num2)
document.write("num1:"+num1+"num2:"+num2)
n=num1
num1=num2
num2=n
console.log("num1:"+num1+"num2:"+num2)
document.write("num1:"+num1+"num2:"+num2)
// 临时变量不用自动销毁
变量的本质
在计算机内存中申请一块存放数据的小空间
变量的命名规则和规范
-
不能用关键字
-
只能用下划线、字母、数字、$组成,不能用数字开头
-
JS严格区分大小写
-
起名要有意义,小驼峰命名法 eg. userName
let 和 var 的区别!!!
let为解决var存在的一些问题
-
var可以先使用再声明(不合理)
-
var可以对同一变量重复声明(不合理)
-
变量提升、全局变量、没有块级作用域
数组
数组可以存储多个数据
let names=['fff','zzz','sss','lll']
常量
指某个值永远不会改变,用const声明
-
不允许更改
-
必须初始化
const PI=3.14
JS数据类型
-
基本数据类型
-
number(不区分小数、正数、负数、整数)
-
string(单引号、双引号)
-
boolean(true / false--》布尔型字面量)
-
undefined (只声明,未赋值,默认为undefined)
-
null (表示赋值了,但内容为空)
-
-
引用数据类型
-
object
-
检测数据类型
typeof x
typeof(x)
模板字符串
let age=18
document.write(`我今年${age}岁了`)
- 反引号 ` `
- 内容拼接变量时,用${}包住变量
类型转换
隐式转换
- 两边只要有一个字符串,都会把另一个转换为字符串 (任何数据和字符串相加结果都是字符串)
- 除了+以外的算术运算符,- * / 等都会把数据转换成数字类型
console.log(1+1)
console.log('pink'+1) //pink1
console.log(2+2);
console.log(2+'2'); // 22
console.log(2-2);
console.log(2-'2'); // - 有隐式转换 把'2'隐式转换为2
console.log(+12) //12
console.log(+'123') //123 // +作为正号解析可以转换为数字型
显式转换
- Number(数据)
- NaN也是Number类型,代表非数字
- parseInt(数据)
- parseFloat(数据)
let num1=+prompt('请输入第一个数字') // prompt生成字符型,需要转换为数字型
let num2=+prompt('请输入第二个数字')
alert(`两个数相加的和是:${num1+num2}`)