js初识

js初识

1.网站的基本组成

HTML：超文本标记语言 搭建网站结构
CSS：层叠样式表 修饰网页样式
JavaScript:脚本语言 进行网页交互

2.js发展史

  1995 网景Netscape ：大型的商用浏览器

  解决问题：表单验证的问题

  布兰登.艾奇：10天 ---- LiveScript-- JavaScript

  同年：微软 ie3.0搭载了克隆版的JScript 

 

ECMA:欧洲计算机制造商协会

ECMAScript1.0 : 制定了JavaScript标准

3.JavaScript是什么？特点是什么？组成是什么？

*JavaScript是基于对象和事件驱动的解释性脚本语言
*基于对象：js是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用
*事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行
*解释性：浏览器可以直接识别和解析js代码

组成：
ECMAScript：制定JavaScript的标准
DOM:Document Object model :文档对象模型
BOM：Browser Object Model：浏览器对象模型

4.js的引入方式

*行间引入

 <!--onclick：点击事件
      alert（“在页面弹出警告框”）
      注意：相同引号不能嵌套 “” ‘’
  -->
  <button onclick="alert('警告')">按钮</button>

*内部引入

 <script>
     alert("不点击也会弹2");
 </script>
 <!--
   1.script标签可以写任意多个，可以放在任何位置
   2.执行顺序：从上往下执行，如果遇到了script标签，会暂停往下执行，去
script标签里面执行js代码，执行完以后才会继续往下执行
   3.一般放在head或者body的末尾
-->

*外部引入

<script type="text/javascript" src="JavaScript.js">
    //外部引入的script标签里面不要再放其他的js代码，不会执行
    alert('里面弹一下');
</script>
<script>
    alert("里面弹一下1");
</script>

注意：外部引入的script标签里面不要再放其他的js代码，不会执行

5.js注释

//单行注释  ctrl+?
/** 多行注释  ctrl+shift+?**/

6.简单使用

三部曲：

1.找到谁：document.getElememtById(‘id名’)
2.添加什么事件：标签.onclick
3.要做什么事情：标签.onclick = function(){ 要做的事情 }

//1.找到谁（获取标签）
console.log(document.getElementById("btn"));
//2.加什么事件
document.getElementById("btn").onclick
//3.做什么事情
document.getElementById("btn").onclick = function(){
    alert("我是一个弹窗");
}

7.window.onload的作用？

window.onload = function(){} ：等文档(标签)和资源都加载完成

<script>
     window.onload = function () {
     alert(document.getElementById("btn"));
     ocument.getElementById("btn").onclick = function(){
            alert("饿了，该吃饭了");
     }
    
}
</script>
<button id="btn">按钮</button>

//js代码写在标签前面时为了避免错误应该用window.onload

8.变量

变量：存储数据的容器
语法：var 变量名 = 值

var x = 10;
//1.先声明，后赋值
var y;
console.log(y); //undefined:声明了变量但是没有赋值
y = 10;
console.log(y);
//2.同时声明多个
var m = 10,n = 20;
//3.连等
var i = j = 30;

变量的命名规则：
    1.只能以字母,_，$开头  var 0A = 10;错
    2.不能使用关键字和保留字
    3.见名知意，遵循驼峰标识fontSize
    4.建议不重名,后面会覆盖前面的

9.调试命令

var x = 10;
var y = 20;
alert(x,y); //一次只能弹一个
console.log(x); //在控制台打印信息
console.log(x,y); //在控制台打印信息,可以同时打印多个信息

10.鼠标事件

onclick：点击事件
onmouseover:鼠标移入，子元素可以触发父元素的事件
onmouseenter：鼠标移入，子元素不可以触发父元素的事件
onmouseout：鼠标移出，子元素可以触发父元素的事件
onmouseleave：鼠标移出，子元素不可以触发父元素的事件
onmousemove：鼠标移动
onmouseup ：鼠标抬起
onmousedown：鼠标按下
ondblclick：双击
oncontextmenu：右击

11.操作标签内容

(1)操作input标签内容
   获取：var v = 标签.value
   设置：标签.value = 值

//1.获取input标签
var oIn = document.getElementById("in");
//2.获取input框中用户输入的值：标签.value
var v = oIn.value;
console.log(v);
//3.设置input的内容 标签.value = 值
oIn.value = "qwe123&&er";

(2)操作闭合标签内容
   获取：var inner = 标签.innerHTML
   设置：标签.innerHTML = 值
   特点： 
        1. 会覆盖标签中之前的内容
        2. 能够识别标签
   注意：innerText : 与innerHTML唯一的区别是不能识别标签

//1.获取闭合标签
var oDiv = document.getElementById("div");
//2.获取闭合标签的内容  var inner = 标签.innerHTML
var inner = oBox.innerHTML;
console.log(inner); //<span>我是一个div</span>
//3.设置闭合标签内容
//oBox.innerHTML = "我是通过innerHTML添加的内容"; //会覆盖掉之前的内容

//4.要保留之前的内容  之前的 + 现在的
//oBox.innerHTML = oBox.innerHTML + "我是通过innerHTML添加的内容";
oBox.innerHTML += "<br><p>我是通过innerHTML添加的内容</p>";
//5.在div中追加一个img标签
oBox.innerHTML += "<img src='pic.jpg'>";
oBox.innerText = "<span>fdfd</span>";

12.操作标签属性

<div id=’’ class=’’></div>
<img src=’’>
获取:var value = 标签.属性名
设置：标签.属性名 = 属性值

var oDiv = document.getElementById("box");
//获取
var id = oDiv.id;
console.log(id);
//设置 title=“active”
oDiv.title = "active";

注意：class操作的时候使用的是className

13.操作标签样式

//写在style标签里面的叫样式
div{
    width: 100px;
    height: 100px;
    background: orange;
}

操作样式：
   获取：var s = 标签.style.属性名
   设置：标签.style.属性名 = 值

//点击，改变宽高 标签.style.属性名
<script>
oDiv.onclick = function () {
    oDiv.style.width = "200px"; //
    oDiv.style.height = "200px";
    oDiv.style.background = "red";
}
</script>

注意：font-size、background-color等带连字符的都使用驼峰标识

oDiv.style.fontSize = "20px";