JavaScript -- 入门篇

本文深入探讨JavaScript编程语言的核心概念和实际应用,包括HTML输出、事件响应、改变HTML内容与样式、验证输入、输出方法、变量、数据类型、函数、运算符、DOM操作等。详细解释了如何使用JavaScript进行网页开发,涵盖变量声明、数据类型、函数定义、DOM操作及事件处理,为开发者提供全面的JavaScript基础知识与实践指导。

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

1. js的内容:

写入HTML输出

对事件做出反应

改变HTML内容

改变HTML图像

改变HTML样式

验证输入


2. html中的脚本必须嵌套在<script>  与</script>之间,脚本可放置在head或者body中,一般head中放函数,

外部的js:  <script src=" js/index.js" > </script>


3. js输出

通常操作html,指定id的元素改变其内容

document.getElementById("demo").innerHTML="My First JavaScript";	

写到文档输出:

document.write("<p>My First JavaScript</p>");

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖


4. js注释

// 单行

/*

*多行

*/


5. js变量

var x = 2;  //弱类型语言  变量是用来存储数据的容器 必须字母开头对大小写敏感

当变量没有赋值时候,值是undefined

重新声明该变量,值不变

6. js数据类型

字符串:"hello" 

数字:4

布尔:true

数组:var arr = new Array();   arr[0] = 1 ;  arr[1] = 2;    

var arr = new Array("one", "two", "three");

对象:属性是名称和值的对,name:value

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

name = person.lastname;

或者 name = person["lastname"];


null表示空值,undefined表示不含有值

7. 属性和方法

访问属性:object. property

访问方法:object. method();


8. js函数:事件驱动

function funName(arg1, arg2)

{

//code blocks

return something;

}

函数内为局部变量,函数结束后被删除;函数外为全局,网页上所有脚本都能访问

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。即使它在函数内执行


9. js运算符

算术

赋值

比较

逻辑

条件

+:用于字符串连接

10. if else:

if(){}

else if(){}

else{}

switch():

{

case 1:

//code blocks

break;

default:

//

}


for(var i=0;i<str.length;i++)

{ }

for(x in person)     //var person = {fname:"jone",  lname:"herry",  age:88}; 

{

txt = txt + person[x];

}

while(){}

do{}  while();

break跳出循环 ;  continue进入下一循环


11. 异常  try  catch  finally

try{}

catch(err){}


12. js DOM文档对象模型:js访问html所有元素

DOM树:

DOM HTML 树

查找html元素:

通过id:

var x=document.getElementById("intro");

通过标签名:

var y=x.getElementsByTagName("p");
通过类名: 在IE8中无效


改变html:

改变输出流:document.write();

改变html内容:

document.getElementById(id).innerHTML=new HTML

改变html属性:

document.getElementById(id).attribute = new value;  //eg:  .src = "lan.jpg"; 

改变样式:

document.getElementById(id).style.property= new style;  //eg:  .style.color ="blue "; 


DOM事件:

用户点击鼠标;onclick

网页已经加载;onload  onunload

图像已经加载

鼠标移动到元素上;onmouseover   onmouseout   onmousedown  onmouseup

输入字段被改变;onchange

提交表单;

用户触发按键;

获得焦点:onfocus


DOM元素:节点

创建新的<p>元素:var para = document.createElement("p");

创建文本节点  var node = document.createTextNode("this is new paragraph");

p元素追加文本结点:para.appendChild(node);

在找到的元素后面添加这个创建的新元素:element.appendChild(para);

删除元素:parent.removeChild(child);

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

13. js 对象

内建对象:

Date  String   Array

创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

实例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";


使用对象构造器

本例使用函数来构造对象:

实例

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值