首页 > 编程语言> > 初识JavaScript（2019-06-24）

初识JavaScript（2019-06-24）

2019-06-24 20:43:37 作者：互联网

(一)javascript简介

1-定义
- 具有面向对象能力的、解释型的编程语言.
2-历史
- 1997 netscape LiveScript
- 和sun合作曾java热度改名javascript
- 微软 JScript \ EaseScript
- ECMA 欧洲计算机制造商协会(European Computer Manufactures Association) 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
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;";

(八) 文档就绪事件

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

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

(九) 操作标签的内容

1-闭合标签
- innerHTML : 设置或者获取标签之间的HTML代码
- innerText : 设置或者获取标签之间的文本(不能识别标签)
```
  oBox.innerHTML = "<h1>hello</h1>";
  oBox.innerText = "<h1>hello</h1>";
```
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.class = "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事件

标签：06,标签,JavaScript,js,2019,ECMAScript,oBox,事件,属性
来源： https://www.cnblogs.com/didamehulayou/p/11079313.html