JavaScript知识笔记（一）——入门、语句、注释、变量、函数、输出内容、对话框、窗口

JavaScript可以提供漂亮的网页、令用户满意的上网体验。

1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

引用JavaScript：

一、使用<script>标签在HTML文件中添加JavaScript代码，如图:

二、HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

注意:在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

<script src="script.js"></script>

我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

语句和符号：

JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

每一句JavaScript代码格式: 语句;

先来看看下面代码

<script type="text/javascript">
   alert("hello!");
</script>

例子中的alert("hello!");就是一个JavaScript语句。

一行的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。

看看下面这段代码,有三条语句，每句结束后都有";"，按顺序执行语句。

<script type="text/javascript">document.write("I");document.write("love");document.write("JavaScript");
</script>

注意:

1. “;”分号要在英文状态下输入，同样，JS中的代码和符号都要在英文状态下输入。

2. 虽然分号“;”也可以不写，但我们要养成编程的好习惯，记得在语句末尾写上分号。

注释：

注释能提高代码的可读性，帮助自己和别人阅读和理解你所编写的JavaScript代码，注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

我们为了方便阅读，注释内容一般放到需要解释语句的结尾处或周围。

单行注释，在注释内容前加符号 “//”。

<script type="text/javascript">document.write("单行注释使用'//'");  // 我是注释，该语句功能在网页中输出内容
</script>

多行注释以"/*"开始，以"*/"结束。

<script type="text/javascript">document.write("多行注释使用/*注释内容*/");/*多行注释养成书写注释的良好习惯*/
</script>

变量：

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

定义变量使用关键字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. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

判断语句：

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

语法:

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

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

<script type="text/javascript">
   var myage = 18;if(myage>=18)  //myage>=18是判断条件
   { document.write("你是成年人。");}
   else  //否则年龄小于18
   { document.write("未满18岁，你不是成年人。");}
</script>

函数：

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

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

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

说明:

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

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

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

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

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

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

输出内容：

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

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

<script type="text/javascript">document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

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

<script type="text/javascript">var mystr="hello world!";document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

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

<scripttype="text/javascript">var mystr="hello";document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

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

<script type="text/javascript">var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符document.write("JavaScript");
</script>

警告对话框：

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

语法:

alert(字符串或变量);

看下面的代码:

<script type="text/javascript">var mynum = 30;alert("hello!");alert(mynum);
</script>

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

结果:按顺序弹出消息框

注意:

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

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

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

确认对话框：

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

语法:

confirm(str);

参数说明:

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

返回值:

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

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

看下面的代码:

<script type="text/javascript">var mymessage=confirm("你喜欢JavaScript吗?");if(mymessage==true){   document.write("很好,加油!");   }else{  document.write("JS功能强大，要学习噢!");   }
</script>

结果:

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

提问对话框：

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

语法:

prompt(str1, str2);

参数说明：

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

返回值:

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

看看下面代码:

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

结果:

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

打开新窗口：

open() 方法用于打开一个新的窗口。

语法：

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

参数说明:

URL：打开窗口的网址或路径。
窗口名称：被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。
参数字符串：设置窗口参数，各参数用逗号隔开。

参数表:

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

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

注意：

1.参数之间逗号及等号前后有空格，该字符串无效，只有删除空格才能正常运行。

2.运行结果考虑浏览器兼容问题。

关闭窗口：

close()关闭窗口

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中mywin.close();
</script>

注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。

————————————————————————————————————————————————————————————————

以上内容参考自慕课网：http://www.imooc.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/386129.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HTML如何添加锚点，总结到位

HTML如何添加锚点，总结到位

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…
阅读更多...
JavaScript知识笔记（二）——事件

JavaScript知识笔记（二）——事件

事件&#xff1a; JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说&#xff0c;当用户单击按钮或者提交表单数据时&#xff0c;就发生一个鼠标单击&#xff08;onclick&#x…
阅读更多...
HTML如何添加锚点，我先收藏为敬

HTML如何添加锚点，我先收藏为敬

