js 变量、字符串、条件语句、事件学习笔记

变量

还是通过一个实例来学习变量的相关语法:

 代码如下 复制代码

<!--variables.html-->

[html]
[head]
[script language="JavaScript"]
<!-- hide me
// load up some variables ,定义变量
var hen_num = 3;
var eggs_per_week_each = 5;
var weeks_per_month = 4;
 
// do some calculations ;计算
var eggs_per_month_each = eggs_per_week_each * weeks_per_month;
var eggs_per_month_all = eggs_per_month_each * hen_num;
 
//here's how to use JavaScript to write out HTML
//这里介绍如何用JavaScript写变量和网页。
document.writeln("<b>我家母鸡每月生蛋 ");
document.writeln(eggs_per_month_all);
document.writeln(" 个.</b>[p]");
 
// end hiding -->
[/script]
[/head]
[/html]

<script type="text/javascript"> 
var a=100; 
var b=true; 
function test(){ 
    alert(a); 
    alert(b); 
    b=false; 
    alert(b); 
    var a=200; 
    alert(a/2); 
    alert(++Math.PI); 
    alert(Math.PI++); 

test();
</script>

学习点

①当首次用一变量时,应以“var”申明。 尽管以var 作为变量申明严格说并不必要,但这是一个好习惯。
②变量名对大小写敏感
③可用document.writeln() 来写文本和网页中的HTML
document.writeln()属于Document 对象的方法,详情请见w3school中文网 HTML DOM教程

为什么第一个alert为undefined,而第二个为true。这问题也可以延伸为——alert(b)时怎么就会找外部的b,而alert(a)时就不会往外面找?!

我们都明白局部变量的优先级大于全局变量,或者说内围作用域的变量的优先级比外围的高。当JS引擎在当前作用域找不到此变量时,它就往外围的作用域找。不过,在这之前,有一个严肃的问题是,究竟当前作用域存不存在这个变量。像javascript这样的解释型语言,基本分为两个阶段,编译期(下面为符合大多数语言的称呼习惯,改叫预编译)与运行期。在预编译阶段,它是用函数来划分作用域,然后逐层为其以 var 声明的变量(下略称为var变量)与函数定义开辟内存空间,再然后对var变量进行特殊处理,统统赋初始值为undefined

变量字符串

别小看JavaScript中字字符串,它的使用相当灵活:

 代码如下 复制代码

<!--string.html-->

[html][head]
[script language="JavaScript"]
<!-- hide me
var nice_monkey = "猴子对着你?,并读诗.";
var bad_monkey = "猴子对着你皱眉头.";
// 定义变量,并给变量赋值,使它等于这些字符串,于是当你想写这些字符串时,你可写:
 
document.writeln(nice_monkey+"");
var monkey = prompt("猴子的名字?", "傻猴");
//这里我们称为用户反馈提示方式,当它被调用时,启动一个对话框请求用户输入信息。用
//户完成后敲OK返回信息。在上行中返回信息放入其变量中。
 
var demanding="想要";
var tech="一台电脑!";
var techy_monkey = monkey + demanding + tech;
 
document.writeln(techy_monkey+"");
document.writeln(techy_monkey.fontcolor('red');
//这一句的意思是:将字符串 techy_monkey 用红色显示在屏幕上
// end hiding -->
[/script]
 [/Head][/Html]

 

学习点

 代码如下 复制代码

* var secs_per_min = 60;
* var bad_monkey = “The monkey scowls at you and burps.”;
* var techy_monkey = monkey + demanding + tech;

* var monkey = prompt(”What’s the monkey’s name?”, “The monkey”);

* document.writeln(”[b]The monkey dances[/b] “);
* document.writeln(bad_monkey +”[br]“);
* 字符串对象:
document.writeln(techy_monkey.fontcolor(’red’);

prompt ( )属于Window 对象的方法,详情请见w3school中文网的HTML DOM教程
条件语句

If 语句

if (条件) {
  条件成立时执行代码
}

If…else 语句

if (条件){
  条件成立时执行此代码
}
else{
  条件不成立时执行此代码
}

If…else if…else 语句

if (条件1){
  条件1成立时执行代码
}
else if (条件2){
  条件2成立时执行代码
}
else{
  条件1和条件2均不成立时执行代码
}

实例:

 代码如下 复制代码

<!--if_then.html-->
[html]
[head]
[title]If Then Exercise[/title]
[script language = "JavaScript"]
  var color = prompt("What color do you prefer, red or blue? ","");
  var adjective;
  if (color == "red") {
    adjective = "lurid.";
  }else if (color == "blue") {
    adjective = "cool.";
  }else {
    adjective = "confused."
  }
  var sentence = "You like " + color + "? The monkey thinks you're " +adjective + "[p]";
  // stop hiding me -->
[/script]
[/head]
 
 [body]
[script language = "JavaScript"]
  <!-- begin hiding me
  document.writeln(sentence.fontcolor(color));
  // end hiding -->
[/script]
[/body]
[/html]

链接事件
用户点击一个链结,或将鼠标移到其上,JavaScript发送一个链结事件。
一种链结事件叫做onClick,当用户点击它时才发送。
另一种叫onMouseOver,用户将鼠标移到上面时即发送。

 代码如下 复制代码

[html]
 [head]
 [/head]
 [body]
 <A onclick="alert('Ooo, do it again!');" href="#">Click on me!</A>
 <A onmouseover="alert('Hee hee!');" href="#">Mouse over me!</A>
 [/body]
[/html]

学习点
onClick, onMouseOver

拓展
事件:事件是可以被 JavaScript 侦测到的行为如(鼠标点击;页面或图像载入;鼠标悬浮于页面的某个热点之上;在表单中选取输入框;确认表单;键盘按键)

常用事件
onClick
onload 和 onUnload
onFocus, onBlur 和 onChangeonSubmit
onMouseOver 和 onMouseOut
更详细的内容,请见HTML DOM Event 对象

图片交换
JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。

 代码如下 复制代码

[html]
[head]
[title]图片交换[/title]
[/head]
 
[body]
<IMG name=the_image src="image/monkey.gif">
<!--这就象一个标准的 <img src= > 标签,只是它被给了一个名字:the_image,
名字是任意取的-->
 
<A onmouseover="document.the_image.src='image/thau.gif';" href="#">
change</A>
<!--document.the_image.src='button_d.gif';
该句是说:“找到叫'the_image'的图片并将其src 变为button_d.gif."-->
[/body]
[/html]

再来一个稍复杂的实例。

这个实例要完成这样的一个功能:页面上有两张图片(一上一下),当将鼠标移到下面的图片上是,图片变化,每移动一回,都会变,当点击鼠标时,上面的图片也变成了和下面一样的图片。这样的效果不错吧:

 代码如下 复制代码

<!--image_swapping_2-->
[html]
[head]
 
 
[script language="JavaScript"]
<!-- hide me
  var temp = "";
  var image1 = 'image/thau.gif';
  var image2 = 'image/sky.gif';
  var image3 = 'image/monkey.gif'
  var user_name = prompt("What's your name", "");
  if (user_name == ""){
    user_name = "流浪人";
  }
  // end hide -->
[/script]
 
[/head]
[body]
[p]<IMG name=brand_image src="image/monkey.gif">[/p]
<H3>Browser Configuration</H3>
 
<B>你好,
<SCRIPT language=JavaScript>
  <!-- hide me
  document.write(user_name);
  // end hide -->
  </SCRIPT>
</B>
 
[p]将移到下面的图片上,直到找到你喜欢的图片,然后点击它。[/p]
 
[p]<A onmouseover="temp=image1; image1=image2; image2=image3; image3=temp;
document.the_image.src=image1;" onclick=document.brand_image.src=image1; href="#">
<IMG border=0 name=the_image src="image/monkey.gif"></A>
 
[/body]
[/html]

学习点
Document.imageObject.src

Document.imageObject.src(只写imageObject.src也行) : HTML DOM Image 对象

时间: 2024-09-29 19:27:07

js 变量、字符串、条件语句、事件学习笔记的相关文章

jquery事件学习笔记(转载)

一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行.有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中.可以给这个参数任意起一个名字,并因此可以

Swift中的条件判断、循环、跳转语句基础学习笔记_Swift

一.引言 一种编程语言的强大与否,很大程度上取决于其提供的程序流程控制方案,就如使用汇编语言实现复杂的程序流程是一件痛苦的事情.Swift中提供了许多强大的流程控制语句,例如快速遍历for-in,while循环,repeat-while循环,switch选择等,需要注意的是,在Swift2.2中,for(a;b;c)循环已经被弃用掉,并且Swift中的Switch语句也更加强大,可以处理任意数据类型. 二.for-in循环 配合范围运算符,for-in循环可以用来执行确定次数的循环,示例如下:

JavaScript高级程序设计 事件学习笔记_javascript技巧

第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档). □所有浏览器均支持事件冒泡.Firefox.chrome.safari将事件一直冒泡到window对象. 1.2事件捕获(Netscape事件流) □不太具体的节点更早收到事件,而具体的节点最后收到节点. □Safari.chrome.Opera.firefox支持,但从window对象

PHP Switch 语句之学习笔记_php基础

PHP 中的 Switch 语句用于执行基于多个不同条件的不同动作. Switch 语句 如果您希望有选择地执行若干代码块之一,请使用 Switch 语句. 使用 Switch 语句可以避免冗长的 if..elseif..else 代码块. 语法 复制代码 代码如下: switch (expression) { case label1: code to be executed if expression = label1; break; case label2: code to be execu

PHP Switch 语句之学习笔记

PHP 中的 Switch 语句用于执行基于多个不同条件的不同动作. Switch 语句 如果您希望有选择地执行若干代码块之一,请使用 Switch 语句. 使用 Switch 语句可以避免冗长的 if..elseif..else 代码块. 语法  代码如下 复制代码 switch (expression) { case label1:   code to be executed if expression = label1;   break;  case label2:   code to b

JavaScript权威设计--JavaScript表达式与运算符,语句(简要学习笔记六)

1.delete是一元操作符,用来删除对象属性或者元素. var a={ x:1, y:2 } delete a.x; //删除x属性 "x"in a //false:a对象中已经不存在x属性 alert(a.x) //undefined;这里还是存在"东西"的 就如: var b=[1,2,3]; delete b[0]; b.length //3:还是3,虽然上面已经删除了b[0]   2.void运算符 void忽略操作的值,因此在操作数具有辅助作用的时候使用

JS 正则表达式的相关方法(正则学习笔记1)_正则表达式

复制代码 代码如下: var str="abcdefghijklnabcdefghijklmnabcabdefghijklmn"; re=/a/g; alert(re.test(str)); //test方法调用返回 true false 表示是否在指定字符串找到匹配的字符--true alert(re.exec(str)); //返回字符串中匹配表达式的第一个字符串 --a alert(str.match(re)); //返回一个数组,每一项都匹配表达式的数组---[a,a,a] 注

MYSQL存储过程及事件学习笔记

关于mysql下的存储过程以及事件的创建 下面这个存储过程主要实现的功能就是查询表里面半年前的数据,如果有就存到文件,然后将数据删除.  代码如下 复制代码 CREATE DEFINER = `root`@`localhost` PROCEDURE `NewProc`() BEGIN select COUNT(*) INTO @count from S_ACCOUNT  where date_add(registerTime, interval 6 month)<=NOW();  IF @cou

Laravel 的 Events 及 Observers 模型事件学习笔记

首先我们来看看这个被称为 模型事件(model events) 的技术.它的基本概念非常简单: 在 EventServiceProvider 中你可以添加一个特定的事件监听器,并绑定一个闭包函数 在闭包函数中,你不需要接触模型代码就可以添加新的行为 绑定操作必须放在类的 boot() 方法中 这是一个把创建 (created) 用户事件与闭包函数进行绑定的简单示例.闭包的 $user 参数包含了指定用户的实例:   public function boot(DispatcherContract