Javascript基础--001

最新推荐文章于 2024-08-16 19:02:09 发布

小冯的学习历程~

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量76

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44362304/article/details/131295904

版权

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}`)

小冯的学习历程~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Javascript基础--001

Javascript是一种在浏览器上的编程语言，由ECMAscript和WebAPIBOM和DOM）组成//实现点击按钮更改样式<body><script>let bts=document.querySelectorAll('button') //获取所有的buttonfor(i=0;i++){ //循环遍历bts[i].addEventListener('click',function(){ //添加点击事件。
复制链接

扫一扫