初识Javascript

javascript是什么

	 JavaScript一种直译脚本语言,是一种动态类型,弱类型,基于原型的语言  

• 直译脚本语言

  ​ => 脚本语言,又称为 动态语言 依赖于宿主环境 如浏览器,node.js(服务器)

  ​ 传统编程语言的运行过程 编写 =>编译 =>链接 =>运行(编写代码=>编译器编译为可识别的机器码=>与对应函数库组合链接起来形成可执行文件=>运行可执行文件)

  ​ =>直译, javascript在直译器中执行,浏览器中有js直译器也就是解释器,这是js能在浏览器中执行的原因,因此js也是 解释型 的语言,解释器中,识别一行语法就立刻执行一行,再接着识别执行. 如果报错就会卡住进程.

• 动态类型/弱类型

  ​ => 变量声明不需要规定类型 根据赋值决定变量数据类型 按需设定变量,并且类型之间可以相互转换 甚至进行拼接 ( java定义变量就已经确定了数据类型 => 静态语言 )

• 基于原型

  ​ =>基于原型的编译是面向对象编程的一种形式,通过复制已经存在的原型对象来实现面向对象,js对象论,万物皆对象,对象上有原型,原型上有仓库 仓库里面装着很多方法,宝贝,基于原型创建的对象,也同样可以使用这个仓库.

js组成

ECMAScript js语法

DOM =>DocumentObjectModel 文档对象模型，提供页面元素和方法的整合工具箱，我们可以直接使用里面关于文档对象的一系列方法, 这使我们,可以操作标签.

BOM =>BrowserObjectModel 浏览器对象模型,提供操作浏览器的方法的整合工具箱. 所以js里面,有一些东西,是关于浏览器的,如弹窗,右键的菜单,滚动条.

js 作用

​ 1.可以改变HTML标签,属性,样式

​ 2.支持鼠标事件,键盘事件,实现交互效果

​ 3.实现和数据库链接,做数据交互,实现动态页面

​ 4.一些延伸作用,由于js内和BOM单独分离,所以js在更多的地方都可应用

js代码存放位置

常见1=>存放于内部 script标签 内

​ 1.script标签存放位置:

​ js代码的解析顺序,基本从上至下,一般js存在在head里,或者body结束标签前,建议全部写在body结束前.需要很多js代码的页面如果把js全部写在头部,可能会导致很明显的延迟.(运行js瞬间 停止对html文档的渲染) (还有个原因是 爬虫还检索网页时,一开始爬到很多的js文件,就会放弃掉你这个页面的主干,会降低网页的一个排名)

​ 2.script标签的属性 :

​ ansyc 异步 defer延迟到文档执行完毕再运行 ( 前两者都是布尔属性 只针对外部js 用得少) type可以不写 src 引入外部js文件 ( *!!!*内部js和外部js不可共用同一个script标签 )

常见2=>存放于外部js文件中

​ src引入即可,没啥好说的 可以在外部js里面 写上window.onload = function(){} 把逻辑写在这个函数里

不常见3=> 塞到标签内 只有DOM的方法才有这个属性

<div onclick ="alert('我爱你')"></div>//点击div时,弹窗我爱你 alert属于浏览器

js书写注意事项

1) 严格区分大小写, 一个字母都不能错

2) 半角输入

3) 严格tab缩进 换行对齐 空格 (全因为美丽很重要 维护也很重要)

4) 语句结束加分号 (为避免错误最好都加上,大多数不加也没有事情,会自动断句)

弹窗与调试

1) alert ( " " )

​ 阻塞js进程,不同浏览器的表现效果稍有出入,alert运行之后,会阻断后面的逻辑运行,叉掉之后,才能继续运行 弹窗可以用来判断函数是否运行,也可以显示变量的真实内容

2) console.log ( " " )

​ console是控制台,控制台可以操控文档的js,并且会提示报错信息给你参考.控制台下有一些方法

​ =>log是控制台下面的打印日志的方法 能把我们的代码的实际内容打印出来,一般用console.log ( ) 来检查函数是否运行,变量是否获取到 是调试js的一个帮手

注释

// 单行注释 
/**/ 多行注释

声明变量 获取标签 innerHTML

1.获取标签节点

通过元素id获取

console.log(document.getElementById(""))//确定是否拿到该标签

1.1 **为何能这么获取**: 获取元素是由DOM提供的API (方法),js内部已经定义好,()里面填参数,参数对应ID名字就可以获取到元素

1.2 **解释** :document是文档对象  getElementById 是文档对象里的方法  . 在js中有 "的" 的意思, ( ) 是执行,只有方法后才能带 ( ) 括号  
##### 操作元素内容
1.console.log(document.getElementById("box").innerHTML)
2.console.log(document.getElementById("box").innerText)
3.document.getElementById("box").innerHTML = "<p>hello</p>" 
4.document.getElementById("box").innerText = "<p>hello</p>" 
5.document.getElementById("box").innerHTML = document.getElementById("box").innerHTML + "雀雀"

​ 1.1 innerHTML是元素的内容 , 可以获取内容中的标签 注释等

​ 1.2 innerText 不获取标签 只获取文本 (不包含注释) 低版本火狐不支持innerText,支持textContent

​ 1.3 = 等号视为赋值, 看到等号,先看等号右边, 右边先拿到值

hello

赋值给box的内容, 因此,box的内容更新为

hello

,原来的内容将会完全被替代.

// input textarea等控件要获取内容,通过 value属性

获取元素.事件 = 反应

​ 1.1 注册事件, 把事件绑定到获取的标签身上去 通过 . 操作

1.document.getElementById("box").onclick = function(){console.log(1)}

