찾다
웹 프론트엔드JS 튜토리얼JavaScript 학습 에세이(브라우저 스크립트 작성 Navigator Scripting)_javascript 기술

在 HTML 中使用JavaScript

JavaScript能以两种方式嵌入HTML:

  • 作为语句和函数使用时,用 SCRIPT 标记
  • 作为事件处理程序使用时,用 HTML 标记

SCRIPT 标记

使用SCRIPT标记把脚本嵌入在HTML中,格式如舷:

<script> <BR>_ JavaScript 语句<BR></script>

LANGUAGE属性作为可选项,用于指定脚本语言,用法如下:



是<script>的结束标志,之间可以包括任意多的JavaScript语句.</script>

JavaScript是区分大小写档



例1 一个简单的脚本






That's all, folks.



例1中的页面显示:

Hello net.That's all folks.

 


 


代码隐匿

在不识别JavaScript的旧版本浏览器上,可以把脚本放置在注释域中,这样JavaScript代码就不会被显示出来. 把整个脚本用HTML的注释标记括起来:

定义和调用函数

在页(page)被装载后,被置于SCRIPT标记之间的脚本被分析.函数被存贮起来,但并未执行. 函数由页内的事件调用执行.

正确理解定义函数与调用函数之间的区别是很重要的,定义函数仅仅是命名了这个函数和说明当此函数被调用时做什么,而调用函数才利用传来的参数真正执行指定的动作.


 

例2 一个带有函数和注释的脚本







All done.


例2中的页面显示:

We passed 5 to the function.
The function returned 25.
All done.


 

HEAD标记

通常,应该在文档的HEAD部分定义页(page)的所有函数,因为HEAD被首先装载,这就保证了用户做任何可能调用函数的动作前,函数已全部装载.


 

例3 有两个函数的脚本.


<script><BR><!--- hide script from old browsers <BR>function bar() {<BR> document.write("<HR ALIGN='LEFT' WIDTH=25%>")<BR>}<BR>function output(head,level,string) {<BR> document.write("<H" + level + ">" + head + "" + level + "><p>" + string)<BR>}<BR>// end hiding from old browsers --><BR></script>



<script><BR><!--- hide script from old browers<BR>document.write (bar(),output("Make Me Big",3,"Make me ordinary."))<BR>// end hiding from old browsers --><BR></script>


Thanks.

例3的结果:

Make Me Big
Make me ordinary.undefinedundefined
Thanks.


 

引号

用单引号(')把字符串常量括起来,用双引号把属性的值括起来,这样脚本能够把二者区分开. 在上个例子中, 函数bar中,常量left被放在属性值.再举一个例子:


 

编写事件处理程序脚本(Scripting Event Handlers)

Navigator上的JavaScript应用程序大部分是事件驱动的,事件常常是用户动作的结果. 例如: 按动按钮是一个事件, 结果是把focus赋与一个form元素.Navigator能够识别一组特定的事件. 你可以定义event handlers脚本,这些脚本在事件发生时会被自动执行.

事件处理程序是作为HTML标记的属性放在文档中的,把要执行JavaScript代码赋给HTML标记. 语法如下:

其中, TAG是HTML的某一标记, eventHandler是事件处理程序的名称.

例如, 假定已创建了一个名为compute的JavaScript函数,你可以把对该函数的调用赋给这个按钮的onClick事件处理程序,从而实现当用户按此按钮时,Navigator执行函数compute.

你可以把任何JavaScript语句放在onClick后的引号内,多个语句之间用分号隔开.这些语句只在当用户按动此按钮时才被执行.

一般说来,把自己的事件处理程序定义成函数是一种好习惯,因为:

  • 这使你的代码模块化--- 同一个函数可以作为多个不同item的事件处理程序.
  • 这使你的代码容易读懂.

请注意,在此例中,使用this.form来引用当前form, 关键字this用来引用当前对象,此处即指button对象,于是this.form结构被用来引用包含此button的form. 上例中onClick事件处理程序是以this.form(当前form)为参数调用compute()函数.

能用于HTML标记中的事件如下:

  • Focus, Blur, Change事件: 文本域,文本区和选择
  • Click事件: 按钮,无线按钮,核对框,递交按钮,复位按钮,链接
  • Select事件: 文本域,文本区
  • MouseOver事件: 链接

如果一事件可用在HTML标记里, 则可以给它定义事件处理程序.通常事件处理程序的名称是以on开头,后跟事件名称. 如, Focus的处理程序名为onFocus.

许多对象有模拟事件的方法(method).如,button有一个名为click的方法能模拟按钮被按下. 注意: 模拟事件的方法不能触发事件处理程序.如方法click并不能触发事件处理程序onClick. 但是,你可以直接调用事件处理程序(如,在脚本中,显式调用onClick).

事件 何时发生 事件处理程序
blur 用户将input focus从form元素上移去 onBlur
click 用户在form元素或连接上接动鼠标 onClick
change 用户改变了文本,文本区或选择元素的值 onChange
focus 用户把input focus赋给form元素 onFocus
load 用户把页装入Navigato onLoad
mouseover 用户把鼠标光标从link或anchor上移过 onMouseOve
select 用户选择了form元素的输入域 onSelect
submit 用户提交了一个form onSubmit
unload 用户退出此页 onUnload



例4 有一个form和一个event handler属性的脚本

 







Enter an expression:




Result:






例4中的页面显示

Enter an expression:
Result:



例5 有一个form的脚本, event handler属性置于BODY标记中

 



var val=parseInt(str, 10)
if ((val max)) {
 alert("Try a number from 1 to 10.")
 return false
}
 return true
}

