JS基础知识

最新推荐文章于 2022-08-30 16:22:55 发布

zxcsabrina

最新推荐文章于 2022-08-30 16:22:55 发布

阅读量904

点赞数

分类专栏： JS类别

本文链接：https://blog.csdn.net/zxcSabrina/article/details/52273943

版权

JS类别专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、为什么学习JS

1.所有主流浏览器都支持javascript。

2.目前，全世界大部分网页都使用javascript。

3.它可以让网页呈现各种动态效果。

4.作为一个web开发师，如果想提供漂亮的网页，令用户满意的上网体验，js是必不可少的工具。

5.学习环境无处不在，只要有文本编辑器，就能写js程序。

6.我们可以用简单命令、完成一些基本的操作。

7.学习js的起点就是处理网页，所以我们先学习基础语法和如何使用DOM进行简单的操作。

二、JS代码的位置

1):使用<script>标签在html文件中添加javascript代码：如图

在html中插入script代码，在script中进行直接书写script代码

2):把html文件和js代码分开，并单独创建一个javascript文件(简称JS)，其文件的后缀通常为.js然后将js代码直接写在js文件中。

在JS文件中不需要写<script></script>直接进行操作即可。document.write("应用js文件！")

3):JS放置的位置，我们可以将js代码放在html文件中的任何位置，但是我们一般放在网页的head或者body部分，放在<head>部分最常用的方式就是在页面的head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后再解析页面的其余部分。放在body部分js代码在网页读取该语句的时候就会被执行。正常情况下js是有先后顺序的，在head里面先执行，在body里面后执行，但是一般情况下我们都是放在head里面直接进行调用，用function方法进行调用。

三、初步认识JS语句和符号

1.javascript语句是发给浏览器的命令：这些命令的作用是告诉浏览器要做的事情。每一句javascript代码格式：

alert("hello");

</script> 上面的例子中alert(“hello!”);就是一个javascript语句。一行的结束就被认定为语句的结束，通常在结尾加上一个分号“；”来表示语句的结束。

2.看看下面这段代码，有三条语句，每句结束后都有“；”按顺序执行语句。

document.write("I");

document.write("love");

document.write("you");

</script>

注意：“；”分号要在英文状态下输入，同样，js中的代码都要在英文状态下输入。虽然分号“；”也可以不写，但是我们要养成编程的好习惯，记得在语句末尾写上分号。

显示结果如下：hello world

四、JS的单行和多行注释功能（注释很重要）

注释的作用是提高代码的可读性，帮助自己和别人阅读理解你所编写的javascript代码，注释的内容不会在网页中显示。注释可分为单行注释和多行注释两种。我们为了方便阅读，注释内容一般放在需要注释语句的结尾处或者周围。

单行注释：在注释内容前面加“//”

多行注释：“/**/”

五、JS中的变量

什么是变量？从字面上看，变量是可变的量，从编程角度来看，变量是用于存储某种/某些数值的存储器，我们可以把变量想象成一个盒子，为了区分不同的盒子，我们可以用box1和box2等名称代表不同盒子，box1就是盒子的名称也就是（变量的名称）

1.var 变量名：

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

1.变量必须使用字母、下划线（_）或者美元符号$开始；

2.然后可以使用任意多个英文bianglia字母、数字、下划线（_）或者是美元符号$组成。

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

变量要先声明再赋值，如下：表示的是我们先声明变量，然后再给这个变量赋值

var mychar 先声明变量

mychar="javascript" ; 给变量赋值

var mynum=6;

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

var mychar;

mychar="javascript";

mychar="hello"这个表示的就是将变量进行重复赋值）

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

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

六、判断语句（if ...else）

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

语法：

if(条件)

{条件成立时，执行的代码}

else

{条件不成立，执行的代码}

案例：假如我们通过年龄来判断是否是成年人，如果年龄大于等于18岁，是成年人，否则不是成年人。代码如下：

var myage;

var myage=18;

if( myage>=18){

document.write("你是成年人")；

}

else{

document.write("未满18周岁，你不是成年人")；

}

</script>

七、什么是函数

