javascript 学习day 01

JavaScript学习 day 01

day01 js初识

1、js历史

网站组成：

html：超文本标记语言 结构

css：层叠样式表 样式

JavaScript：脚本语言 交互

js的组成：

ECMAScript：核心 标准语法

DOM：Document Object Model 文档对象模型

BOM：Borwser Object Model 浏览器对象模型

什么是JavaScript？

是基于对象与事件驱动的解释性脚本语言

l 基于对象：js是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚步环境种对象的方法与脚步的相互作用

l 事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行

l 解释性：浏览器可以直接识别和解析js代码

2、js引入

行间引入：

行内：
  nclick:点击事件
  alert('警告信息'):在页面弹出警告框
  相同引号不能嵌套
<button onclick="alert('休息吗？')">按钮</button>

内联引入：

<script>
   alert("下课了2");
</script>

注意：

​ script标签可以有任意多个，可以放置在任意位置，一般放在head或者是body的末尾。

​ 代码从上往下运行，只要遇到了script标签，就会暂停往下执行，去执行script里面的代码，执行完以后再继续往下执行

外部js文件引入：

 <script src='外部的js文件'></script>

注意：script中只要有src属性，就会根据路径执行外部的js文件，执行完以后就会认为这个script标签执行结束 。所以不会再去执行script标签中的内容。

 <script src="script.js">
   //不会执行
   alert("12");
 </script>
 <script>    
     alert("123");
 </script>

注释：

js中两种注释方式：

//单行注释 快捷键 ctrl+/

/* 多行注释 */ 快捷键 ctrl+sift+/

设置快捷键：文件 --> 首选项 —> 键盘快捷方式

3、js简单使用

1、js交互入门三部曲

​ 1.找到谁：document.getElementById(‘id名’); 严格区分大小写

​ document. get Element By Id(‘id名’);

​ 在文档中 获取 元素 通过 id名

2.加什么事件 标签.onclick

3.做什么事情 标签.onclick = function(){ 要做的事情 }

document.getElementById("btn").onclick = function(){
   //要做的事情 
   alert('弹弹弹，弹走鱼尾纹'); 
}

2、简单鼠标事件

​ onclick:点击

​ onmousedown : 鼠标按下

​ onmouseup：鼠标抬起

​ onmousemove: 在元素上移动

​ onmouseover:鼠标移入元素 onmouseenter

​ onmouseout：鼠标移出元素 onmouseleave
​ 不常用：
​ ondblclick：双击
​ oncontextmenu ：右键

3、window.onload

window.onload :等文档和资源都加载完成后调用

4、变量

变量：存储数据的容器

声明方式：var 变量名 = 值

命名规则:

​ A. 只能以字母、_、$开头

​ B. 不能使用关键字和保留字

C. 见名知意，遵循驼峰标识

D. 不要重名

调试命令：

/*
 调试：看出值的多少，值的变化
 alert():在页面弹,一次只能弹一个
 console.log():在控制台打印
*/
var a = 10;
var b = 20;
alert(a,b);
console.log(a,b);

4、操作标签

style : width  height
<div id="" class="" title="">内容</div>

操作标签内容：

操作Input表单内容：

语法：

​ 获取：var v = 标签.value

​ 设置：标签.value = 值

//1.获取input的内容  标签.value
   var oIn = document.getElementById("in");
   var v = oIn.value;
   console.log(v);
//2.设置input的内容 标签.value = 值
   oIn.value = "666666";

操作闭合标签内容：

语法：

​ 获取：var v = 标签.innerHTML

​ 设置：标签.innerHTML= 值

​ 特点：后面的会覆盖前面，可以识别标签

​ innerText：不能识别标签

//2.获取标签内容 标签.innerHTML
var inner = oDiv.innerHTML;
console.log(inner);

//3.设置  标签.innerHTML = "值"
oDiv.innerHTML = "我是通过innerHTML添加的内容";

/4.追加  之前+现在
//获取之前的
var prev = oDiv.innerHTML;
//oDiv.innerHTML  = prev + " 我是追加的";
oDiv.innerHTML +=  " <span>我是追加的</span>"; 

操作标签属性：

操作标签属性：

​ 获取：var 变量 = 标签.属性名

​ 设置：标签.属性名 = “属性值”

​ 特殊：class

 //1.获取id属性
        var id = oDiv.id;
        console.log(id);

        //2.设置id值
        oDiv.id = "box1";

class是关键字不能直接使用，操作class属性需要使用className

 oDiv.className = "boxh";

操作标签样式：

操作标签样式，在写style标签中

​ 获取：var v = 标签.style.属性名

​ 设置：标签.style.属性名 = “属性值”

​ 特殊：属性名为连接符 font-size，使用驼峰标识fontSize

 //点击改变背景颜色
     oDiv.onclick = function () {
         oDiv.style.width = "200px";
         oDiv.style.backgroundColor = "yellow";
     }