JavaScript 基础

最新推荐文章于 2024-08-12 22:28:07 发布

weixin_33781606

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量102

点赞数

文章标签： javascript ViewUI

Hello, JavaScript !

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, JavaScript!</title>
</head>
<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>

  <script type="text/javascript">
    document.write("hello, JavaScript!");
    document.getElementById("p1").style.color="blue";
    document.getElementById("p2").style.color="red";

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

运行效果：

我是第一段文字
我是第二段文字
hello,JavaScript!

HTML引用JS：

在HTML中加入由JavaScript标签包裹的JS代码：

<script type="text/javascript">
... ...
</script>

HTML引用独立的JS文件：

<!-- index.html -->
<script src="zms.js"></script>

// zms.js
document.write("Hello, JavaScript!");

这样JS代码就直接运行了。

注意：

能够将JavaScript代码放在html文件里不论什么位置。一般放在网页的head或者body部分。
放在head部分:最经常使用的方式是在页面中head部分放置script元素，浏览器解析head部分就会运行这个代码，然后才解析页面的其余部分。
放在body部分:JavaScript代码在网页读取到该语句的时候就会运行。
也就是说， javascript作为一种脚本语言能够放在html页面中不论什么位置，可是浏览器解释html时是按先后顺序的，所曾经面的script就先被运行。比方进行页面显示初始化的js必须放在head里面，由于初始化都要求提前进行（如给页面body设置css等）；而假设是通过事件调用运行的function那么对位置没什么要求的。

每行语句的末尾一般加上分号。也可不加。只是用分号结束的话。能够在同一行写多条语句。

凝视

单行：//
多行：/* */

变量

定义变量：

var 变量名

命名规则：

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

注意：

在JS中区分大写和小写，如变量mychar与myChar是不一样的，表示是两个变量。
变量尽管也能够不声明，直接使用，但不规范，须要先声明，后使用。

推断语句(if…else)

<script type="text/javascript">
    var score =80; //score变量存储成绩，初值为80
    if(score>=60){
     document.write("非常棒。成绩及格了。");
    } else {
     document.write("加油。成绩不及格。");
    }
  </script>

函数

基本的语法：

function handleTask(){
    var number = 5;
    alert("number is" + number);
}

函数定义好，须要在对应的地方调用才会运行：

  <form>
  <input type="button"  value="点击" onclick="handleTask()" />  
  </form>

警告

<script type="text/javascript">
alert("hello, javascript !");
</script>

会出现一个带有确认按钮的信息提示框。

注意：

在点击对话框”确定”按钮前，不能进行不论什么其他操作。
消息对话框通常能够用于调试程序。
alert输出内容，能够是字符串或变量，与document.write 类似。

确认（confirm 消息对话框）

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?

"

); if(mymessage==true) { document.write("非常好,加油!"); } else { document.write("JS功能强大。要学习噢!"); } </script>

注意:

提问（prompt 消息对话框）

弹出消息对话框,通经常使用于询问一些须要与用户交互的信息。

弹出消息对话框（包括一个确定按钮、取消按钮与一个文本输入框）。

语法:

prompt(str1,str2);

參数说明：

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

返回值:

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

演示样例:

var name=prompt("请输入你的姓名:","默认值");
if(name!=null)
  {   alert("你好"+name); }
else
  {  alert("你好.");  }

打开新窗体（window.open）

语法：

window.open(<URL>, <窗体名称>, <參数字符串>)

參数说明：

URL：打开窗体的网址或路径。
窗体名称：被打开窗体的名称。能够是”_top”、”_blank”、”_selft”等。

參数字符串：设置窗体參数，各參数用逗号隔开。

參数字符串：

參数	取值	说明
top	Number	窗体上边距
left	Number	窗体左边距
width	Number	窗体宽度
height	Number	窗体高度
menubar	yes,no	是否有菜单
toolbar	yes,no	是否有工具条
scrollbars	yes,no	是否有滚动栏
status	yes,no	是否有状态栏

演示样例：

<script type="text/javascript">
  function Wopen(){
      window.open('http://blog.csdn.net/zhoumushui','_blank','width=600,height=400,top=100,left=0');

  } 
</script>

关闭窗体（window.close）

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

演示样例：

<script type="text/javascript">
// 将新打的窗体对象，存储在变量mywin中
var mywin=window.open('http://blog.csdn.net/zhoumushui'); 
mywin.close();
</script>

编程练习

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  

  function openWindow() {
    // 通过输入对话框，确定打开的网址，默觉得 http：//www.zms.com/
    var myurl = prompt("输入要打开的网址", "http://www.zms.com")
    // 新窗体打开时弹出确认框，是否打开
    var wantopen = confirm("确认打开" + myurl + "?");
    if (wantopen) {
        //打开的窗体要求。宽400像素。高500像素，无菜单条、无工具栏。

 window.open(myurl, '_blank', 'width=400,height=500,menubar=no,toolbar=no'); } } </script> </head> <body> <input type="button" value="新窗体打开站点" onclick="openWindow()" /> </body> </html>

···················· 低调的切割线 ····················

DOM

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

HTML文档能够说由节点构成的集合。三种常见的DOM节点:

1. 元素节点：<html>、<body>、<p>等都是元素节点。即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.zms.com"。

通过ID获取元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=   document.getElementById("con");        ;
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
</body>
</html>

运行结果：

JavaScript
结果:[object HTMLParagraphElement]

innerHTML 属性

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

语法：

Object.innerHTML

演示样例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<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>
</html>

改变 HTML 样式

语法：

Object.style.property=new style;

基本属性表（property）:

属性	描写叙述
backgroundColor	背景颜色
height	高度
width	宽度
color	文本颜色
font	字体
fontFamily	字体系列
fontSize	字体大小

演示样例代码：

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

显示和隐藏（display属性）

语法：

Object.style.display = value

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

控制类名（className 属性）

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

语法：

object.className = classname

作用:

1.获取元素的class 属性
2. 为网页内的某个元素指定一个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>

编程练习

<!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="hideContent()"> <input type="button" value="显示内容" onclick="showContent()"> <input type="button" value="取消设置" onclick="resetStyle()"> </form> <script type="text/javascript"> var txtObject = document.getElementById("txt"); //定义"改变颜色"的函数 function changeColor(){ txtObject.style.color="#00bb77"; } //定义"改变宽高"的函数 function changeSize(){ txtObject.style.width="255px"; txtObject.style.height="255px"; } //定义"隐藏内容"的函数 function hideContent(){ txtObject.style.display="none"; } //定义"显示内容"的函数 function showContent(){ txtObject.style.display="block"; } //定义"取消设置"的函数 function resetStyle(){ var isconfirm = confirm("取消设置？"); if(isconfirm){ txt.removeAttribute('style'); } } </script> </body> </html>

weixin_33781606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础

Hello, JavaScript !&lt;!DOCTYPE HTML&gt;&lt;html&gt; &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;Hello, JavaScript!&lt
复制链接

扫一扫