前端之路-JavaScript 介绍-CSDN博客

本文链接：https://blog.csdn.net/m0_53353946/article/details/133811902

1. JavaScript 介绍

1. 发展历史

JavaScript是由Web发展初期的网景(Netscape)公司创建,“JavaScript”是Sun Microsystem公司(现在的 Oracle)的注册商标,用来特指网景(现在的Mozilla)对这门语言的实现。网景将这门语言作为标准提交给了ECMA-欧洲计算机制造协会 -由于商标上的冲突,这门语言的标准版本改了一个丑陋的名字“ECMAScript”同样由于商标的冲突,微软对这门语言的实现版本取了一个广为人知的名字“Jscript”实际上,几乎所有人都将这门语言叫做“JavaScript”. 所以JavaScript的标准是ES，而JS则是ES标准的实现。 2017年发布了ES8（2017），2018年发布了ES9（2018）。ES标准在不断的吸收其他编程语言的优点，尤其是脚本语言。所以JavaScript看上去也和Python有很多的类似之处。

如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为

JavaScript

高级，动态，解释型编程语言

面对对象和函数式编程风格

JavaScript的变量无类型

命名

JavaScript是区分大小写

代表这是什么？

关键字，变量，函数名和其他的标识符必须始终保持一致的大小写形式

while关键字就必须写成while 不能写成While or WHILE

注释

JavaScript二种注释

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

注意

可以跨行但是不能嵌套

字面量

什么是字面量是一种直接出现在程序中的数据值

"a"  //字符串
1.2  //数字
true  //布尔值·
null  //无对象

标识符和保留字

标识符简单说就是一个名字

常量变量属性函数或则类

命名规则

必须以字母，_ ,美元符开头（不能用数字开头，是需要注意的地方）

保留字

所有的保留字

可选的分号

JavaScript使用分号（；）分隔语句

如果二条语句写在二行，通常可以省略他们之间的分号

注意

return
true

JavaScript会认为
return;true;e

但是我们
return true;

JavaScript有一套基本规则，规定如何去使用这门语言

2. JS的书写

JS代码可以直接写在script标签里面，或者写在其他的.js后缀文件中，并通过script标签引入。注意：在引入js文件的script里面，一定不能写js代码。

也可以在标签内写js代码，但是这种方式并不推荐。

一般把script标签写在 head 或者 body 里
要注意的是是否需要加上window.onload
如果没有特殊要求，一般script标签放在body结束之前

每个浏览器内部都已经内置了一个JS解释器，因此我们的电脑都有一个或者多个运行JS的工具。

1. 在body之前书写

<script type="text/javascript">
			// alert("你好，js")  // 弹窗 JS单行注释，多行注释用 /* */
			// console.log('你好 console')  // 在终端弹出窗口
			// 以上这个两个可以弹出信息，类似与python中的print，当代码报错时，是不会的执行后面的内容
</script>

2. 在head中书写

<script type="text/javascript">
			// 代码写在head中的script标签里面
			alert('head js')
			// 正常情况下，js从上往下运行，如果需要js在之后再运行，那么需要加上window.onload
			// window.onload = function(){
			// 	alert('head in js')
			// }
</script>

3. 在js文件中书写

// 在js文件中书写js代码
alert('index.js')

原因：

受到浏览器渲染机制影响 :

引用类型数据传址，基本数据类型传值

把代码中的 console.log（）看做一个函数，那 console.log(a),就相当于是将a这个对象传给了这个函数，而在你重新给a.innerhtml 赋值之后也会改变原有的对象，所以你直接console a 的时候是修改了的数值 222

console.log(a.innerhtml)的时候，传进来的是一个基本数据字符串，这时候他只单纯的传值对原有的数据并不会有影响所以你从这块的console拿到的就还是

2. JS获取元素

在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素。那么JS如何操作页面。其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签。

1. JS获取独有标签：

document . title
document . head

document . body

// = 赋值的意思,通常要用赋值的形式
document.title = '这个是修改标题'
// 在修改别的标签，得用innerHTML(会解标签），innerText(不会解忻标签）
document.body.innerHTML = '<h1>hello the world</h1>'
document.body.innerText = '<h1>hello the world</h1>'