函数是完成某个特定的功能的一组语句，如果没有函数，完成任务可能需要五行，十行，甚至是更多的代码，【比如说是从1到100的相加如果我们不调用函数去做的话，那么可能我们就是从1个数1个数的相加】这时我们可以把完成特定功能的代码放在一个函数里，直接调用这个函数，就省了重复输入大量代码的麻烦。一个函数可能是执行某些动作的集合，如果我不集中写一个函数，那么每次用到这个函数的功能的时候我们都要分别写出代码的功能，浪费了大量的代码。如何定义一个函数，基本语法如下：

function 函数名(){

函数代码

}

说明：1.function定义函数的关键字

2.函数名，你为函数取的名字

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

案例：

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

function add2(){

var sum=3+2;

alert(sum);

}

函数调用：函数定义好之后，是不能自动执行的，所以需要调用它，只需要直接在需要调用的位置进行调用函数名称即可。

八、函数调用的方法：

函数调用的方法有两种：

1.当我们在下面的程序中需要调用的时候，我们直接调用函数名称，例如图中的函数名称add2()表示的是直接在适当的位置进行调用相应的函数。

2.或者在html中相关需要引用的位置进行直接点击的时候调用函数 οnclick="add2()"

九、函数的输出内容（函数的输出方式）

1.第一种是输出内容用“”括起，直接输出“”号内的内容。

document.write(" I love javascript ");内容用“”括起来“”里的内容直接输出。

</script>

2.通过变量，输出内容

var mystr="hello world";

document.write(mystr); 直接写变量名称。输出变量存储的内容。

</script>

3.输出多项内容，内容之间用+号连接

var mystr="hello world";

document.write(mystr+“I love you”);

</script>

多项内容用+号连接，如果是事先声明的变量则不用“”如果不是事先声明好的话要用到“”

4.输出html标签，并起作用，标签使用“括起来”

var mystr="hello world";

document.write(mystr+“<br>”);我们先声明变量进行赋值，然后用+号进行连接，后面的标签用“”表示

document.write("javascript");

</script>

十、alert 警告：alert(消息对话框) 多用于调试程序：

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

语法：alert(字符串或者是变量)

var mynum=30;

alert("hello!");

alert(mynum);

</script>

注意：alert弹出消息对话框（包含一个确定按钮）结果。按顺序弹出消息框。

在窗口中分别会弹出hello 和30

注意：1.在点击对话框“确认”按钮前不能进行其他的操作。

2.消息对话框通常可以用于调试程序，看看程序是不是通的，通过弹出的内容进行确认。

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

十一、confirm 消息对话框【确认取消】

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

语法：confirm(str);

参数说明：str在消息对话框中要显示的文本返回值：Boolean值

返回值：当用户点击“确定”按钮时，返回true

当用户点击“取消”按钮时，返回false

注意：通过返回值就可以判断用户点击了什么按钮。

案例：

var mymessage=confirm("你喜欢javascript吗？")；//confirm后面括号内显示的内容是在弹出框中显示的内容

if(mymessage==true){

document.write("很好，加油！")；

}

else{

document.write("JS功能强大，要学习奥！")；

}

</script>

显示效果如下：

如果点击的是确定，则会显示的是很好，加油！如果点击取消的话则显示的是js功能强大，要学习哦！

案例：通过点击按钮，进行性别的确认。

上面的代码表示的是，我们在浏览器中先会出现一个按钮点击按钮就会弹出这个确认框，进行性别的确认，通过我们点击的是确定还是取消传进去的是true或者是false进行相关的内容的显示。

显示的结果是

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

语法：prompt(str1,str2)

参数说明： str1：要显示在消息对话框中的文本，不可修改。//表示的是显示在文本框中的文字内容。

str2:文本框中的内容，可以修改 //表示的是我们通过文本输入框输入的内容。

返回值：1.点击确认按钮，文本框中的内容将作为函数返回值；

2.点击取消按钮，将返回null.

案例：代码如下：

var myname=prompt("请输入你的姓名")；

if (myname!=null){ //会弹出一个窗口，这个窗口上面有文字还有输入框，如果我们输入了内容，就会将输入的姓名连同你好一起弹出，

alert("你好"+myname);

}

else{

alert("你好 myfriend"); //如果没有输入姓名的话，检测到输入的是空，那么弹出框就是你好myfriend

}

