JavaScript 的学习与使用方法

yuyezhulan

我也可以独立（引用JS外部文件）

通过前面知识学习，我们知道使用<script>标签在HTML文件中添加JavaScript代码，如图:

JavaScript代码只能写在HTML文件中吗?当然不是，我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

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

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

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

任务

注意：在右边编辑器中有html文件和script.js文件

1.index.html文件中的第6行使用

<script src="script.js"></script>代码引用script.js文件。

2.现在在script.js文件中写入document.write("引用JS文件!"); ，JS代码就直接运行了。

找到你的位置（JS在页面中的位置）

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

任务

我们试一试，在不同位置写入JS代码:

1.在右边编辑器的第7行输入document.write("I love");

2.在右边编辑器的第12行输入

document.write("javascript");

 

认识语句和符号

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. 虽然分号“;”也可以不写，但我们要养成编程的好习惯，记得在语句末尾写上分号。

 

什么是变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用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. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

 

什么是函数

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

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

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

说明:

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

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

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

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

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

函数调用:

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

任务

补充右边编辑器第7和15行，实现如下功能:

网页中有一按钮(名字"点击我")，当点击按钮后调用函数contxt(),弹出对话框"哈哈，调用函数了!"。

 

输出内容（document.write）

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>

确认（confirm 消息对话框）





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




语法:


prompt(str1, str2);




参数说明：




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




返回值:




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




看看下面代码:




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




结果:




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


 




 


任务


 


补充右边编辑器第9行代码，使用prompt()消息框，输入你的成绩，根据输入的成绩做出评价。


 


打开新窗口（window.open）




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.运行结果考虑浏览器兼容问题。


 


 




任务


在右边编辑器第8行代码，补充代码，打开http://www.imooc.com网页，将在新窗体中打开，宽为600，高为400，距屏顶100像素，屏左0像素，无菜单条，无滚动条，无状态栏。当点击按钮时，打开新窗口。


 


打开新窗口（window.open）


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.运行结果考虑浏览器兼容问题。


 




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


先来看看下面代码:




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




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 DOM</a>






 




任务


通过ID获取元素




学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。


语法:


 document.getElementById(“id”) 


看看下面代码:




结果:null或[object HTMLParagraphElement]




注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。




任务


在右边编辑器中，补充第10行代码，通过document.getElementById获取id为con的p标签。


第11行为输出获取的元素，看看结果是什么。


 


innerHTML 属性


innerHTML 属性用于获取或替换 HTML 元素的内容。


语法:




Object.innerHTML



改变 HTML 样式


HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？


语法:




Object.style.property=new style;




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



 


显示和隐藏（display属性）


网页中经常会看到显示和隐藏的效果，可通过display属性来设置。


语法：


Object.style.display = value


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


 


 


显示和隐藏（display属性）


网页中经常会看到显示和隐藏的效果，可通过display属性来设置。


语法：


Object.style.display = value


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


value取值:




看看下面代码:


注意取值一定要使用引号将两者包含起来；


 


控制类名（className 属性）




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


语法：


object.className = classname


作用:


1.获取元素的class 属性


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


看看下面代码，获得 <p> 元素的 class 属性和改变className：




结果:






任务


我们通过className属性来设置元素的样式:


1.在右边编辑第33行补充代码，给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。


2.在右边编辑第37行补充代码，给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式


 


编程挑战




小伙伴们，请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。




任务


一、定义"改变颜色"的函数


提示:
obj.style.color
obj.style.backgroundColor 


二、定义"改变宽高"的函数


提示:
obj.style.width
obj.style.height 


三、定义"隐藏内容"的函数


提示:
obj.style.display="none";


四、定义"显示内容"的函数


提示:
obj.style.display="block";


五、定义"取消设置"的函数


提示: 
使用confirm()确定框，来确认是否取消设置。
如是将以上所有的设置恢复原始值,否则不做操作。



六、当点击相应按钮，执行相应操作，为按钮添加相应事件


 


编程挑战




小伙伴们，请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。




任务


一、定义"改变颜色"的函数


提示:
obj.style.color
obj.style.backgroundColor 


二、定义"改变宽高"的函数


提示:
obj.style.width
obj.style.height 


三、定义"隐藏内容"的函数


提示:
obj.style.display="none";


四、定义"显示内容"的函数


提示:
obj.style.display="block";


五、定义"取消设置"的函数


提示: 
使用confirm()确定框，来确认是否取消设置。
如是将以上所有的设置恢复原始值,否则不做操作。



六、当点击相应按钮，执行相应操作，为按钮添加相应事件




 


 


 


 




 













        
    

 
                    
            
                

                  
 
        

	 
        

            

                                
分类：
 
                                                                
技术点：

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode