zoukankan html css js c++ java

JavaScript 基础

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>

查看全文

相关阅读:
[C语言]数据类型与计算
 [C语言]变量VS常量
 [C语言]在命令行编译执行程序
 [cocos2d-x]游戏开发基础(图)
[cocos2d-x]移动平台游戏开发(图)
[cocos2d-x]认识游戏开发(图)
[jQ/PHP]再谈使用JS数组储值的运用（提交PHP处理）
[Nginx]Nginx的基本配置与优化1（完整配置示例与虚拟主机配置）
[JS]如何理解JS中的类和对象
 [jPlayer]一分钟部署jPlayer

原文地址：https://www.cnblogs.com/mfmdaoyou/p/7087050.html