表示的是先声明变量，给变量赋一个值，让他等于prompt，显示的就是一个确认键和一个取消键，还有一个文本输入框。下面的条件，如果输入了名称了，名称不为空，那么就会显示并且会弹出我输入的姓名加上你好，如果我没有输入姓名，那么弹出框显示的就是你好myfriend.

截图如下：在浏览器中显示的就是以下的内容：

我们点击小红选择确认，系统会显示小红你好，alert表示的就是一个弹出的并且有确认字样的内容。

案例：输入成绩，根据输入的成绩进行评价：

function rec(){

var score;

score=prompt("输入你的成绩，然后根据输入成绩做出评价")；

if(score>=90){

document.write("你很棒")；

}

else if(score>=75){

document.write("不错呦")；

}

else if( score>=60){

document.write("要加油！")；

}

else{

document.write("要努力了")；

}

根据在输入框中输入的分数，进行弹出相应的文字弹出框。

十三、打开新窗口 window.open open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：window.open([URL]，[窗口名称]，[参数字符串])

参数说明：1.URL可选参数，在窗口中要显示的网页的网址或路径。如果省略这个参数，或者它的值是空字符，那么窗口不会显示任何文档。

2.窗口名称：可选参数，被打开窗口的名称。其中 1)：该名称由字母、数字和下划线字符组成 2): _top、_blank、_selft具有特殊的意义。

_top：框架网页中在上部窗口中显示目标网页

_blank：在新窗口显示目标网页

_selft:在当前窗口显示目标网页

3):相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。

4):name不能包含有空格

3.参数字符串：可选参数，设置窗口参数，各参数之间用逗号隔开。

上面的这些表示的就是参数的参数内容：我们可以根据这个参数的内容进行设置新打开窗口网页的大小以及尺寸。

案例：打开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') 上面这个例子中分别显示的是就是链接地址，窗口名称以及打开状态，参数说明等等

</script>

案例：

function Wopen(){

window.open('http://www.imooc.com','_blank','width=300, height=200, menubar=no,toolbar=no, status=no, scrollbars=yes')

}

</script>

<body>

</body>

在窗口中显示的效果如下：

在网页中显示的效果是这样的，在新的窗口会弹出新页面，同时窗口的大小是300*200的，距离顶部有距离，距离左侧有距离。

十四、关闭窗口window.close

close()关闭窗口

用法：window.close() 关闭本窗口

或者是<窗口对象>.close(); 关闭指定的窗口，例如这个是在之前的设置中显示的窗口，然后我们现在要做的是将新建的窗口关闭。

案例：

1):关闭新建的窗口： var mymin=window.open('http://www.imooc.com'); 新打开的窗口对象存储在变量mymin中

mymin.close(); 将窗口关闭

2):关闭窗口实际例子：

function wopen1(){

var my=window.open('http://www.imooc,' '_blank,' ' width=600, height=400'); 打开新窗口

my.close(); 关闭打开的新窗口

}

显示效果如下：当我们打开浏览器浏览的时候有新页面显示，但是一瞬间，页面就自动关闭了，这个运用的就是().close 括号内是指定的具体页面，这个页面在上面的变量中定义过。

案例：promt if else window.open()知识点的联合应用：

要求：1.新窗口打开时弹出确认框，是否打开，提示：使用if判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。2.通过输入对话框，确认打开的网址，默认为http://www.imooc.com 。3.打开的窗口要求，宽400像素，高500像素，无菜单栏，无工具栏。

方法一代码如下：

