javaScript学习笔记---入门-优快云博客

本文链接：https://blog.youkuaiyun.com/u013047859/article/details/51595261

本文介绍了JavaScript的基本用法，包括文件引入、变量声明、函数定义及调用等，并详细讲解了DOM操作，例如改变元素样式、显示和隐藏元素以及控制类名等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html引用.js文件 <script src="script.js"></script>

2、document.write("内容");

3、声明并赋值变量var num=8;

4、函数定义function context( ){ alert("调用函数了"); } //注意函数名后面一定要有括号，或者context:function(){ }

调用<input type="button" value="点击我" οnclick="contxt()" />

5、javaScript换行<br>

6、确认：confirm(str);

str：在消息对话框中要显示的文本；返回值: Boolean值

7、prompt(str1, str2);

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

8、打开新窗口

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

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

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

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

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

10、DOM操作

document.getElementById(“id”)

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

改变 HTML 样式: Object.style.property=new style;

<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>

显示和隐藏（display属性）Object.style.display = value; none隐藏；block显示。

<!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" οnclick="hidetext()" value="隐藏内容" /> 
       <input type="button" οnclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

控制类名（className 属性）。object.className = classname；

<!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="添加样式" οnclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" οnclick="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>

11、

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
	border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onClick="changeColor()">  
    <input type="button" value="改变宽高" onClick="changeSize()">
    <input type="button" value="隐藏内容" onClick="hideText()">
    <input type="button" value="显示内容" onClick="showText()">
    <input type="button" value="取消设置" onClick="resettext()">
  </form>
  <script type="text/javascript">
   var myh = document.getElementById("con");
   var mydiv = document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor(){
        mydiv.style.color="red";
        mydiv.style.backgroundColor="#ccc";
    }

//定义"改变宽高"的函数
 function changeSize(){
        mydiv.style.width="200px";
        mydiv.style.height="300px";
    }

//定义"隐藏内容"的函数
function hideText(){
    mydiv.style.display="none";
}

//定义"显示内容"的函数
function showText(){
    mydiv.style.display="block";
}

//定义"取消设置"的函数
function resettext(){
    var mychose = confirm("确定恢复默认样式吗？");
    if(mychose==true){
        mydiv.removeAttribute("style");
    }
}

  </script>
</body>
</html>