function thanks() {
 alert("Thank you for your input.")
}
// end hiding from old browsers -->





Enter a small number :
 onChange="if (!checkNum(this.valu,1,10))
 {this.focus();this.select; else thanks()}">



例5中的页面显示

Enter a number in the field and then click your mouse anywhere OUTSIDE of the field. Depending on what you enter,you will be prompted to enter another number,or thanked.

Enter a small number :


 

技巧与技术

本节介绍几种有用的编写脚本的技术

更新页(Updating Pages)

在Navigator上JavaScript是按从页的顶部到下的顺序生成结果. 一旦有些东西被重新设计(format),你只能靠重新装载此页的办法来改变,目前,你只能更新整 个页, 而不能只更新某一部分. 但是你可以单独更新frame中的"sub-window".

打印

目前, 还不能把用JavaScript产生的输出打印出来. 例如,若你的页上有如下内容,

This is some text
<script>document.write("<P>And some generated text")</script>

当打印时,你只会打出"This is some text", 即使你能在屏幕上看到两行.

使用引号

一定要区分双引号和单引号,因为在HTML中事件处理程序必须用双引号 括起来,参数用单引号,例如:


onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')">


另外,你可以用前置反斜线(\)对引号进行转义.

定义函数

在HTML页的HEAD部分定义全部函数是一个好习惯.这样,在显示任何内容之前, 所有函数均已定义.否则在页还在装载时,用户可能做一些事情触发事件处理程序, 调用了未定义函数,将导致错误.

创建数组

数组是一个有序的值的集合,利用数组名和索引来引用.例如,一个名为emp的数组存放着雇员的名字,并按雇员编号索引.于是,emp[1]是1号雇员,emp[2]是2号雇员, 依次类推.

JavaScript中没有明确的数组数据类型,但由于数组与对象有类似之处(见 JavaScript Object Model),在JavaScript中,很容易创建数组.你可以定义一个 数组对象类型如下:

function MakeArray(n) {
 this.length=n;
 for (var i=1; i   this[i] = 0
  return this
 }
}

这样就定义了一个数组,第一个属性length表示数组中元素个数(索引为0),其余各属性初始值为0,索引为大于等于1的整数.

배열 이름과 배열 요소 수를 사용하여 new를 호출하면 배열이 생성됩니다.

emp=new makeArray(20)

이 명령문은 20개의 요소와 초기 값 0을 포함하는 emp라는 배열을 생성합니다.

배열 채우기

배열 요소에 값을 할당하여 배열을 작동합니다. 예:

emp[1]="케이시 존스"
emp[2]="필 레시"
emp[3]="어거스트 웨스트"

잠깐만

객체 배열을 생성할 수도 있습니다. 예를 들어 Employees라는 객체 유형을 정의할 수 있습니다.

함수 직원(empno,name,dept) {
this.empo= empno;
this.name= name;
this.dept= dept;
}

다음 명령문은 이 객체의 배열을 생성합니다.

emp=new MakeArray(3)
emp[1]=new Employee(1,"Casey Jones", "Engineering")
emp[2]=new Employee(2,"Phil Lesh", "Music")
emp[3]=new Employee(3,"August",""Admin)

이때 show_props 함수를 사용합니다(JavaScript Object에 정의됨). Model ) 다음과 같이 배열의 객체를 표시합니다.

for (var n=1; n document.write(show_props(emp[n],"emp") "");
}

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Node.js는 TypeScript가있는 스트림입니다Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

Python vs. JavaScript : 성능 및 효율성 고려 사항Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 ​​통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

Python vs. JavaScript : 개발 환경 및 도구Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!