JavaScript-1

基础认知

认识 JavaScript

是什么?
	JavaScript是一种运行在客户端(浏览器)的编程语言,能够实现人机交互效果

做什么?
	网页特效(监听用户的一些行为,让网页做出对应的反馈)
	表单验证(针对表单数据的合法性进行判断)
	数据交互(获取后台的数据,渲染到前端)
	服务端编程(node.js)

JavaScript 组成

  • ECMAScrpt:规定了js基础语法核心知识(比如:变量、分支语句、循环语句、对象等)
  • Web APIs
    • DOM:操作文档(比如:对页面元素进行移动、添加、删除等操作)
    • BOM:操作浏览器(比如:页面弹窗、检测窗口宽度、存储数据到浏览器等等)

JavaScript 位置

内部 JavaScript

<body>
    <div class="box">
        <p>你好,世界p>
    div>

    
    
    <script>
        // 在这里书写Javascript代码

        alert("Hello World")    // 页面弹出警示框

    script>
body>
具体位置:直接写在html文件里,用script标签包围JavaScript代码

书写规范:script标签写在的上面

外部 JavaScript


    

你好,世界

代码写在以.js结尾的文件里,通过script标签,引入到html页面中

内联 JavaScript


    

代码写在标签的内部

注意:此处作为了解即可,但是后面的vue框架会使用这种模式!

语法速查

MDN 官网:https://developer.mozilla.org/zh-CN/

注释

单行注释:
	符号://
	VS Code快捷键:Ctrl + /
	
块注释:
	符号:/* */
	VS Code快捷键:Shift + Alt + A (注意:此快捷键可能与系统的截图快捷键冲突,可在VS Code中修改为其他快捷键)

结束符

    <script>
        alert("Hello World");
    script>
JavaScript 的结束符是";"

作用:使用英文的;代表语句结束

实际情况:实际开发中,可写可不写,浏览器(JavaScript 引擎)可以自动推断语句结束的位置

现状:越来越多的人主张省略结束符

约定:为了风格统一,结束符要么每一句都写,要么每一句都不写(按照团队要求)

输入

prompt

<body>
    <script>
        prompt('请输入您的姓名')
    script>
body>
作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字

输出

write

<body>
    <script>
        // 输出内容到文档中
        document.write('
我是div标签
'
) document.write('

我是一级标题

'
)
script> body>
语法:document.write()

作用:向body内输出内容

注意:如果输出的内容写的标签,也会被解析成网页元素。

alert

<body>
    <script>
        alert("警示")
    script>
body>
作用:页面弹出警告对话框

console.log

<body>
    <script>
        console.log('输出内容到控制台')
    script>
body>
作用:输出到控制台,程序员调试时使用

变量

命名规范

规则:
	1.不能使用关键字
	2.只能用下划线、字母、数字、$组成,且不能数字开头
	3.字母严格区分大小写
	
规范:
	1.起名要有意义
	2.遵守小驼峰体命名法(例如:userName)

声明变量

<body>
    <script>
        // 声明变量
        let temp
        
        // 声明变量的同时,进行赋值
        let age = 18
        let name = 'Jack'
        
        // 一次性声明多个变量
        let a, b
        let c = 10, b = 'hello world'
        
        // 为了更好的可读性,一般声明多个变量采取"一行只声明一个变量"的形式
        let data1
        let data2
        let data3
        
    script>
body>
语法:
	let 变量名

更新变量


    

更新变量:变量赋值后,还可以更新它的值

注意:let 不允许多次声明一个变量

let 与 var

let 和 var 的区别

  • 在较旧的 JavaScript 中,使用关键字 var 来声明变量,而不是 let

  • 现在的开发中一般不再使用 var ,只是我们可能在老版本的程序中看到它

  • let 解决了 var 的一些问题,更加先进!

var 声明

  • 可以先使用,再进行声明(不合理)
  • var 声明过的变量可以重复声明(不合理)
  • 变量提升、全局变量、没有块级作用域等

数组

<body>
    <script>
        // 定义数组
        let nums = []

        // 赋值操作
        nums[0] = 10
        nums[1] = 20

        // 定义并初始化
        let names = ['Jack', 'Tony', 'Peter']

        // 输出数组元素
        console.log(nums[0])
        console.log(nums[1])
        console.log(names[0])
        console.log(names[1])
        console.log(names[2])

        // 输出数组长度
        console.log(names.length)
    script>
body>
概念:一种将"一组数据存储在单个变量名下"的优雅方式