背景 我18年本科毕业&#xff0c;年前已有换工作想法&#xff0c;一直没有付诸行动&#xff0c;疫情爆发后回到老家&#xff0c;年后开始找工作&#xff0c;对于自己水平不是很清楚&#xff0c;之前找工作一直都挺顺利的。大学毕业没有留在实习单位继续做前端开发&#xff0c;…
阅读更多...
JavaScript知识笔记（三）——内置对象、浏览器对象

JavaScript知识笔记（三）——内置对象、浏览器对象

内置对象&#xff1a; &#xff08;与Java很像&#xff09;JavaScript 中的所有事物都是对象&#xff0c;如:字符串、数值、数组、函数等&#xff0c;每个对象带有属性和方法。 对象的属性&#xff1a;反映该对象某些特定的性质的&#xff0c;如&#xff1a;字符串的长度、图像…
阅读更多...
HTML如何添加锚点，文末领取面试资料

HTML如何添加锚点，文末领取面试资料

开始 我大学读的是大专&#xff0c;在学校学的是机电一体化。临近毕业的时候选择了学习web前端技术&#xff0c;因为做机电实在又累工资又低&#xff0c;而我更喜欢坐办公室的工作&#xff0c;有空调吹&#xff0c;我很现实&#xff0c;就是想多赚一点钱。到现在做了两年前端的…
阅读更多...
HTML如何添加锚点，论程序员成长的正确姿势

HTML如何添加锚点，论程序员成长的正确姿势

前言 年前准备换工作&#xff0c;总结了一波面试最频繁的面试问题跟大家交流。此文章是关于浏览器的常见问题&#xff0c;大概面试10家遇到6家提问类似问题&#xff08;主要是大厂和中厂&#xff09;。目前入职滴滴出行成都团队。 css盒模型 1&#xff0c;css盒模型基本概念…
阅读更多...
DOM（文档对象模型）

DOM（文档对象模型）

文档对象模型DOM&#xff08;Document Object Model&#xff09;定义访问和处理HTML文档的标准方法。 DOM 将HTML文档呈现为带有元素、属性和文本的树结构&#xff08;节点树&#xff09;。 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合&…
阅读更多...
HTML实体字符列表，总结到位

HTML实体字符列表，总结到位

前言 每年毕业季都能听到很多报道说大学毕业生找工作难&#xff0c;以前看到这类新闻一直觉得无所谓。因为总觉得离我还早&#xff0c;但今年轮到我毕业了&#xff0c;才发现不幸终于降临到我的头上。 简历 首先肯定是要准备一份自己的简历&#xff0c;简历经常是给面试官的第…
阅读更多...
你必须知道的CSS盒模型，面试建议

你必须知道的CSS盒模型，面试建议

什么是HTML? HTML: ( Hypertext Markup Language )超文本标记语言&#xff0c;是一种标识性的语言。它包括一系列标签&#xff0e;通过这些标签可以将网络上的文档格式统一&#xff0c;使分散的Internet资源连接为一个逻辑整体。 特点: 简易性&#xff1a;超级文本标记语言版…
阅读更多...
你必须知道的CSS盒模型，顺利通过阿里面试

你必须知道的CSS盒模型，顺利通过阿里面试

前言 正式学习前端大概 3 年多了&#xff0c;接触前端大概 4 年了&#xff0c;很早就想整理这个书单了&#xff0c;因为常常会有朋友问&#xff0c;前端该如何学习&#xff0c;学习前端该看哪些书&#xff0c;我就讲讲我学习的道路中看的一些书&#xff0c;虽然整理的书不多&a…
阅读更多...
保驾护航金三银四，100%好评！

保驾护航金三银四，100%好评！

前端的兴起 前端真正兴起和开始频繁出现在大家的视线里&#xff0c;大概是在十年前。彼时的 Web 开发基本是由后端主导&#xff0c;前端能做的只是校验一下数据、操作一下 DOM。&#xff08;其中数据检验是 JS 产生的根本原因&#xff1a;当时网络太慢&#xff0c;在服务端检验…
阅读更多...
保驾护航金三银四，万字解析！

