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 变量名;
命名规则：和大多数语言相同。
区分大小写。

// 先声明再赋值，不声明直接使用的是全局变量，不规范。
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(var num1, var 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样式，实现简单的动态操作。

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

JavaScript入门篇

1.基础语法

2.窗口交互

3.DOM操作

4.综合练习

猜你喜欢