javascript基础入门教程,javascript简单代码

最新推荐文章于 2024-10-10 11:54:17 发布

阳阳2013哈哈

最新推荐文章于 2024-10-10 11:54:17 发布

阅读量108

点赞数

文章标签：服务器

本文链接：https://blog.csdn.net/mynote/article/details/134529087

版权

大家好，给大家分享一下javascript基础入门教程，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

1.基础引入

1.1<>标签插入代码

内部插入JS代码：

使用<>标签在HTML网页中插入JavaScript代码，<>标签成对出现，并把JavaScript代码写在<></>之间，例如，< type="text/java">表示在<></>之间的是文本类型(text),java是为了告诉浏览器里面的文本是属于JavaScript语言。

外部插入JS代码：

单独创建一个JavaScript文件（简称JS文件），其文件后缀名为.js ，然后将JS代码直接写在JS文件中，不需要<>标签，然后在HTML文件中使用<>标签，例如：创建了一个.js文件，在HTML中写入< src =".js"></>即可运行JS代码GPT改写。

JS在页面的位置：

java作为一门脚本语言是可以（<>）放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以位置在前的先被执行

1.2注释

单行注释：//+注释内容
多行注释：/* + 多行注释内容 + */

1.3变量

语法： var 变量名

其中var可以表示任意数据类型，如整型，浮点型，字符串等。

变量名命名规则：

变量必须使用字母、下划线(_)或者美元符($)开始。
然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
不能使用JavaScript关键词与JavaScript保留字。

注意：

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

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

1.4语句和判断语句

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

其中“;”分号为英文状态下输入，虽然分号可写可不写，加上分号有助于代码梳理。

语法：

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

1.5函数

语法：

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

函数调用：

函数名( );

2.互动方法

2.1输出内容

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

四种输出方式：

输出内容用""括起，直接输出""号内的内容，类似python中的print
通过变量输出内容
输出多项内容，内容之间用+号连接
输出HTML标签，并起作用，标签使用""括起来

(1)

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

(2)

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

(3)

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

(4)

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

如果想要实现输出空格，可以使用特殊字符如"&nbsp"实现

< type="text/java">
  document.write("&nbsp;");//输出空格
</>

2.2alert消息对话框

(1)语法：

alert(字符串或变量);

(2)作用：
弹出一个小窗口

例如：弹出 hello 的消息对话框

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

2.3conform消息对话框

(1)语法：

confirm(str);

其中str为在消息对话框中要显示的文本，返回值是boolean值，当用户点击“确定”按钮时，返回true，点击“取消”则返回false。

(2)作用：

弹出消息对话框用于允许用户做出选择

示例：

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

2.4prompt对话框

(1)语法：

prompt(str1，str2);

(2)参数说明：

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

str2：文本框中的内容，可以修改

(3)返回值

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

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

(4)作用：
弹出消息对话框，通常用于询问一些需要与用户交互的信息；弹出消息对话框包含一个确定按钮，取消按钮和一个文本输入框

示例：

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

2.5打开新窗口

(1)语法：

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

(2)参数说明：

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

        窗口名称：可选参数，被打开窗口的名称:

——>        1.该名称由字母、数字和下划线字符组成。

——>        2."_top"、"_blank"、"_self"具有特殊意义的名称。

——>        _blank：在新窗口显示目标网页 _self：在当前窗口显示目标网页

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

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

——>        4.name 不能包含有空格。

        参数字符串：可选参数，设置窗口参数，各参数用逗号隔开

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

参数表:

参数	值	说明
top	Number	窗口顶部离开屏幕顶部的像素数
left	Number	窗口左端离开屏幕左端的像素数
width	Number	窗口的宽度
menubar	yes,no	窗口有没有菜单
toolbar	yes,no	窗口有没有工具条
scrollbars	yes,no	窗口有没有滚动条
status	yes,no	窗口有没有状态栏
height	Number	窗口的高度

示例：

< type="text/java">
  function Wopen(){
   window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0')   
  } 
  Wopen();
</>

2.6关闭窗口

(1)用法：

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

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

(2)close( )关闭窗口

示例：关闭新建的窗口

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

3.DOM操作

3.1认识DOM

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

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

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

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

3.2通过ID获取元素

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

（2）语法：

document.getElementById("id")

示例：

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

3.3 innerHTML 属性

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

（2）语法：

Object.innerHTML

注意：

> Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

> 注意书写，innerHTML区分大小写。

示例：

<p id="con">Hello Wrold!</p>
    <>
        var mycon = document.getElementById("con");
        document.write("p标签原始内容："+mycon.innerHTML+"<br>")//
        
        mycon.innerHTML = "New Next!";//修改p元素的内容
        document.write("p标签修改后的内容"+mucon.innerHTML);
    </>

3.4改变 HTML 样式

（1）HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

（2）语法：

Object.style.property = new style;

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

基本属性表：

属性	描述
backgroundColor	设追元素的背景颜色
height	设置元素的高度
width	设置元素的宽度
color	设置文本的颜色
font	在一行设置所有的字体属性
hontfamily	设置元素的字体系列
fontsize	设置元素的字体大小

示例：改变 <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";
</>

3.5显示和隐藏 (display属性)

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

语法：Object.style.diplay =value

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

value取值：

none：此元素不会被显示（隐藏）
block：此元素将显示为块级元素（即显示）

示例：实现id="con"的p标签元素的隐藏和显示

< type="text/java"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con");
		mychar.style.display = none;
        
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
		mychar.style.display = block;
        
		}
    </>