JavaScript-1
JavaScript-1
基础认知
认识 JavaScript
是什么？
JavaScript是一种运行在客户端（浏览器）的编程语言，能够实现人机交互效果
做什么？
网页特效（监听用户的一些行为，让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）
JavaScript 组成
ECMAScrpt：规定了js基础语法核心知识（比如：变量、分支语句、循环语句、对象等）
Web APIs
DOM：操作文档（比如：对页面元素进行移动、添加、删除等操作）
BOM：操作浏览器（比如：页面弹窗、检测窗口宽度、存储数据到浏览器等等）
JavaScript 位置
内部 JavaScript
< body> < divclass = " box" > < p> p > div > < script>
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 的区别 ：
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
引用数据类型
数字类型
算术运算符
< body> < script>
console. log ( 5 % 3 ) ;
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 > 模板字符串
< body> < script>
let age = 30
document. write ( ` Jack已经 ${ age} 岁了 ` )
script > body > 语法：
用"反引号"去包含字符串，遇到变量则使用 ${变量}
布尔类型
< 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) )
console. log ( parseInt ( '12px' ) )
console. log ( parseInt ( '12.78px' ) )
console. log ( parseInt ( '13.14Love' ) )
console. log ( parseFloat ( '12px' ) )
console. log ( parseFloat ( '12.678px' ) )
console. log ( parseFloat ( '13.14Love' ) )
console. log ( parseInt ( 'abc3.14' ) )
console. log ( parseFloat ( 'abc3.14' ) )
script > body > 为了避免"隐式转换"带来的问题，通常需要对数据进行显示转换
语法：
Number(数据)
// 转成数字类型
// 如果字符串内容里面有非数字，转换失败时结果为 NaN（Not a Number）
parseInt(数据)
// 只保留整数（具有去除非数字部分字符的能力）
parseFloat(数据)
// 可以保留小数（具有去除非数字部分字符的能力）
你可能感兴趣的:(前端-JavaScript,javascript)
