JavaScript-初识

1.web的组成

HTML(Hyper Text MarkUp language) 超文本标记语言结构层
CSS（CaseCade Style Sheets）级联样式表样式层
JavaScript 行为层

2.JavaScript简介

js诞生之初是为了做表单验证（减少服务器的压力），随着互联网的发展，js也不仅仅只是做表单的验证，更多的是与网页的交互

时间： 1995
开发者：布兰登·艾奇
- 仅仅只用了一周的时间（借鉴了C语言的基本语法，Java的数据结构等等）
JavaScript原名LiveScript，但是当时Java比较火,相当于蹭Java的热度，改名为JavaScript

3.JavaScript的概念

JavaScript是一们具有面向对象能力的解释型程序设计语言，具体一点javaScript是基于对象和事件驱动的并且具备客户端安全性的浏览器脚本语言。

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

4.JavaScript的组成

ECMAScript(核心JS)：规范js的基本语法，变量，命名规范，数据类型，操作语句等内容。
- ECMA：欧洲计算机制造厂商协会（各大浏览器厂商组成的），是一个非盈利性的组织。
- ES是js的规格 js是ES的实现
DOM（Document Object Model）文档对象模型（操作标签结构）
- 有了DOM，就可以使用js来操作页面
BOM (Browser Object Model) 浏览器对象模型

5.JavaScript的引入方式(书写位置) *

行内

<button onclick="alert('你好')">点我</button>

内嵌（内部）
- 一般写到紧挨着body的结束标签（默认HTML结构是按照文档流进行加载的）保证结构一定加载完毕

<script>
     js代码段
 </script>

外链（外部）
- 注意：外部script双标签中不建议放内容，因为放了也不生效

 <script src="路径地址"></script>

注意事项：

代码中的字符：英文半角

注意代码中""和‘’的嵌套关系

不能在用来引入外部js代码的标签内部插入新的js

js代码可以出现在页面中的任何位置

常见错误：

Uncaught SyntaxError: Invalid or unexpected token

6.javaScript的三部曲 *

获取元素

document.getElementById('id值');

绑定事件

//元素.事件

做什么事情

//元素.事件 = function(){
	特定的功能
}

// 点击当前id是box这个div弹出弹窗
document.getElementById("box").onclick = function(){
    alert('哈喽，小可爱！');
}

7.注释

解释说明，浏览器不会解析。

单行注释： // 或 CTRL + /
多行注释： /* */

8.window.onload *

作用：保证页面当中所有的资源加载完毕再去执行当前的js (所有资源：结构，样式，图片，音频，视频等)

window.onload  = function(){
    js代码
}

9.js中其它的鼠标事件 *

onclick 单击事件
ondblclick 双击事件
oncontextmenu 鼠标右击
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开

常见事件：

onkeydown
onkeyup

10.js中的调试方式 *

alert(弹出内容) 弹窗（太麻烦了换下一个）
console.log(输出内容); 控制台输出

11.移入-进入和移出-离开区别 *

onmouseover   
//  不仅将子元素的onmouseover事件触发，还会将父元素onmouseover再次触发
onmouseout
// 不仅将子元素的onmouseout事件触发，还会将父元素onmouseout再次触发
document.getElementById("father").onmouseover = function(){
     console.log("father");
}

document.getElementById("son").onmouseover = function(){
     console.log("son");
}

onmouseenter
// 只会触发当前这个元素的onmouseenter事件不会将父元素onmouseenter触发
onmouseleave
// 只会触发当前这个元素的onmouseleave事件不会将父元素onmouseleave触发

12.变量 *

1.变量的基础

变量在js中是用来存储值和代表值的

基本语法

var 变量名 = 值；

声明 var 变量名;
定义变量名 = 值；

2.变量的定义方式

// 1.声明 + 定义
var a = 10;
console.log(a); //10

// 2.只声明不定义
var b;
console.log(b); //undefined  声明一个变量没有进行赋值，默认值是undefined ->未初始化，未赋值

// 3.连续声明 + 定义    ,->并列
var c = 100,    //存储值
    d = 200,
    e = 300,
    f = 400;