​ 1.2 onclick为鼠标点击事件,鼠标有很多事件,如点击,滑入,滑出,滚轮,双击等等 ( 自行百度使用 )

​ 1.3 function为js中的龙头svip, { } 内部写运行逻辑语句,也叫代码块 通俗来说,具体要做什么事情,就放到函数内执行 [[[[[ . 函数就像一个工作清单 , 它本身不会自己动,除非说假日结束了,或者老板叫你干活,这时候你才会按照工作清单的内容,一件一件去做 . ]]]]]]

​ 所以函数本身不会运行里面的代码,他只是装着这些代码,如果需要运行里面的代码,那就需要触发,或者带上括号自己执行 ( 要么别人让你动 , 要么你自己动 ) 当前意思是:点击这个元素使函数触发,那么通过这个作用来看,这个函数绑定在这个事件上,也可以叫事件函数,反正只是一个叫法.

onclick —————— 点击（单击）事件 
onmouseover ———– 鼠标滑入事件（会冒泡）  这意味着，鼠标移到其后代元素上时会重复触发。
onmouseout—————鼠标离开事件（会冒泡） 
onmouseenter————鼠标滑入事件（不会冒泡，区别后面讲） 鼠标移到其后代元素上时不会重复触发。
onmouseleave————鼠标离开事件（不会冒泡，区别后面讲）
ondblclick ——————- 双击（单击）事件
onmousedown:鼠标按钮被按下（左键或者右键）时触发
onmouseup:鼠标按钮被释放弹起时触发 

2.声明变量

2.document.getElementById("box").onclick = function(){
	document.getElementById("box").innerHTML = "么么哒"
}

====>找一个东西,来代替document.getElementById("box"),下次要操作box,直接拿替代品使用就行

变量

声明变量 给变量注册一个合法的身份

*变量的命名规则

​ ①严格区分大小写

​ ②见名之意

​ ③不能以数字开头

​ ④不要使用中文变量名

​ ⑤不能使用关键字和保留字 关键字=>js已经赋予特殊功能的字 保留字=>js预订可能未来要使用的字 (为了不使未来使用,而你需要维护重写等尴尬的事情, 关于关键字和保留字 百度 js关键字保留字) 记住top也是保留字

​ 变量命名规范： 变量采用驼峰命名法： oBox(单个), aList(集合)

​ 常量命名规范： 常量采用全字母大写加下划线拼接： MAX_NUMBER, FIRST_LINE

var

var box = document.getElementById("box")//新建容器  容器名 = 容器内部装的内容
console.log(box)//变量js可以识别,所以不要加引号,加了就是字符串 不是变量了

​ 1.1 定义变量的关键词 var 后面空格接 变量名 等号赋值 ( 遇到等号看右边 改变的是box 而不是document.getElementById("box") )

​ 1.2 var是es5及之前唯一声明变量的关键词,

var声明特点=>即缺点

• 可重复声明变量 ( 先声明不赋值 默认为undefined )

  var erGou;
  console.log(erGou); // undefined
  var erGou = "二狗"
  console.log(erGou); // 二狗
  

• 变量可多次赋值 ( 后者 覆盖 前者 把容器里东西扔了,装另一个.)

  erGou = "铁蛋" 
  console.log("铁蛋")
  

• 全局变量和局部变量

  • 全局变量 : 全局作用域 整个js内到处都可以使用

  • 局部变量 : 只在当前函数作用域内使用 外边用就不行,访问不到 a is not defined

    var erGou = "二狗" //全局变量 
    function fn(){
        var tieZhu = "铁柱" //在函数作用域内 局部变量  
    }
    console.log(tieZhu)//未定义
    

  • if for循环内 , 没有作用域 在里面声明的变量会变成 if 和 for 外面的作用域里

  if(true){
      var a = 123;
  }
  console.log(a)
  

• 函数内可以修改全局变量值

  var erGou = "二狗"
  console.log(erGou)
  function fn(){
      erGou = "春花" 
  }
  fn()//!!!!函数运行,里面的代码,才会生效
  console.log(erGou) //输出春花
  

• 变量声明一次即可 ,先声明后使用反正不会错. 不声明就使用,一定会报错

• 不用var 直接赋值,自动等于全局变量

  a = "123" //不使用声明关键词,会自动变成全局变量,挂载到window里面去
  console.log(window)//可以发现 声明的变量,会存在与window当中
  

• 全局变量都会挂载到window下面,var声明的变量,可以先赋值,后声明,这是变量提升,因此,先使用,后声明,使用返回undefined

  console.log(a);// undefined
  var a = "123"
  console.log(a)// 123
  

• 变量的赋值

  var a = 1;
  var b = 2;
  a = b 
  console.log(a) //2   等号先看右边 
  

let 和const

​ => es6新出的声明关键词

​ 1.1 let 改变了var的一些缺点,未来也将完全替代var声明 变量

​ es6 全ie不兼容 ,但是现在有专门es6自动生成对应es5代码,所以完全不需要操心

特点 :

• 同一作用域重复声明报错 ( var声明的也算 )

• 先使用 后声明 报错 ( 暂时性死区 TDZ )(没有变量提升)

• 存在块作用域 认{ } 只在let 声明所在的代码块内有效

  if(true){
      let a = "1234"
  }
  console.log(a) //报错
  

  1.2 const和let 特点一样 只不过 定义的变量是常量 最好全大写 (不强制)

  ​ =>常量就是不再变化的量

  ​ 因此const声明的变量 ,在上面的特点基础上,再加一条: 不可修改变量的值

总结 变量恒定 用const 变量要修改值用let var ....的话 面试的时候用 写兼容的时候用

​