JavaScript入门教学

最新推荐文章于 2024-04-20 18:25:50 发布

1day.40

最新推荐文章于 2024-04-20 18:25:50 发布

阅读量229

点赞数 5

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_71089247/article/details/126818895

版权

JavaScript是什么？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

1.JS的主要功能

1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息，控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。

2.入门案例

html中嵌入javascript有2种方式

第一种方式：
写在onclick后面

此时会弹出警告窗

<input type="button" value="hello" οnclick="window.alert('hello js')"/>

第二种方式：
通过脚本块的方式，页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行（这个代码的执行不需要事件）。
此时会弹出警告窗

<script type="text/javascript">
window.alert("first.......");
</script>

3.变量

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

语法：
var 变量名
变量要先声明再赋值

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

变量可以重复赋值

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

注意：
当系统没有赋值的时候，会默认给undefined，undefined是系统的一个存在值
当系统直接没声明直接调用一个值，会报错

4.(if…else)判断语句

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>

5.函数

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

function定义函数的关键字。
"函数名"你为函数取的名字。
"函数代码"替换为完成特定功能的代码。
例子：

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

常用函数

函数名	功能
indexOf	获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf	获取指定字符串在当前字符串中最后一次出现处的索引
replace	替换
substr	截取子字符串
substring	截取子字符串
toLowerCase	转换小写
toUpperCase	转换大写
split	拆分字符串

互动方法

1.输出内容

语法：
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>

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

<script type="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>

2.警告（alert消息对话框）

语法：
alert(字符串或变量);
例子：

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

注意:

在点击对话框"确定"按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert输出内容，可以是字符串或变量，与document.write 相似。

3.确认（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>

4.提问（prompt消息对话框）

弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法：
prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回null
例子：

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

5.打开新窗口（window.open）

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

例子：

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

6.关闭窗口（window.close)

close()关闭窗口
语法：
window.close();//关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例子：

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

DOM操作

1.认识DOM

文档对象模型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”。

2.通过ID获取元素

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

<script type="text/javascript">
  var mychar= document.getElementById("con")          ;
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>

结果:null或[object HTMLParagraphElement]

3.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。
语法：
Object.innerHTML
注意：
1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。
2.注意书写，innerHTML区分大小写。
例子：

<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById('con')          ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML = "Hello World"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>

4.改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法：
Object.style.property=new style;
注意：
Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
基本属性表：

例子：

<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color = "red";
    mychar.style.backgroundColor = "#ccc";
    mychar.style.width = "300px";

  </script>
</body>

在这里插入图片描述

5.显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意：
Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
value取值：

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素
例子：

<script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display ="none"
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display ="block"
		}
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" οnclick="hidetext()" value="隐藏内容" /> 
       <input type="button" οnclick="showtext()" value="显示内容" /> 
    </form>
</body>