JS重新学习笔记（每天进步一点点，持续更新marksheng）

红太狼 2023-01-09 12:59 97阅读 0赞

# JavaScript-什么是变量 #

什么是变量? 从字面上看，变量是**可变的量**；从编程角度讲，变量是用于**存储某种/某些数值的存储器**。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

[![8d48dfc53acf24e4d8ffa3d2ac3758b7.png][]][8d48dfc53acf24e4d8ffa3d2ac3758b7.png 1]

**定义变量使用关键字var,语法如下：**

var 变量名

**变量名可以任意取名，但要遵循命名规则:**

1.变量必须使用字母、下划线(\_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(\_)或者美元符($)组成。

3.不能使用JavaScript关键词与JavaScript保留字。

**变量要先声明再赋值，如下：**

var mychar;
    mychar="javascript";
    var mynum = 6;

**变量可以重复赋值，如下：**

var mychar;
    mychar="javascript";
    mychar="hello";

**注意:**

1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。

2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

# JavaScript-判断语句（if...else） #

if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

**语法****:**

if(条件)
    { 条件成立时执行的代码 }
    else
    { 条件不成立时执行的代码 }

假设我们通过年龄来判断是否为成年人，如年龄大于等于18岁，是成年人，否则不是成年人。**代码表示如下****:**

### 任务 ###

假设小明数字成绩考试了80分，使用if...else语句判断考试成绩，是否及格(60分以上为及格)。补充右边编辑器的第8、12行代码，完成功能。

# JavaScript-什么是函数(函数function就是功能) #

有什么用？

数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。

**如何定义一个函数呢？基本语法如下:**

function 函数名()
    {
         函数代码;
    }

**说明:**

1. function定义函数的关键字。

2. "函数名"你为函数取的名字。

3. "函数代码"替换为完成特定功能的代码。

我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字：“add2”，代码如下：

function add2(){
       var sum = 3 + 2;
       alert(sum);
    }

**函数调用:**

函数定义好后，是不能自动执行的，所以需调用它,只需直接在需要的位置写函数就ok了,**代码如下:**

[![c4177b0f3e02f5e3b2d70db62592ce14.png][]][c4177b0f3e02f5e3b2d70db62592ce14.png 1]

# JavaScript-输出内容（document.write） #

`document.write()` 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

**第一种****:****输出内容用""括起，直接输出****""****号内的内容。**

**第二种****:****通过变量，输出内容**

**第三种****:****输出多项内容，内容之间用****+****号连接。**

**第四种****:****输出****HTML****标签，并起作用，标签使用""括起来。**

关于JS输出空格问题，请查看wiki中" [JS如何输出空格][JS] "

# JavaScript-警告（alert 消息对话框） #

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

**语法:**

alert(字符串或变量);

**看下面的代码:**

**注:**alert弹出消息对话框(包含一个确定按钮)。

**结果:按顺序弹出消息框**

**[![ed15a6697817db099c71c2048054638c.png][]][ed15a6697817db099c71c2048054638c.png 1]**

[![3d5eaefcdaeae2bff0827ee02616cdf4.png][]][3d5eaefcdaeae2bff0827ee02616cdf4.png 1]

**注意:**

1. 在点击对话框"确定"按钮前，不能进行任何其它操作。

2. 消息对话框通常可以用于调试程序。

3. alert输出内容，可以是字符串或变量，与document.write 相似。

# JavaScript-确认（confirm 消息对话框） #

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

**语法:**

confirm(str);

**参数说明:**

str：在消息对话框中要显示的文本
    返回值: Boolean值

**返回值:**

当用户点击"确定"按钮时，返回true
    当用户点击"取消"按钮时，返回false

**注:** **通过返回值可以判断用户点击了什么按钮**

看下面的代码:

**结果:**

**[![c1cc287f4c661b8b0425b60d63495f18.png][]][c1cc287f4c661b8b0425b60d63495f18.png 1]**

**注: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。**

# JavaScript-提问（prompt 消息对话框） #

**`prompt`**弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

**语法:**

prompt(str1, str2);

**参数说明：**

str1: 要显示在消息对话框中的文本，不可修改
    str2：文本框中的内容，可以修改

**返回值:**

1. 点击确定按钮，文本框中的内容将作为函数返回值
    2. 点击取消按钮，将返回null

看看下面代码:

var myname=prompt("请输入你的姓名:");
    if(myname!=null)
      {   alert("你好"+myname); }
    else
      {  alert("你好 my friend.");  }

**结果:**

**[![0c7f310cae28529f6c395265048666d9.png][]][0c7f310cae28529f6c395265048666d9.png 1]**

**注:在用户点击对话框的按钮前，不能进行任何其它操作。**

# JavaScript-打开新窗口（window.open） #

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

**语法：**

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

**参数说明:**

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

**参数表:**

**[![43cad2e7a3c4241270fa46b3b98b5541.png][]][43cad2e7a3c4241270fa46b3b98b5541.png 1]**

例如:打开http://www.imooc.com网站，大小为300px \* 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

**注意：**运行结果考虑浏览器兼容问题。

[8d48dfc53acf24e4d8ffa3d2ac3758b7.png]: /images/20221119/8e53abf0d51b46089c4a73e55fd21f1c.png
[8d48dfc53acf24e4d8ffa3d2ac3758b7.png 1]: http://img.mukewang.com/52e32dc90001140c04120228.jpg
[c4177b0f3e02f5e3b2d70db62592ce14.png]: https://img-blog.csdnimg.cn/img_convert/c4177b0f3e02f5e3b2d70db62592ce14.png
[c4177b0f3e02f5e3b2d70db62592ce14.png 1]: http://img.mukewang.com/5419430400012de808370459.jpg
[JS]: http://www.imooc.com/wiki/view?pid=167
[ed15a6697817db099c71c2048054638c.png]: https://img-blog.csdnimg.cn/img_convert/ed15a6697817db099c71c2048054638c.png
[ed15a6697817db099c71c2048054638c.png 1]: http://img.mukewang.com/52e362430001bdd204850354.jpg
[3d5eaefcdaeae2bff0827ee02616cdf4.png]: https://img-blog.csdnimg.cn/img_convert/3d5eaefcdaeae2bff0827ee02616cdf4.png
[3d5eaefcdaeae2bff0827ee02616cdf4.png 1]: http://img.mukewang.com/52e362850001024d04840353.jpg
[c1cc287f4c661b8b0425b60d63495f18.png]: https://img-blog.csdnimg.cn/img_convert/c1cc287f4c661b8b0425b60d63495f18.png
[c1cc287f4c661b8b0425b60d63495f18.png 1]: http://img.mukewang.com/52e35bc60001f01a04230353.jpg
[0c7f310cae28529f6c395265048666d9.png]: https://img-blog.csdnimg.cn/img_convert/0c7f310cae28529f6c395265048666d9.png
[0c7f310cae28529f6c395265048666d9.png 1]: http://img.mukewang.com/52e360780001ede107090353.jpg
[43cad2e7a3c4241270fa46b3b98b5541.png]: https://img-blog.csdnimg.cn/img_convert/43cad2e7a3c4241270fa46b3b98b5541.png
[43cad2e7a3c4241270fa46b3b98b5541.png 1]: http://img.mukewang.com/52e3677900013d6a05020261.jpg