JavaScript 01 入门基础

JavaScript基础详解：网页三剑客与核心概念

原创已于 2025-02-20 11:51:19 修改 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-03-13 10:38:20 首次发布

本文介绍了JavaScript的基础知识，包括其在Web标准中的角色，如HTML的结构化内容、CSS的样式设计以及JavaScript的动态功能。JavaScript是一种弱类型、脚本语言，由Netscape的布兰登·艾奇在1995年创建。文中还详细讲解了JavaScript的组成部分（ECMAScript、BOM和DOM），变量使用、数据类型、循环结构、数组操作以及函数定义和调用。

JavaScript需知

一、 web网页标准

1.HTML是一种标记语言，用来结构化我们的网页内容并赋予内容，比如定义标题，段落，数据表，并且在页面中嵌入视频，图片。

2.CSS是一种样式规则语言，用来定义HTML标签中的样式，比如背景颜色，字体大小。

3.javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等等。

二、JavaScript概述及历史

1.JavaScript是弱类型语言也是脚本语言，没有类型声明，它的变量不必具有一个明确的类型，可能直接被浏览器识别。

2.JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich，也是JavaScript 创始人 ）在 1995 年开发（这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。

三、JavaScript的组成和使用

1.共有三大组成部分第一个是ECMAScript(JS的核心语法)，第二个是BOM (Browser Object Model): 浏览器对象模型，有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器(比如:弹出框、浏览器跳转、获取分辨率等 )。第三个是DOM (Document Object Model): 文档对象模型，有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素(比如:增加个 div，减少个 div，给div 换个位置等)。

2.JS嵌入方法(行内式，内嵌式，外部引用 js 文件)

行内式(<input type="button" value="Click Me!" οnclick="alert('Hellow World')">)；
内嵌式(<script>alert('Hello World')</script>)；
外部引用 js 文件(<script src="my.js【这里js文件的路径】"></script>)；

3.js输入输出语句(alter/prompt/confirm来源于window对象)

alert(msg) // 浏览器弹出框
console.log(msg) // 浏览器控制台打印输出信息
prompt(info) // 浏览器弹出输入框，用户可以输入
confirm()

4.JS事件

onclick // 鼠标点击左键
ondbclick // 鼠标双击
oncontextmenu // 鼠标点击右键
mousedown // 鼠标按键被按下
mouseup // 松开鼠标按键
onselect // 文本被选中
oncopy // 元素内容被复制
onmouseenter // 鼠标移动到事件监听的元素内（不区分子元素）
onmouseover // 鼠标移动到有事件监听的元素或它的子元素内
onmouseleave // 鼠标离开元素外（不区分子元素）
onmouseout // 鼠标离开元素，或它的子元素外
onfocus // 获得鼠标焦点(点击input输入框)
onblur // 失去鼠标焦点（进入其他input输入框）
onmousemove // 鼠标移动
onmouseup // 鼠标弹起
onmousedown

5.查找HTML DOM元素

getElementById()
<div id="new">This is new Element</div>
<script>
    // 页面文档从上往下加载，需要将 script 代码写在下边
    var dom = document.getElementById('new');
   // 显示id为new的对象中内容
    console.log(dom);
   // 可以打印我们返回的元素对象，更好的查看里边的属性和方法
console.dir(dom);
</script>

6.变量的使用

1.声明变量 var a; a=10;

2.初始化变量 var a = 10; var name = ' momo '；

3.变量的命名规范

由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for,while,this,name
区分大小写
变量名必须有意义
小驼峰命名法，如：myName
建议不要用$作为变量名

4.查看变量

alert(变量名) // 弹出框显示
console.log(变量名) // 控制台显示
document.write(变量名) // HTML 页面上显示

7.数据类型

1.数字类型 [ number ] NaN 是非数字

2.字符串型[string] var str= '这是个字符串';

3.布尔型 [ Boolean ] 只有两值 true 或 false ;

4.undefined 未定义 null 空值

5.数组和对象

8.循环结构

for循环例:0加到100 var sum =0;for(var i = 1; i<=100; i++){sum+=i;}
while循环例:用while0加到100 var num=1; while(num<=100){console.log(num);num++;}
do while 循环 do {// 循环体 } while(条件表达式)
break 关键字用于直接跳出循环
continue 关键字用于立即跳出本次循环，进入下一次循环

9.数组

1.创建数组

var arr = new Array();
var arr = [];
var arr = [1, 2, 3, 'Pink', True];

2.访问数组元素

var arr1 = ['张三', '李四', '王五', '淑芬'];
// 索引号： 0 1 2 3
console.log(arr1); // 输出整个数组所有元素
console.log(arr1[0]); // 使用数组名[索引号] 获取数组数组内指定元素的值

3.遍历数组

arr= ['a', 'b', 'c', 'd'];
for (var i = 0; i <= 3; i++) {
console.log(arr[i]);
}

4.数组长度属性 length

arr= ['a', 'b', 'c', 'd'];
console.log(arr.length); // 输出4
利用 length 添加新的数组元素
arr = ["a", "b", "c", "d"];
arr[arr.length] = 'e';
console.log(arr[arr.length - 1]); //输出结果e