慕课网前端学习笔记—JavaScript入门篇&进阶篇

最新推荐文章于 2020-12-20 00:32:10 发布

xxplz

最新推荐文章于 2020-12-20 00:32:10 发布

阅读量1.4k

点赞数 2

分类专栏： JavaScript 文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/Aless0/article/details/89074043

版权

这篇博客详细介绍了JavaScript的入门与进阶知识，包括基础语法、窗口交互、DOM操作以及综合练习。在基础语法部分，讲解了如何添加JavaScript代码、变量、判断语句和函数。窗口交互涉及输出内容、警告、确认和提问等交互方式。DOM操作中，介绍了DOM节点、元素操作和样式修改。最后，提供了综合练习和JavaScript进阶内容，涵盖了表达式、操作符、数组、流程控制语句、函数、事件以及内置对象的使用。

摘要由CSDN通过智能技术生成

JavaScript入门篇

https://www.imooc.com/learn/36

1.基础语法

在HTML文件中添加JavaScript代码，掌握必备的基础语法，为以后来章学习打下基础。

1.如何写入JavaScript代码

内部引用：在HTML文件中插入 <script type="text/javascript"> JavaScript codes ... </script>，其中<script> type默认为 text/javascript，可省略。
外部引用：在.js文件中编写，在HTML文件中插入 <script src="文件路径"></script>。
代码位置：进行页面初始化的代码放在 <head> 部分，因为初始化要求提前进行。若是通过事件调用function则对位置无要求，可以放在 <body> 中。

2.语句和符号

JavaScript codes; ，分号可省略，但是不推荐。

3.注释

// 单行注释
/* 多行注释 */

4.变量

定义变量： var 变量名;
命名规则：和大多数语言相同。
- 以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
- 不允许使用JavaScript关键字和保留字做变量名。
区分大小写。

// 先声明再赋值，不声明直接使用的是全局变量，不规范。
var mychar;
mychar = "javascript";
var mynum = 6;

// 重复赋值
var mychar;
mychar = "javascript";
mychar = "hello";

5.判断语句（if…else）

if(condition) {
    // condition is true 
	... 
}
else {
    // condition is false
	... 
}

6.函数

function functionName() {
    // 若有参数用,隔开
     ...
}

// e.g. 两数相加
function add2(num1, num2) {
   
	return num1 + num2;
}

2.窗口交互

向网页中输入内容，与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现。

1.输出内容

document.write() ：直接向HTML输出流写内容，即在网页中输出内容。

// 直接输出""内的内容
document.write("Hello World!");

// 输出变量的内容
var mystr = "Hello World!";
document.write(mystr);

// 输出多项内容
document.write("Hello" + " World!"); 

// 输出HTML标签
document.write("Hello" + "<br>"); 
document.write("World!");

输出空格

// 因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。
document.write("   1      2                3  "); // 1 2 3

// 解决方法一：输出HTML标签&nbsp
document.write("&nbsp;&nbsp;" + "1" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "23"); //   1    23

// 解决方法二：CSS样式
document.write("<span style='white-space:pre;'>" + "1  2  3" + "</span>"); // 1  2  3

2.警告

alert(str); ，str为显示在消息对话框中的文本，可以是字符串或变量。
在点击对话框"确定"按钮前，不能进行任何其它操作。
可以用于调试程序。

3.确认

confirm(str); ，str为显示在消息对话框中的文本。返回Boolean值，确定返回true，取消返回false。
在点击对话框"确定"或"取消"按钮前，不能进行任何其它操作。
用于允许用户做选择的动作。

4.提问

prompt(str1, str2); ，str1为显示在消息对话框中的文本，不可更改；str2为文本框中的内容，可以更改。确定返回str2，取消返回null。
在点击对话框"确定"或"取消"按钮前，不能进行任何其它操作。
用于询问一些需要与用户交互的信息。

5.打开窗口

window.open([URL], [窗口名称], [参数字符串]);

参数说明

URL：可选参数，在窗口中要显示网页的网址或路径。
如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
- 该名称由字母、数字和下划线字符组成，不能包含空格。
- 具有特殊意义的名称：
  _blank：在新窗口显示目标网页。
  _self：在当前窗口显示目标网页。
  _top：框架网页中在上部窗口中显示目标网页。
- 相同名称的窗口只能创建一个，要想创建多个窗口则名称不能相同。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数	值	说明
top	Number	窗口顶部距离屏幕顶部的像素数
left	Number	窗口左端距离屏幕左端的像素数
width	Number	窗口的宽度
height	Number	窗口的高度
menubar	yes, no	窗口有没有菜单
toolbar	yes, no	窗口有没有工具条
scrollbars	yes, no	窗口有没有滚动条
status	yes, no	窗口有没有状态栏

e.g.

// 打开http://www.imooc.com，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口。
window.open("http://www.imooc.com", "_blank", "width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes");

6.关闭窗口

关闭本窗口： window.close(); ，关闭指定窗口： <窗口对象>.close(); 。

e.g.

// 在打开窗口的同时关闭窗口
 var mywin = window.open("http://www.imooc.com"); 
 mywin.close();

3.DOM操作

用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作。

1.DOM

DOM（Document Object Model）：文档对象模型，定义访问和处理HTML文档的标准方法，将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
节点树
常见的DOM节点
- 元素节点：上图中 <html> 、 <body> 、 <p> 等都是元素节点，即标签。
- 文本节点：向用户展示的内容，如 <li>...</li> 中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性，如 <a> 标签的链接属性href="http://www.imooc.com"。