JavaScript初学者——介绍和使用

最新推荐文章于 2024-10-17 09:40:47 发布

yoghurt&girl

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量139

点赞数

分类专栏： web前端开发 JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ywforever/article/details/126530360

版权

web前端开发同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 1 订阅

订阅专栏

一、介绍JavaScript

JavaScript是一种函数优先的轻量级、解释型/及时编译的语言，支持面向对象、命令式和声明式。

前端三层

结构层:HTML

表现层:css

行为层:Js

JavaScript由哪部分组成：

ECMAScript(全称:欧州计算机协会)【语法】

DOM(文本对象模型)

BOM（浏览器对象)

1、js的注释和引入方式

/* */ 多行注释

// 单行注释

放置位置：

body标签里面

head标签里面

html里面

html外面

css样代里面:【不可以】

（1）行内引入

直接写在标签内

（2）内部引入

# 建议放在HTML结构最后

特点：
优点：便于维护。平常我们使用的也是比较多的。
缺点：仅限于当前页面的使用，无法重复使用，代码冗余度较高

（3）外部引入

#引入js文件（src引入，此标签内不能写内容）
<script src="路径"></script>

2、常用打印和使用方法

//打印
        alert('123')//函数API
        console.log(123)//多用于调试
        confirm('一起去玩吗？')//会有确认提示
//用户输入
prompt(‘提示内容’)

//页面上写内容（识别标签）-写到html文档中
document.write(‘书写内容’)
//格式化字符串【写入到控制台】
console.log(`姓名：${name}`)
// 返回对象的个数（对象、数组、字符串）
对象.length
//检测数据类型
typeof 数据

3、获取元素-DOM

//id获取    
console.log(document.getElementById('box'))

//类名获取 是一个集合
console.log(document.getElementsByClassName('wrap'))

//标签获取
console.log(document.getElementsByTagName('div'))

//querySelectorAll 是一个集合【不管是一个或多个】
  console.log(document.querySelectorAll('.wrap'))   console.log(document.querySelectorAll('#id'))

//querySelector 获取到单个
console.log(document.querySelector('.wrap'))

二、基本数据类型

变量的数据类型根据=后面的值来判断

typeof用于判断数据类型

1、静态类型和动态类型

静态数据类型
number	数字型，控制台输出为蓝色
string	字符型，可用双引号或单引号，控制台为黑色
Boolean	布尔值，有true和false两个值
undefined	未定义【假值】，控制台浅灰色
null	空值

六大假值有：

false

0

“”-空字符串

null

undefined

NaN

2、类型转换

（1）转换为字符串

//变量.toString()
 var s1 = 332;
 console.log(s1.toString())

//String强制转换
console.log(String(s1))

// +号拼接字符串
 console.log('转为字符' + s1)

（2）转换为数字型

//parseInt(string类型)——取整
 console.log(parseInt('20'))

//parseFloat——浮点数
 console.log(parseFloat('28.18'))

//number强制转换
 var s1 = '32';
 console.log(Number(s1))

// *、/、-
console.log(s1 - 1)

（3）字符串的方法

//1、indexof-检索 
var str = "刚刚执行的代码。真的好难"
 console.log(str.indexOf("执行"))//匹配字符，结果为3，-1是匹配不到

//2、拼接字符串-concat
 var str3 = "A同学：难死了！"
 var str4 = str.concat(str3, "B同学：对对对！")
   console.log(str4)

//3、substring、substr-提取字符串中介于两个指定下标之间的字符
 console.log(str.substring(0, 7))//均为下标位置
 console.log(str.substr(2, 7))//第二个值为个数

//slice() 方法可从已有的数组中返回选定的元素。
 console.log(str.slice(2, 0))
 console.log(str.slice(2, -1))//负数表示倒数第几个开始截取

//大小写转换
  console.log(str5.toUpperCase())
  console.log(str6.toLowerCase())

//match进行匹配,返回所在位置以及那个语句中
        console.log(str5.match('thr'))
//search():检索 空格也算一个字符
        console.log(str5.search('boy'))
//replace替换
        console.log(str3.replace("难", "阿西吧,难"))

三、变量的使用和声明

变量：把需要的内容进行保存起来；

声明多个变量用逗号隔开

#var：声明一个变量。可初始化一个值
var sex;
console.log(sex)
- 只声明不赋值=》undefined
console.log(tel)
- 不声明不赋值=》报错
q=123
console.log(q)
- 不声明直接赋值使用=》能运行

#let：声明一个块作用域的局部变量，可初始化

#const:声明一个块作用域的只读常量

用 `var` 或 `let` 语句声明的变量，如果没有赋初始值，则其值为 [`undefined`]