语法:
	let arr = []

常量

<body>
    <script>
        const PI = 3.14
        console.log(PI);
    script>
body>
概念:使用 const 声明的变量称为"常量"

使用场景:当某个变量永远不会改变时,就可以用 const 来声明,而不用 let

注意:常量不允许重新赋值,这意味着声明的时候就必须进行初始化

规范:英文全部大写(可以不遵守)

数据类型

基本数据类型

类型名称 Type Name
数字型 number
字符串型 string
布尔型 boolean
未定义型 undefined
空类型 null

引用数据类型

类型名称 Type Name
对象 object

数字类型

算术运算符

<body>
    <script>
        // 求余数:
        console.log(5 % 3);     // 结果为 2
    script>
body>
"数学运算符"也叫"算术运算符",主要包括以下几个部分:
加(+)	减(-)	乘(*)	除(/)	取余(%)

优先级:
	1.括号
	2.乘、除、取余
	3.加减

NaN

NaN:not a number

NaN 代表计算错误!它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的,任何对 NaN 的操作都会返回 NaN(例如:NaN + 6 的结果还是 NaN)

字符串类型

认识字符串

<body>
    <script>
        let name = 'Jack'       // 使用单引号
        let gender = "male"     // 使用双引号
        let goods = `HUAWEI`    // 使用反引号
        let tel = '13636975625' // 字符串
        let str = ''            // 空字符串
    script>
body>
1.通过单引号、双引号、或反引号包裹的数据都是字符串

2.单引号和双引号没有本质上的区别,推荐使用单引号!

3.必要时可以使用转义符"\",输出单引号和双引号

字符串拼接

<body>
    <script>
        let age = 30
        document.write('年龄:' + age + '岁')
    script>
body>

运行结果:
	年龄:30岁

模板字符串

<body>
    <script>
        let age = 30
        document.write(`Jack已经${age}岁了`)
    script>
body>

运行结果:
	Jack已经30岁了
语法:
	用"反引号"去包含字符串,遇到变量则使用 ${变量}

布尔类型

<body>
    <script>
        let isCool = true
        isCool = false
        console.log(isCool);
    script>
body>

未定义类型

基本介绍:
	"未定义"是比较特殊的类型,只有一个值 undefined

什么情况出现未定义类型?
	只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少(直接)为某个变量赋值为 undefined

使用场景:
	我们开发中经常生命一个变量,等待传送过来的数据,如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是 undefined,就判断用户是否有数据传递过来

空类型

<body>
    <script>
        let obj = null
        console.log(obj)
    script>
body>

null 和 undefined 的区别

  • undefined 表示没有赋值
  • null 表示赋值了,但是内容为空
  • 计算有明显区别
    • undefined + 1 的结果为 undefined
    • null + 1 的结果为 1

检测数据类型

<body>
    <script>
        let num = 10
        console.log(typeof num)
    script>
body>
typeof 运算符可以返回被检测的数据类型,它支持两种语法格式
	1.作为运算符:typeof x	(常用的写法)
	2.函数形式:typeof(x)
	
提示:有括号和没有括号,得到的结果是一样的,所以我们直接使用"运算符"的写法

类型转换

隐式转换

规则:
	+ 号两边只要有一个是字符串,都会把另外一个转成字符串
	除了 + 以外的算术运算符,比如 - * / 等都会把数据转成数字类型

缺点:
	转换类型不明确,靠经验才能总结

显示转换

<body>
    <script>
        let str = '123'
        console.log(Number(str))                // 123
        // ---------------
        console.log(parseInt('12px'))           // 12
        console.log(parseInt('12.78px'))        // 12
        console.log(parseInt('13.14Love'))      // 13
        // ---------------
        console.log(parseFloat('12px'))         // 12
        console.log(parseFloat('12.678px'))     // 12.678
        console.log(parseFloat('13.14Love'))    // 13.14
        // ---------------
        console.log(parseInt('abc3.14'))        // NaN
        console.log(parseFloat('abc3.14'))      // NaN
    script>
body>
为了避免"隐式转换"带来的问题,通常需要对数据进行显示转换

语法:
	Number(数据)
	// 转成数字类型
	// 如果字符串内容里面有非数字,转换失败时结果为 NaN(Not a Number)

	parseInt(数据)
	// 只保留整数(具有去除非数字部分字符的能力)
	
	parseFloat(数据)
	// 可以保留小数(具有去除非数字部分字符的能力)

你可能感兴趣的:(前端-JavaScript,javascript)