JS学习入门篇

最新推荐文章于 2021-06-08 11:04:51 发布

欧尔瑞特

最新推荐文章于 2021-06-08 11:04:51 发布

阅读量129

点赞数

分类专栏：学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/jo___jo/article/details/90580594

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

废话不多说直接开始

什么是JS

JS全名JavaScript，主要应用于Web，是非常重要的一部分

JS基础问题汇总

1.JS代码可以插入在几乎html的全部地方，使用方法有两种，一种为直接在html上写(几乎可以忽略不用)，第二种就是引入js文件

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
        <title>插入js代码</title>
        //可插入
        //第一种
        <script type="text/javascript">
        //一个；视为一个JS语句的结束
            document.write("title位置可以插入js");
        </script>
        //第二种 引入文件
        <script src="script.js"></script>
    </head>
    <body>
    <script type="text/javascript">
            document.write("body位置可以插入js");
            //js定义变量用var，
            //1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
            //2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
            var a = 8;
            var mychar;
            mychar="javascript";
            mychar="hello";
        </script>
    </body>
</html>

2.JS的if…else
我个人感觉JS的ifelse和C语言没什么差别

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>判断语句</title>
  <script type="text/javascript">
	var score =80; //score变量存储成绩，初值为80
	  if(score>=60)
	{
     document.write("很棒，成绩及格了。");
	}
  else
	{
	 document.write("加油，成绩不及格。");
	}
  </script>
</head>
<body>
</body>
</html>

3.JS函数的调用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
   <script type="text/javascript">
       function contxt() //定义函数
      {
         alert("哈哈，调用函数了!");
      }
      contxt();
   </script>
</head>
<body>
   <form>
      <input type="button"  value="点击我" onclick="contxt()" />  
   </form>
</body>
</html>

4.JSdocument的使用
document是输出信息

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

5.JSalert的使用
alert是出现提醒框

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

6.JSconfirm
confirm是选择框目前我只知道只能选择是和否

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

7.JSprompt
prompt相对来说难一点，用法是prompt(str1, str2);str1是提示文字，str2是文本框内提示文字，

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open(
          'http://www.imooc.com',
          '_blank',
          'width=300,height=200,top=100,left=0'
      )

  } 
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" />
</body>
</html>

close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。

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

JS基础补充

1.文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
2.通过ID获取元素
学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
语法:
document.getElementById(“id”) ;
3.innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。
2.注意书写，innerHTML区分大小写。
我们通过id="con"获取

元素，并将元素的内容输出和改变元素内容，代码如下:
在这里插入图片描述
4.改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <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" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

6.利用JS修改css

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</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" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>
</body>
</html>

结束

直接结束，不多逼逼。

欧尔瑞特

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习入门篇

废话不多说直接开始什么是JSJS全名JavaScript，主要应用于Web，是非常重要的一部分JS基础问题汇总1.JS代码可以插入在几乎html的全部地方，使用方法有两种，一种为直接在html上写(几乎可以忽略不用)，第二种就是引入js文件<!DOCTYPE HTML><html> <head> <meta http-e...
复制链接

扫一扫

专栏目录