保驾护航金三银四，万字解析！

从事前端开发工作差不多3年了&#xff0c;自己也从一个什么都不懂的小白积累了一定的理论和实践经验&#xff0c;并且自己也对这3年来的学习实践历程有一个梳理&#xff0c;以供后面来细细回忆品味。 1、为什么选择学习前端开发&#xff1f; 你可能是因为兴趣&#xff0c;完成…
阅读更多...
保驾护航金三银四，使用指南

保驾护航金三银四，使用指南

前言 作为一个程序员&#xff0c;当然总是期望自己的代码能「一次编写&#xff0c;四处运行」&#xff0c;但真实经验往往是「一处修改&#xff0c;百处填坑」&#xff0c;依赖落后了好几个版本了想要升级、老代码已经看着很不爽了打算重构&#xff0c;都需要下坚决的决心&…
阅读更多...
保驾护航金三银四，内容太过真实

保驾护航金三银四，内容太过真实

前言 正式学习前端大概 3 年多了&#xff0c;接触前端大概 4 年了&#xff0c;很早就想整理这个书单了&#xff0c;因为常常会有朋友问&#xff0c;前端该如何学习&#xff0c;学习前端该看哪些书&#xff0c;我就讲讲我学习的道路中看的一些书&#xff0c;虽然整理的书不多&a…
阅读更多...
决策树——ID3和C4.5

决策树——ID3和C4.5

决策树&#xff08;decision tree&#xff09;是一个树结构&#xff08;可以是二叉树或非二叉树&#xff09;。其每个非叶节点表示一个特征属性上的测试&#xff0c;每个分支代表这个特征属性在某个值域上的输出&#xff0c;而每个叶节点存放一个类别。使用决策树进行决策的过程…
阅读更多...
保驾护航金三银四，分分钟搞定!

保驾护航金三银四，分分钟搞定!

开头 Web前端开发基础知识学习路线分享&#xff0c;前端开发入门学习三大基础&#xff1a;HTML、CSS、JavaScript。除此之外还要学习数据可视化、Vue、React、Angular相关框架&#xff0c;熟练运用框架提升开发效率&#xff0c;提升稳定性。 [外链图片转存失败,源站可能有防盗…
阅读更多...
保驾护航金三银四，吐血整理

保驾护航金三银四，吐血整理

前言 又逢金三银四&#xff0c;拿到大厂的offer一直是程序员朋友的一个目标&#xff0c;我是如何拿到大厂offer的呢&#xff0c;今天给大家分享我拿到大厂offer的利器&#xff0c;前端核心知识面试宝典&#xff0c;内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题\数…
阅读更多...
Ajax知识笔记——入门，同步和异步，XHR

Ajax知识笔记——入门，同步和异步，XHR

Ajax全称&#xff1a;Asynchronous Javascript and XML &#xff0c;异步的javascript和XML。 Ajax不是一种语言&#xff0c;是一种无需重新加载整个网页的情况下&#xff0c;能更新部分网页的技术。&#xff08;与后台交互&#xff0c;实现局部更新&#xff0c;异步更新&…
阅读更多...
保驾护航金三银四，含BATJM大厂

保驾护航金三银四，含BATJM大厂

前言 跳槽&#xff0c;这在 IT 互联网圈是非常普遍的&#xff0c;也是让自己升职加薪&#xff0c;走上人生巅峰的重要方式。那么作为一个普通的Android程序猿&#xff0c;我们如何才能斩获大厂offer 呢&#xff1f; 疫情向好、面试在即&#xff0c;还在迷茫踌躇中的后浪们&…
阅读更多...
保驾护航金三银四，妈妈再也不用担心我找工作了！

保驾护航金三银四，妈妈再也不用担心我找工作了！

01 前言 2021是不平凡的一年&#xff0c;这一年里发生许多事情&#xff0c;大家也都知道。对于互联网行业来说也是一次重大的打击&#xff0c;也有一些企业在这次疫情中倒闭了&#xff0c;所以可能对于今年2021年毕业的同学来说是一次很大的考验&#xff0c;也关乎我们的前途。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023