初见JavaScript

初识JavaScript

• JavaScript 一种脚本语言，是一种动态类型、弱类型（弱类型可以自动转换，不需要手工。动态类型python可以做任何类型的变量）
• JavaScript通常用来操作HTML页面的
• html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)

js代码位置

JavaScript代码可以写在页面的script标签里面，或者单独的js文件里面，或者标签属性里面（不推荐）

• 写在页面的script标签里面

• 写在外部.js后缀文件里面，通过script标签引入

# 注意：在引入js文件的script标签里面，一定不能再写js代码

#外部js文件5-js02.js
alert("我是外部6-js02.js文件");

script标签的位置：

• 一般script标签会被放在头部或尾部。头部就是里面，尾部一般指里。不同位置要注意加载顺序，如果没有什么特殊要求，通常放在body 结束之前。
• 如果script里面涉及到操作后面的元素，而script又非得放在前面的话，需要加上window.onload（一个页面中只能出现一次window.onload）

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到

元素内容修改

• 修改页面title信息

document.title = "我要把标题改成666";

• 修改别的标签的内容，得用innerHTML或者innerText

innerHTML    可以识别标签
innerText    不能识别标签

• 获取某个确切的元素,可以直接操作这个元素

document.getElementById("box").innerHTML = "吃惊！";

• 获取的是一堆元素的集合，设置操作时要通过下标（索引、序号）拿到对应的某一个再用

document.getElementsByClassName("box")[0].innerHTML = "美女";

• 对于form元素获取值

var text = document.getElementsByTagName("textarea");
console.log(text.value);

• document.write()
  在文档流关闭之前，给body部分新增内容,在文档流关闭之后，修改整个HTML的内容。

事件

• 用户的操作 元素.事件 = 函数；
• 鼠标事件
  onclick 左键单击
  ondblclick 左键双击
  onmouseenter 鼠标移入
  onmouseleave 鼠标移出

    
hahah
    

js操作元素的标签属性

• 规范的标签属性：
  . 符号直接操作(可读可写)
• 不规范（自定义）的标签属性：
  • 获取 getAttribute
  • 设置 setAttribute
  • 移除 removeAttribute

    百度下
    

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

控制元素的样式

• 行内样式标签属性：大部分情况下，js都是通过操作行内样式达到修改样式的目的， 当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式
• 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）

案例

• 需求：
  ①打开时

  
  
  

  image.png
  
  

  ②点击时

  
  
  

  image.png
  
  
  

  image.png

• 代码实现：