javascript简介

(一)javascript简介

• 1-定义
  • 具有面向对象能力的解释型的编程语言.
• 2-历史
  • 1997 netscape LiveScript
  • 和sun合作 曾java热度 改名javascript
  • 微软 JScript \ EaseScript
  • ECMA 欧洲计算机制造商协会 ECMAScript(标准) ECMA-262
  • ECMAScript 1.0 1997
  • ECMAScript 2.0 1998
  • ECMAScript 3.0 1999
  • ECMAScript 5.0 2009 *
  • ECMAScript 6.0 2015 es6 *
  • ECMAScript 7.0 2016 es7
  • ECMAScript 8.0 2017 es8
  • ECMAScript 9.0 2018 es9
  • ECMAScript 10.0 2019 es10
    nodejs
• 3-组成
  • ECMAScript : js的标准,定义了js中最核心的知识点,变量,操作语句,关键字…
  • DOM(document object model): 文档对象模型,定义了操作HTML文档的属性和方法.比如获取input的值,操作div的样式等
  • BOM(borwser object model): 浏览器对象模型,定义了操作浏览器的属性和方法. 比如打开窗口,获取浏览器版本信息等
• 4-特点
  • 解释型: 不同于 java , C 等编译型语言,需要编译后才能执行,js直接可以放在浏览器中被js的解释器执行.
  • 跨平台: 不依赖操作系统和语言环境,只要有浏览器就能运行
  • 事件驱动: js的操作大部分都是基于用户的某些操作来完成的,js中的这种操作叫做事件驱动
  • 基于对象: js里面提供了很多内置的对象,可以使用已有的对象,也可以创建对象
• 5-用途
  • 交互动效
  • 客户端表单验证
  • 动态数据绑定

• js组成: ECMAScript + DOM + BOM
• ECMAScript 和 javascript 关系?
  • ECMAScript 是 javascript 的标准
  • javascript 是 ECMAScript 的一种实现

(二)js的三种引入方式

• 1-行内式 : 在开始标签上引入js的事件属性,在属性值里写入js代码

      <div onclick="alert('hello');"></div>
  

• 2-内嵌式 : 在body末尾,添加一个script标签(脚本块),在script标签之间写入js代码

      <script>
          alert('...'); 
      </script>
  

• 3-外链式 : 在body末尾,添加一个script标签(脚本块),通过script标签的src属性引入 .js文件 , 在.js文件中写入js代码

      <script src="script.js">
          //外链式脚本块之间的代码不会运行
      </script>
  

(三) js代码调试语句(输出方式)

• 1-alert("hello world"); 系统弹出提示框
  • 会阻塞其他代码的运行
• 2-console.log("hello world!"); 控制台输出
  • 控制台中可以运行js代码,并且js的报错信息也是在控制台中提示

(四) 变量

• 可变的量:相当于一个带有名称的容器 作用:存储值和代表值
• 声明变量

  var 变量名 = 值;    声明的同时进行赋值
  var a;   先声明 , 声明之后默认值是undefined
  a = 10;   后赋值
  var a,b,c;  连续声明多个变量

• 变量必须先声明再使用,否则报错 “变量名 is not defined”

• 变量命名规则
  • 数字\字母\下滑线$组成
  • 不能以数字开头
  • 不能使用关键字和保留字
  • 推荐驼峰命名法 studentInformation
  • 尽量使用英文单词,可以适当简写

(五) 注释语句

• 单行注释

    //  单行注释
  
  

• 多行注释

   /*
     多行注释
   */
   
  

(六) 简单的交互思路

• 操作哪个元素就先获取哪个元素

  var oBox = document.getElementById('box');

• 绑定事件

 oBox.onclick = function(){ 
 }

• 事件发生时做什么

  oBox.onclick = function(){ 
      //这里面写事件发生时要执行的所有操作
  }

(七) js操作标签样式

  element.style.样式属性 = 值;
  oBox.style.backgroundColor = "red";

• 样式属性名中带 ‘-’ ,都转换成驼峰命名 例如 font-size --> fontSize

• cssText 批量操作css样式 ,相当于设置标签上的style属性值

  oBox.style.cssText = "width:100px;height:100px;background-color:red;";

(八) 文档就绪事件

  window.onload = function(){ 
    ...
  }

• 如果直接把js放在head里面,会报错,因为页面从上到下加载,运行到js代码的时候页面的标签还没加载出来,获取不到,所以需要添加 文档就绪事件,让页面加载完之后再执行js

(九) 操作标签的内容

• 1-闭合标签

  • innerHTML : 设置或者获取标签之间的HTML代码
  • innerText : 设置或者获取标签之间的文本(不能识别标签)

    oBox.innerHTML = "<h1>hello</h1>";
  

//浏览器显示：hello
oBox.innerText = “

hello

”;
//浏览器显示：<>hello</>
```

• 2- 表单元素的值

  • value : 获取或者设置表单元素的值

    oInp.value = "张三";
  

(十) 操作标签属性

  <div id="box" class="red">
  <img src="img/pic.jpg" alt="替换文字">
  <a href="" target="_blank">
  <form action="" method="">
  <input type="" name="" checked>
  <option seleted></option>

• 标签上的属性大部分情况都是直接用元素 .属性名 ,比如

  oBox.id = "box";
  oImg.src = "img/pic.jpg";
  oLink.href = "http://www.ujiuye.com";

• class属性比较特殊 ,需要用className属性访问 (因为class是js中的关键字)

  oBox.className = "red"

• 标签属性的值正常情况都是标签上怎么写的,获取回来就是什么,
  checked和selected属性使用 true 和 false 表示是否选中

    box.className = "box red";
  

• 设置单选按钮\复选框\下拉列表选项选中状态也是使用true和false,true表示选中,false表示取消选中

    radio.checked = true;
  

(十一) 常用的鼠标事件

• onclick 单击事件

• ondblclick 双击事件

• oncontextmenu 右键菜单事件

• onmousedown 鼠标按键按下

• onmouseup 鼠标按键抬起

• onmouseover 移入事件

• onmouseout 移出事件

• onmouseenter 进入事件

• onmouseleave 离开事件

• onmousemove 移动事件

• onmouseover和onmouseenter区别: 鼠标从子元素上移入移出,会反复触发父元素的over事件

• onmouseout和onmouseleave区别: 鼠标从子元素上移入移出,会反复触发父元素的out事件