console.log(c,d,e,f); //代表值

// 4.连续声明不定义
var x,y,z,w;
console.log(x,y,z,w);

3.变量的命名规范

可以由数字，字母，下划线，$组成，但是不能以数字开头
不能使用关键字及保留字
- 关键字：js中内置的名字
- 保留字：未来可能成为关键字的
见名知义，符合驼峰命名法（约定俗成） ->第一个有意义的单词首字母小写，其余有意义单词的首字母都大写
不要重复命名，后边的会覆盖前边的

13.操作元素内容

原则：

1.给值就是设置，不给值就是获取

2.没有内容获取到的就是空字符串

3.从元素中获取到的都是字符串

表单元素

基本语法：

//设置
元素.value=值;
//获取
元素.value

普通闭合标签

innerText：不能识别标签，输出为文本

//设置
元素.innerText=值；
//获取
元素.innerText

innerHTML：可识别标签

//设置
元素.innerHTML=值；
//获取
元素.innerHTML

14.操作元素属性

操作元素天生自带结构上的属性

原则：

给值就是设置，不给值就是获取

获取不到就是空字符串

基本语法

//设置
元素.属性名=值;
元素[属性名]=值;

//获取
元素.属性名
元素[属性名]

原则：给值就是设置，不给值就是获取

15.点操作符和中括号操作符

点操作符

//设置
元素.属性名=值;

//获取
元素.属性名

中括号操作符

属性名要加引号，除非是自定义属性

//设置
元素[属性名]=值;

//获取
元素[属性名]

box["innerHTML"] = "我是DIV~~~~~";  //ReferenceError: innerHTML is not defined
box["className"] = "youBox";
box["id"] = "box1";

16.操作元素样式

原则：用过style属性操作的都是元素的行内样式（设置和获取）

操作单个样式

仅把style对应的值覆盖

基本语法

//设置
元素.style.样式属性=值;

//获取
元素.style.样式属性

var box =document.getElementById("box");

// 设置
box.style.width = "400px";
box.style.height = "400px";
// js中全部遵循驼峰命名法
box.style.fontSize = "22px";
box.style.backgroundColor = "blue";

// 多次设置当前这个属性 后边的覆盖前边的
box.style.width = "600px";

// 获取
// 行内有才能获取到，没有获取到的是空字符串
console.log(box.style.width);
console.log(box.style.height);
console.log(box.style.fontSize);
console.log(box.style.backgroundColor);

操作样式集合

会把style对应的值整体覆盖了

基本语法

//设置
元素.style=值;
元素.style.cssText=值;

//获取
元素.style.cssText;

var box = document.getElementById("box");

// 设置
// 会把style对应的值整体覆盖了
box.style.cssText = "width:200px;height:200px;background-color:red";
// box.style.cssText = "font-size:60px";
// box.style.cssText = "width:200px";

// 获取
console.log(box.style.cssText);

拓展

Windows指令：

ctrl+c

ctrl+v

ctrl+a 全选

ctrl+z 回退

Windows+D 回到桌面

Windows+E 打开资源管理器

alt+table 切换任务

widnows+tab

DOS指令：

打开命令行工具：Windows+R 输入cmd即可进入

cd 路径切换资源路径

dir 查看当前路径下所有的文件夹

cls 清空当前页面

发表于 2021-03-10 19:49 离玦阅读(53) 评论(0) 收藏举报

刷新页面返回顶部

JavaScript-初识

1.web的组成

2.JavaScript简介

3.JavaScript的概念

4.JavaScript的组成

5.JavaScript的引入方式(书写位置) *

6.javaScript的三部曲 *

7.注释

8.window.onload *

9.js中其它的鼠标事件 *

10.js中的调试方式 *

11.移入-进入和移出-离开区别 *

12.变量 *

1.变量的基础

2.变量的定义方式

3.变量的命名规范

13.操作元素内容

表单元素

普通闭合标签

14.操作元素属性

15.点操作符和中括号操作符

点操作符

中括号操作符

16.操作元素样式

操作单个样式

操作样式集合

拓展

Windows指令：

DOS指令：

公告

导航