一 基本语法
js的创建方式:行内式、内部、外部
1.行内式的创建
- a标签 弹窗事件
<a href= "javascript:alert('我是行内式的js1111');">点击跳转到百度首页</a>
-非a标签 绑定事件
<button onclick="alert('我是行内式的js2222')">点击<button>
行内式创建 javascript:;（防止a标签刷新）是一段js语句 弹窗事件
2.内部的创建
-可以在当前html文件的任意地方创建 script标签(脚本)
-书写js语法即可
3.外部的创建
-在外部创建一个js文件 在这个文件中书写规范的js语法
-在html文件中使用script标签引入外部的js文件即可
4 总结
- js文件建议放在body的下面 html+css+js的加载顺序问题
- 行内式了解一下就阔以了 基本上不用
- 内部和外部不能共用一个script标签!
-外部js可以放在html页面的任意地方
-外部的引入方式使用src 切记不是href(link)
二
注释的快捷键和html、css一样的 ctrl+/
-单行注释 // 把需要注释的代码写在斜杠的后面
-多行注释 /* 把需要注释的代码写在中间 */
web的组成部分:html+css+js
html+css:xhtml、xml
js组成部分
- DOM:文档对象模型 document object model
- BOM:浏览器对象模型
- ECMAScript:规范
三、js的变量使用:用来储存数据的容器
1.如何去创建容器 关键字 var(variable:adj/n 多变的/变化的)
var 变量名字
2.变量名的取名规范
-不能用中文、特殊符号、纯数字
- html+css出现的属性、属性值、标签名字这些不要用
-尽量语义化一点
-关键字和保留字
-关键字:计算机已经使用到的一些英文单词
-保留字:现在没有 但是以后可能会用得上
-取名如果大小写不一样 表示多个变量
3.储存数据 用一个符号=
第一种创建方式
var gf = '如花' 引号引起来 单双引号都可以
第二种创建方式
var GF
GF = '翠花'
第三种创建方式
var a,b
a='狗蛋'
b='狗剩'
第四种创建方式
var c = d = '二狗子'
4、 注意
-声明变量的时候用的是关键字var 在var的后面需要加一个空格再写变量名称
-声明变量的时候var是可以省略的,建议还是写上
-需要注意重新赋值的操作
-由于js没有那么严格规范,在每一句js语句结束后可以加分号也可以不加分号
5、变量的总结:
-声明变量时候需要注意不要使用一些奇怪的符号 name1、_name
-赋值操作 左侧是变量 右侧是值 把右侧的值给到左侧的变量
-分号可加可不加
6、js的输出方式
-alert()表示浏览器的弹窗 用户提示警告
- document.write()可以在浏览器的显示区域显示文本
- console.log()重要 表示浏览器的日志
- confirm()提示
-prompt()可以和用户交互的方式
document.write('<b>文本~') //不仅可以输出文本 还可以输出标签
confirm('你确定要删除好友吗?')
prompt('请输入您的银行卡密码')
四、js数据类型分类
-检测数据类型需要使用方法 typeof(检测的数据) / typeof 检测的数据
1 var a = 1
console.log(typeof a) // number数字类型
2 var b = '文本'
console.log(typeof b) // string字符串 只要用了引号引起来的部分都是字符串(键盘能敲出 来的所有字符)
3 var c //只声明了 没有赋值
console.log(typeof c) // undefined未定义
4 var d = false
console.log(typeof d) // boolean布尔类型(true/false) 表示事物的两面性
var e = [ ] //数组 属于object
var f = { } //对象 集合 属于object
var g = null //空 属于object - 万物皆对象
console.log(typeof e,typeof f,typeof g)
5 数据类型分类的总结
- number数字类型(正数、负数、0)
- string字符串类型(只要加了引号的都是字符串)
- undefined未定义(只声明没有赋值)
- boolean布尔类型(true和false)
- object
-数组
-对象
- null
拓展:除了以上这些数据类型 还有以下
- symbol(ES6)
- bigint(ES10)
-数据类型可以分为基本数据类型和引用数据类型
五、其他数据转换为数字类型:用户在输入框内默认的数据类型是字符串
1.将字符串类型转换为数字类型
-语法: Number(转换的数据)
-控制台中黑色的字体是字符串,转换为数字类型后字体显示为蓝色的
-如果引号里面是数字会转换为数字类型,如果引号里面是非数字 显示NaN(not a number)
var a = '你好'
var a1 = Number(a)
console.log(a,a1)
console.log(typeof a,typeof a1)
2.将数据转换为数字类型
-语法:parseInt(转换的数据)
-可以将字符串转换为数字类型并且取整
var b = '2.9999'
var b1 = parseInt(b)
console.log(b,b1)
3.将数据转换为数字类型
-语法:parseFloat(转换的数据)
-将字符串转换为数字类型并且保留小数(浮点数)
var c = '2.999'
var c1 = parseFloat(c)
console.log(c,c1)
4.将数据转换为数字类型
-语法:Math.round(转换的数据)
-将字符串转换为数字类型并且四舍五入(小数位后的第一位)
var d = '2.49'
var d1 = Math.round(d)
console.log(d,d1)
一些不常用但是面试会遇到的转换关系
1.布尔类型转换为数字类型
- Number()和Math.round()方法得到的是1(true)和0(false)
- parseInt()和parseFloat()方法得到是NaN
var e = true/false
console.log(Number(e)) // 1/0
console.log(parseInt(e)) // NaN
console.log(parseFloat(e)) // NaN
console.log(Math.round(e)) // 1/0
2.将undefined转换成数字类型
-转换为数字类型没有道理 全是NaN
var f = undefined
console.log(Number(f)) // NaN
console.log(parseInt(f)) // NaN
console.log(parseFloat(f)) // NaN
console.log(Math.round(f)) // NaN
3.将null转换为数字类型
- Number()和Math.round()方法得到的是0
- parseInt()和parseFloat()方法得到是NaN
var g = null
console.log(Number(g)) //0
console.log(parseInt(g)) // NaN
console.log(parseFloat(g)) // NaN
console.log(Math.round(g)) // 0
六 将其他数据类型转换为字符串类型
- 方法1:String(转换的数据)
-方法2:转换的数据 .toString()
1.将数字类型转换为字符串类型
-两种方法都可以转换为字符串类型
var a = 1
console.log(String(a))
console.log(a.toString())
2.将布尔类型转换为字符串类型
-给布尔类型添加了引号变成字符串
var b = true
console.log(String(b))
console.log(b.toString())
3.undefined转换为字符串类型
- String()转换会变换成字符串的undefined
-转换的数据.toString()转换成字符串会报错
var c = undefined
console.log(String(c))
console.log(c.toString()) //报错了 程序在这个位置就已经终止了
4.将null转换为字符串类型
- String()转换会变换成字符串的null字符串
-转换的数据.toString()转换成字符串会报错
var d = null
console.log(String(d))
console.log(d.toString())
七、转换为布尔类型
-方法:Boolean(转换的数据)
1.将数字类型转换为布尔类型
-非0都是true 0转换为false
var a = 0
console.log(Boolean(a))
2.将字符串转换为布尔类型
-引号里面有字符的时候为true 没有字符为空的时候转换为false
var b = ' '
console.log(Boolean(b))
3.将undefined转换为布尔类型 false
var c = undefined
console.log(Boolean(c))
4.将null转换为布尔类型 false
var d = null
console.log(Boolean(d))
八 js的运算符
数学运算符:针对于数字类型进行计算
+ - * / %
求余数
a > b余数是除不尽剩下的数
a < b余数就是a的本身
var a = 5
var b = 6
console.log(a+b) // 9
console.log(a-b) // -3
console.log(a*b) // 18
console.log(a/b) // 0.5
console.log(a%b) // 5
需要注意:数学运算只针对于数字类型
特殊情况: +字符串拼接
-如果是字符串的情况下 加号会是字符串拼接
-在加号的某一边是字符串,转换为字符串的拼接
var c = '你'
var d = 6
console.log(c+d)
少见的情况undefined和null之间的使用
var e
var f = null
console.log(e+f) // NaN
赋值运算符:
= += -= *= /= %=
var a = 1 //赋值
a += 2 // a = a + 2先相加后赋值
console.log(a)
var b = 2
b -= 1
console.log(b)
var c = 4
c *= 2
console.log(c) // 8
var d = 2
d/=2
console.log(d) //1
var e = 2
e %= 3
console.log(e) // 2
比较运算:得出的结果都是布尔值
> < >= <= == === != !==
1.>大于号
2.<小于号
3.<=小于等于
4.>=大于等于
5.==在js语言中一个等号表示赋值的 两个等号
6.===强等、恒等
7.!=不等于
var a = 1
var b = 2
console.log(a>b) // false
console.log(a<b) // true
console.log(a<=b) // true
console.log(a>=b) // false
var c = 1
var c1 = '1'
console.log(c==c1) // true 比较的是值，不管数据类型 console.log(c===c1) // false 比较的是数据类型和值
var d = 1
var d1 = '1'
console.log(d!=d1) // false
console.log(d!==d1) // true
注意: = == ===
一个等号表示赋值
两个等号表示比较值
三个等号表示比较的是类型和值
逻辑运算符:
&& || ! (与或非)
&& 并且 条件1&&条件2&&条件3...
|| 或者 条件1||条件2||条件3...
var age = 28
var res = age>=18 // 返回一个结果 true/false
console.log(res)
与
var height = 150
var money = 10
var res1 = height>=180 && money>=1000000
console.log(res1)
或
var height = 180
var money = 10
var res2 = height>=180 || money>=1000000
console.log(res2)
! 取反
var CG = true
console.log(!CG)
年龄18 ~ 60
var _age = 18
var _res = _age >= 18 && _age<=60
（var _res = 18<=_age<=60 // 这样写是没有错的 但是是不符合js语法规范的 所有不建议这样写）
console.log(_res)
逻辑运算符:
&& || !
1 .并且 串联 满足两个或者多个才会输出true
- true && false => false
- true && true => true
- false && false => false
- false && true => false
2.或者 并联 满足一个条件就可以输出true
- true || false => true
- true || true => true
- false || false => false
- false || true => true
3.取反 ! - true => false - false =>true
自增自减运算
1.自增运算
++变量
变量++
2.自减运算
--变量
变量--
注意
- 加号和减号在前在后是一样的
- 当自增自减遇到了运算或者输出的时候是有区别的
- 符号在前的先运算后输出
- 符号在后的先输出再运算
var a = 1
（a++ // a = a + 1 只是在当前的变量加1 不是加变量）
console.log(a++) // 先输出 输出是自己初始的值
// 再下一个输出或者运算的值
console.log(a)
var b = 2
console.log(b--)
console.log(b)