2. 其他标签的获取

通过id获取元素-id

document.getElementById(“idname”);

<div id='dv1'>不笑运气差，一笑就脸大。</div>
<script type="text/javascript">
  // var 定义变量 变量名不能是关键字,也不是保留字
  var oDv = document.getElementById('dv1')
	// alert(oDv)
	oDv.innerHTML = "不想听大道理，只想吃小雪糕。"
</script>

通过class获取元素-class
1. document.getElementsByClassName(“classname”);
```
<div class='box'>长大是一件把哭声调成静音的事情。</div>
<div class='box'>希望所有事情都像长胖一样简单。</div>
<script type="text/javascript">
  var aBox = document.getElementsByClassName("box")
  // alert(aBox.length)  // 打印长度
  aBox[0].innerHTML = '<b>谁还没个擅长的乐器啊！我退堂鼓打的可棒了！</b>' 
  // 当不唯一时，需要使用下标，下标从0开始
</script>
```
1.通过id获取DOM元素的方法：document.getElementById(“id名”)

2.通过class获取DOM元素的方法：document.getElementsByClassName(“class名”)

从函数的名字可以知道，通过getElementsByClassName获取到的是一个数组，包括多个DOM元素，所以要执行DOM元素的方法，必须加一个索引，比如document.getElementsByClassName(“class名”)[0]。

而由于id是唯一的，所以通过getElementById只有一个DOM元素，可以直接调用DOM方法。

通过标签名获取元素-tagName

document.getElementsByTagName(“tagdem”);

<div id='dv1'>不笑运气差，一笑就脸大。</div>
<div class='box'>长大是一件把哭声调成静音的事情。</div>
<div class='box'>希望所有事情都像长胖一样简单。</div>
<script type="text/javascript">
  var aDiv = document.getElementsByTagName("div")
  // alert(aDiv.length)
  aDiv[0].innerHTML = '<b>闹钟的作用大概就是，让我换个姿势继续睡。</b>'
  // 标签同样也是多个，也需要用下标去取
</script>

表单中的name
1. document.getElementsByName(“name”); 通过 name的属性获取元素，一般用于input

selector选择器(不兼容IE7及以下)

document.querySelector (“”); 通过CSS选择器获取一个
document.querySelectorAll(“”); 通过CSS选择器获取所有

<div id="dv2">
  <p>
    <i>只要活着，就一定能遇见好吃的。</i>
  </p>
  <i class="ibox">我低下了头，并不是认输，而是我在找钱。</i>
</div>
<script type="text/javascript">
  // 类似于CSS的选择器来选择，这里只会选择一个
  var oI = document.querySelector("#dv2 i")
  oI.innerHTML = "生活不仅有甜头，还有肉吃"
  // 选择所有的，具体指定的时候，就需要用下标
  var aI = document.querySelectorAll("#dv2 i")
  aI[1].innerHTML = "别对我大呼小叫，我小时候被狗吓过。"
</script>

id前面必须是document，其他的前面可以是某个元素（id, document), 但不能是集合

<div id="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script type="text/javascript">
  var oBox = document.getElementById("box")
  // alert(oBox) // 对于ID的获取，必须是document开头
  var aLi = oBox.getElementsByTagName("li")
  // alert(aLi.length)

  // 获取元素，只要是一个确定的标签即可
  var aUl = document.getElementsByTagName("ul")
  var aLi = aUl[1].getElementsByTagName("li")
  // alert(aLi.length)
</script>

3. JS简单事件

所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应。
在事件函数里而，有一个关字this，代表当前发事件的这个元素
事件：用户的操仵
元素，事件=函数；

鼠标事件：

左键单击 onclick
左键双击 ondblctick
鼠标移入 onmouseover/onmouseenter

鼠标移出 onmouseout/onmouseleave

<style type="text/css">
  .dv1{
    width: 200px;
    height: 200px;
    background: #D2691E;
  }
</style>

<div class="dv1"></div>

