JS开始了-CSDN博客

什么是JavaScript

JS一门动态脚本语言主要运行在浏览器里， nodejs是一种运行环境，可以让js运行在服务端（后端能力）

JS中的引入方式

行内式（一般不用）
内嵌式（JS较少时使用）
外链式（JS较多时使用）

JS一般放在body底部，为了保证能够在JS中获得到加载后的元素，一般都把JS放在body底部（要先让浏览器加载HTML 然后再JS获取元素）此时获取div的时候，页面中还没有加载内嵌式和外链式不能用在同一个script标签中

JS中的变量、常量

如何定义变量、常量

变量和常量都是用来存储值，可以通过他们的名来获取它们存储的值
- 变量是可变的
  - 语法：var 变量名 = 值

定义一个变量n 来存储2019这个数字
var n = 2019
把变量n 存储的值 输出显示到控制台
console.log（n）//2019
把变量n的值重新赋值
var n = 2020
n = 2021
console.log（n）//2021
复制代码

- 常量的值 不能被修改
	- 语法：const 常量名 = 值
复制代码

const m = 100
m = 200 //不成立
console.log(m) //100
复制代码

变量的命名规范

1.可以使用字母、数字、特殊符号_$

var num1 = 100
var num2 = 200
console.log(num1) // 100
console.log(num2) //200

//_$ 自发约定
var _num = 300 //_是内部私有变量
var $num = 400 //JQ js类库 用来表示通过jq获取的变量元素
复制代码

2.数字或者一些其他字符不能作为变量名开头 var 1num = 123 //错误的写法
3.JS里变量名严格区分大小写

var A = 1
var a = 2
console.log(A) //1
console.log(a) //2
复制代码

4.驼峰式命名（命名规则）
小驼峰：定义一般变量；第一单词首字母小写，从第二个单词开始，后面每一个单词首字母都要大写 var myContextTitle = 200
大驼峰：定义类名；每个单词首字母都大写 var myContextTitle = 123
5.变量名不能使用关键字，保留字（将来有可能升级为关键字），在js中有很多特殊意义的单词关键字

数据类型

基本数据类型

 -Number（数字类型）1 0.5 0
         * -String（字符串类型）'123''我''abc'
         * -Boolean（布尔类型）true（真）false（假）
         * -null 空值，空对象指针
         * -undefined undefined未定义
         * -Symbol（ES6新增）
复制代码

引用数据类型数据的集合，存储多个值 var arr = [1,2,3]

对象数据类型
         *  -普通对象｛id：1；name：'JS'｝
         *  -Array(数组)[1,2,3]
         *  -RegExp 正则/\d+/
         *  -Date 日期对象
         *  -Math 数学对象
         * -
复制代码

函数数据类型：function

数据类型检测

typeof
constrcutor
instanceof
Object.prototype.toString.call（）

		console.log(typeof 1)//"number"
        console.log(typeof"abc")//"string"
        console.log(typeof true)//"boolean"
        //代表的是一个“无”的对象 空值 空对象指针（特殊值）
        console.log(typeof null)//"object"

        console.log(typeof undefined)//"undefined"
        typeof{id:1}//"object"
        typeof[1,2,3]//"object"
        typeof/\d/;//"object"
        
        function fe() {}
        typeof fe //"function"
复制代码

topeof 返回值 "number""string""boolean""object""undfined""function" typeof 不能够具体细分对象数据类型数组正则普通对象（typeof）

JS中输出方式

弹窗形式输出弹窗会阻塞HTML加载

alert（‘提示框’）
confirm（‘确认框’）接收弹窗返回的结果 true 确认或false 取消
prompt（‘输入框’）将用户提交的内容返回给我们

页面中输出

var h1 = '<h1>我是外星人</h1>'
         document.write(h1)
         document.write(h1)
复制代码

在指定页面元素中输出内容 innerHTML innerText 把内容当做是普通文档输出到页面区别就是innerText 不能够识别标签内容

控制台输出调试

var text = document.getElementById('text')
	        console.log(text)
	         console.dir(text)//打印出更详细的信息
复制代码

字符串

var a
        console.log(a) //undefined 是变量a的默认值

        //变量未定义
        console.log(b)
        //9.字符串.html:15 Uncaught ReferenceError: b is not definedat 9.字符串.html:15


        //在JS中 字母 单词 汉字 默认情况都会当作变量来解析
        //如果这个变量 没有var 没有声明过 就会报错
        var 我 = 520
        console.log(我)
        var 你 = '在js中 字母 单词 汉字 默认情况都会当作变量来解析'
        console.log(你)
        //'我'字符串类型的值

        //''""``(ES6新增)
        console.log(typeof'adv')  //"string"
        console.log(typeof"abv")  //"string"
        console.log(typeof`abv`)  //"string"

        //"my name is , I like"
        var maName = 'zhufeng'
        var like = '前端'
        //字符串当中 默认情况 里面每一个都叫做字符
        var str = "my name is myName,I like fe"
        console.log(str1)
复制代码

字符串拼接

//字符串中拼接变量
        //`${变量名/表达式}`
        var str2 = `my name is ${myName},I like ${fe} 1+2 = ${1 + 2}`
        console.log(str2)
        var box = document.getElementById('box')
        var str3 = `<i>my name is ${myName},</i>
                    <i>I like ${myName}</i>
                    <i>1+2 = ${1 + 2},</i>`
        //将拼接好的html字符串 输出到页面中
复制代码