function test(){

var web=prompt("是否打开窗口默认网站是：http://www.imooc.com");

if（web!=null）{

window.open('http://www.imooc.com','_blank', 'width=400, height=500,');

}

显示效果如下：

打开浏览器，然后弹出一个输入框，是否输入网址，如果输入了网址之后，表示的是输入的内容不为空，所以就会弹出一个新的窗口页面，这个页面有尺寸的大小。

方法二：知识点运用的是 confirm、 prompt 、 if...else 、

先确认手否先打开新窗口，点击确定之后就会弹出输入框，进行确认是否要打开新的慕课网页

function test(){

var chuangkou=confirm("是否打开窗口")；

if(chuangkou==true){

var web1=prompt("是否打开窗口默认网站是：http://www.imooc.com");

}

if( web1!=null){

window.open('http://www.imooc.com','_blank', 'width=400, height=500,');

}

显示效果如下：

十五、认识DOM

文档对象模式DOM（Document Object Model）定义访问和处理HTML文档的标准方法，DOM将HTML文档呈现为带有元素、属性和文本树结构（节点树）

HTML元素：各种类型的标签，例如p,ul等不同的标签

属性：即对应标签后面的属性。例如一个div标签后面有各种对应的宽和高的值就是属性。

文本树结构：例如a标签链接，后面有文本标识，比如说是链接到百度里面去了，这个文字对应的就是文本树结构，就是相当于是一层一层的关系进行承接下来，就可以称之为文本树。

HTML代码分解为DOM节点层次图：

将整个html分解为头部和身体部分，身体部分各个标签之间进行分解，例如p标签下面还有对应的a标签等等。

HTML文档可以说是由节点构成的集合，三种常见的DOM节点：

1.元素节点：上图中的<html> <body> <p>等都是元素节点，即标签。

2.文本节点：向用户展示的内容，如：<li>...<li>中的javascript、dom、css等文本。

3.属性节点：元素属性，如<a>标签的链接属性href=“http://www.imooc.com”看下面的代码：

<a href="http://www.imooc.com">javascript</a>

这个表示的就是将html进行分解了，左侧是属性节点，右侧是文本节点。

十六、通过ID获取元素

学过html/css样式，都知道，网页由标签将信息组织起来，而标签的id的属性值是唯一的，就像每个人的身份证号是一样的，只要通过身份证号就可以找到相对应的人，那么在网页中我们通过id先找标签，然后进行操作（在网页中一个id代表的是一个标签或者是代码，所以我们在指定一个唯一的id之后对应的js特效就会针对某一块进行显示）

语法：document.getElementById("id")

显示的代码如下：

结果显示如下：

注意：获取的元素是一个对象，如想对这个元素进行操作，我们要通过它的属性或者是方法，比如说是我们通过这个id我们能获取到这个id代表的元素，但是要具体的去操作这个元素，让其显示不同的内容则必须要有新的方法新的函数去控制这个元素。

<body>

<p id="con">javascript</p>

var mychar=document.getElementById("con");

document.write("结果:"+mychar);

</body>

十七、innerHTML: 属性用于获取或替换html元素的内容：

语法：object.innerhtml

注意： 1.object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

2.注意书写，innerHtml区分大小写

案例：我们通过id="con"获取<p>元素，并将元素的内容输出和改变元素内容的代码如下：

hello world !

</p>

var mycon=document.getElementById("con");

//我们通过id获取到了在html中书写的文本内容。//

document.write("p标签原始内容："+mycon.innerHTML+"<br>");

//【mycon.innerHTML指代的原始的id获取的内容 hello world ！】//

mycon.innerHTML=" new next!";

//【运用 mycon.innerHTML的内容进行重新更改。然后再输出的时候就会将新的内容输出出来。】//

document.write("p标签修改后的内容："+mycon.innerHTML)；

</script>

十八、JS改变HTML样式

HTML DOM允许javascript改变html元素的样式。如何改变html元素的样式。

语法：

object.style.property=new style;

其中：object表示的是我们获取的变量的方法，后面的property表示的是我们要改变的样式属性，比如说是背景颜色，文字字体大小。new style 表示的是新属性，比如说是颜色变成红色的“red”等。这里面的property表示的是属性，后面的 new style是新属性的值。

注意：object是获取的元素对象，如通过document.getElementById("id")获取的元素。

基本属性表：

这个表中只是一小部分css样式属性，其他样式也可以通过该方法设置和修改，一些其他的css的样式同样可以直接修改。

案例：

改变<p>元素的样式，将颜色改为红色，字号改为20，背景颜色改为蓝

<p id="pcon">hello world </p>

var mychar=document.getElementById("pcon");

mychar.style.color="red"; 我们将内容的样式属性进行重新设置，将文字颜色设置成红色

mychar.style.fontsize="20";

mychar.style.backgroundColor="blue";

</script>

显示结果如下：

更改后颜色变成了红色，字体大小变成了20像素，文字背景色是蓝色的。

注意：优先级高低的问题，比如之前我们写的p标签有自己的内容，颜色是黑色的，在之后接下来我们对其样式进行更改，他的样式就会改变了。上面表示的内容是，我们通过js后加的样式的属性优先级别是最高的。

十九、显示和隐藏属性：display属性

网页中经常会看到显示和隐藏的效果，就是比如说是类似于网页顶部banner的收放问题，刚打开浏览器的时候会看到banner,当我们往下浏览的时候，显示的banner就隐藏起来了。

语法：object.style.display=value 注意：后面的value的值是none或者是display隐藏或者是显示的内容，我们通过id获取到相应的内容，就是相应的属性内容项，然后决定是显示还是隐藏。显示和隐藏就是后面的value值去决定的。

注意：object是获取的元素对象，如通过document.ElementById("id")获取的元素。

value取值：

代码如上：显示的内容如下：

1）

2）

3）

点击按钮，不显示段落内容就会将内容隐藏起来，隐藏之后点击显示段落内容，就会将隐藏的内容进行显示。

十八、控制类名（className属性）这个就是为某个元素设置新的属性通过js来控制、我们通过js引用新的样式名称即可

className:属性设置或返回元素的class属性

语法：object.className=classname;注意object表示的是我们获取的变量的名称，而后面的classname表示的是我们前面style里面自己定义的样式名称。

作用：1.获取元素的class属性

2.为网页内的某个元素指定一个css样式来更改改元素的外观。

案例：

获得<p>元素的class属性和改变className注意这个className是固定的写法，表示的是我们要根据操作进行替换。

<style>

input{

font-size:10px;

}

.one{

width:200px;

background-color:#CCC;

}

.two{

font-size:18px;

color:#F00;

}

</style>

<body>

<p id=”con” class=”one”>//我们自己定义的样式在开始执行的时候显示的是我们自己定义的样式

javascript

</p>

<form>

</form> //鼠标点击按钮的时候将原来的样式通过js替换成新的样式

var mychar=document.getElementById('con'); //通过id获取到我们之前自己定义的元素标签

document.write("p 元素class值："+mychar.className+"<br>");//将新标签通过className输出引用的样式名称

function modifyclass(){

mychar.className="two" //通过JS将原来元素引用的样式进行替换成新的样式

}

</script>

</body>

显示效果如下：点击之后显示的效果如下：

点击按钮之后就将新的样式进行替换了，

案例：

<title>className属性样例2</title>
     <style>
       body{
           font-size: 16px;
       }
         .one{
            border: 1px solid #eee;
             width: 230px;
             height: 50px;
             background: #ccc;
             color: red;
         }
         .two{
             border: 1px solid #ccc;
             width: 230px;
             height: 50px;
             background: #9CF;
             color: blue;
         }
     </style>
</head>
<body>
   <p id="p1">
       javascript使网页样式动态此熬过并实现与用户交互送功能
   </p>
   <input type="button" value="添加样式" onclick="add()">
    <p id="p2">javascript使用户显示丰台效果比你底线用户交互Fong能</p>
  <input type="button" value="更改外观" onclick="modify()">
 <script type="text/javascript">
     function  add(){
         var  p1=document.getElementById("p1");  //获取到p1的元素标签
         p1.className="one";  //将p1的元素标签进行更改样式
     }
     function  modify(){
         var p2=document.getElementById("p2");  //获取到P2标签 
         p2.className="two"; //将p2的元素进行更改样式 

     }
 </script>  上述这种方式就是通过js进行更改元素标签的样式
</body>

显示效果如图：

分别点击之后就会执行js的特殊效果：点击之后效果如图所示。

zxcsabrina

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识

一、为什么学习JS1.所有主流浏览器都支持javascript。2.目前，全世界大部分网页都使用javascript。3.它可以让网页呈现各种动态效果。4.作为一个web开发师，如果想提供漂亮的网页，令用户满意的上网体验，js是必不可少的工具。5.学习环境无处不在，只要有文本编辑器，就能写js程序。6.我们可以用简单命令、完成一些基本的操作。7.学习js的起点就是处理网
复制链接

扫一扫

专栏目录