<script type="text/javascript">
  var aDv = document.getElementsByClassName("dv1")
	aDv[0].onclick = function(){
  // aDv[0].innerHTML = "点击完成了"
  this.innerHTML = "点击完成了" // this 代表发生事件的元素
	}
  aDv[0].onmouseenter = function(){
    this.innerHTML = "鼠标移入"
  }
  aDv[0].onmouseleave = function(){
    this.innerHTML = "鼠标移出"
  }
</script>

4. JS修改样式

1. JS修改样式注意项

js可以修改规范和不规范的标签

规范的标签属性： . 符号直接操作(可读可写)
不规范(自定义)的标签属性：
- 获取： .getAttribute() 方法返回指定属性名的属性值。
- 设置： .setAttribute()方法设置属性
- 移除： .removeAttribute()方法删除属性

其次：

所有的路径、颜色获取的结果不一定是你写的内容
通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的标签属性

<a href="https://ke.qq.com/" id="box" class="wrap" target="_blank">腾讯课堂</a>

<script type="text/javascript">
  var oA = document.getElementById("box")
  // alert(oA.id) // 可读性：可以看到属性值
  // alert(oA.target)
  // alert(oA.className) // 查看class需要使用className才行
  // oA.target = "_self" // 可写性：只要是规范的标签，都可写
</script>

2. JS修改样式-行间样式

大部分情况下，JS修改的都是属性的行间样式，因此优先级很高

<style type="text/css">
.box{
  width: 200px;
  height: 200px;
  background: #87CEEB;
}
</style>

html部分

<div class="box"></div>
<script type="text/javascript">
  var aBox = document.getElementsByClassName("box")
  // 获取标签之后，可以直接更改样式中的属性
  // aBox[0].style.width = "300px"
  // 也可以和响应事件组合起来用
  aBox[0].onclick = function (){
    // 使用cssText 可以同时修改多个
    aBox[0].style.cssText= "width: 300px; height: 300px;"
  }
  // 对于有-号连接的属性，改成驼峰命名的规则
  // aBox[0].style.marginLeft = "100px"
  aBox[0].style["margin-top"] = "100px"
  var mleft = "margin-left"
  aBox[0].style[mleft] = "100px" 
  // style[] 可以是变量也可以是字符串
</script>

5. JS数据类型

js七大数据类型：

number：数字，在js里面的小数和整数统一都是数字 -2^53 ~ 2^53 超出范围之后进度就会不准确
string：字符串
boolean：布尔值（true、false）
null：空值
undefined：为定义，一个变量声明之后没有赋值就是undefined
object：对象
symbol 符号

在js里面null属于对象类型特殊常量，但是它不具有很多对象的共性，所以很多资料将它归为单一类的数据类型null

作业

有两个输入框，一个是属性，一个属性值，点击确定之后，改变div的样式

<style type="text/css">
  div{
    margin-bottom: 25px;
  }
  div input{
    height: 30px;
    margin-left: 10px;
    margin-bottom: 5px;
    padding-left: 10px;
  }
  div input[type=button]{
    width: 130px;
    margin-left: 30px;
    padding-left: 0px;
  }
  .box{
    width: 200px;
    height: 200px;
    background: indianred;
    text-align: center;
    line-height: 200px;

  }
</style>

<div>
  属&emsp;性:<input type="text" name="attribute" id="" value="" placeholder="请输入你的属性"/><br>
  属性值:<input type="text" name="attvalue" id="" value="" placeholder="请输入属性值"/>
</div>
<div>
  <input type="button"  value="设置属性" />
</div>
<div class="box">
  javascript也很有意思
</div>
<script type="text/javascript">
  var aInput = document.getElementsByTagName("input");
  // alert(aInput.length)
  var aBox = document.getElementsByClassName("box");
  // alert(aBox)
  aInput[2].onclick = function(){
    var key = aInput[0].value;  // 必须要用点击时间，否则一加载就会运行
    var val = aInput[1].value;
    // alert(key);
    // alert(val);
    aBox[0].style[key] = val; // 注意变量名不能加引号

    aInput[0].value = ""; // 可以清空它的值
    aInput[1].value = "";
  }

</script>