JavaScript的特殊图片

JavaScipt基础

JavaScript

  • 一种轻量级的,动态的脚本语言
  • 可以是网页产生交互:
  • 向HTML中插入动态文本(如用户名)
  • 响应时间(如页面载入,用户点击)
  • 获取用户计算机的相关信息(如浏览器类型)
  • 在用户计算机上运行(表单有效性检查)
  • 一种WEB标准,并不是所有浏览器都支持

JavaScript VS JAVA

  • JS属于解释性语言,不是编译型语言
  • 更宽松的语法和规则
  • 较少和“松散”的数据类型
  • 变量不需要声明
  • 错误经常是不提示的(少量除外)
  • 关键结构是函数,而不是类
  • 优秀的函数经常使用在其他地方
  • 包含在Web页面中,并且常常与HTML和CSS内容集成一起使用

JaveScript VS PHP

  • 两者都是解释型语言,不是编译型语言
  • 两者在语法,规则和类型上都属于松散型的
  • 两者都区分大小写的
  • 两者都内置的正则表达式用于强大的文本处理
  • JS更多地是面向对象,很少面向过程
  • JS专注于UI及文档地交互,PHP专注于HTML的输出和文件/表单
  • JS代码运行在客户端的浏览器上,PHP代码运行在Web服务器上

客户端脚本:页面从服务器返回后,运行在浏览器中代码,这个代码经常操作页面或响应用户操作

为什么使用客户端编程

客户端脚本(JavaScript)的好处:

  • 可用性:不必发回服务器就可以修改页面(快速UI)
  • 效率:可以在不等待服务器的情况下对页面进行小而快速的更改
  • 事件驱动:可以响应用户操作,如单击和按键

服务器端(PHP)的好处

  • 安全性:可以访问服务器的私有数据;客户端看不到源代码
  • 兼容性:不受浏览器兼容性问题的影响
  • 强大:可以写文件,打开与服务器的连接,连接到数据库

事件驱动的程序设计

事件驱动的程序设计

JS程序没有main函数;他们响应用户操作,称为事件

事件驱动的程序设计:编写由用户时间驱动的程序

响应时间的步骤

  • 决定要响应的元素或控件
  • 用我们要运行的代码编写一个JavaScript函数
  • 将该函数附加到控件的事件

实例

1,创建HTML控件

元素button
描述A clickable button(inline)
语法<button>text/images</button>
button
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript example</title>
</head>
<body>
    <button>Say the Magic Word</button>
</body>
</html>

编写JavaScript事件处理函数

///JavaScript文件please.js
function sayMagicWord(){
    alert("PLEASE!");
}
函数alert(“message”)
描述在弹出对话框中向用户显示“信息”
alert函数

连接时间处理程序和控件

元素script
描述定义或链接到脚本
语法<script scr=”URL” type=”text/javascript”></script>
链接控件
<script scr="URL" type="text/javascript"></script>
///连接HTML时间处理程序的语法模板
<element onevent="functionName();">...</element>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript example</title>
    <script src="please.js" type="text/javascript"></script>
</head>
<body>
    <button onclick="sayMagicWord();">Say the Magic Word</button>
</body>
</html>
运行结果

DOM及JavaScript基本语法

DOM

  • DOM表示页面上每个元素的一组JavaScript对象
  • 页面中的每个标记都对应一个JavaScript DOM对象
  • JS可以与这些对象通信以检查元素的状态(例如:是否选中了一个框)
  • 通过它可以改变状态
  • 通过它可以改变风格

通过objectName.attributeName访问/修改DOM对象的属性

大多数dom对象属性与相应的HTML属性具有相同的名称

  • img标签的src属性
  • a标签的href属性
通过JS来转换图片

通过ID存取DOM对象

var name = document.getElementById("所需元素的ID")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript example2</title>
    <script src="please2.js"type="text/javascript"></script>
</head>
<body>
    <div>
        <button onclick="sayMagicWord();">Say the MAgic word</button>
        <p id="result">What do you say?</p>
    </div>

</body>
</html>
///JavaScript 文件,please2.js
function sayMagicWord() {
    var paragraph =document.getElementById("result")
    paragraph.innerHTML = "please";
}
运行后
点击后
JavaScript数据类型

变量和类型

var name =expresssion;
var age = 32;
var weight =127.4;
var clientName = "Connie client";

变量用var关键字声明(区分大小写)

类型未指定,但JS有类型(“松散类型”)

通过typeof可以找到变量的类型

数值类型

var enrollment =99;
var medianGrade = 2.8;
var credit =5 +4+ (2*3);

整数和实数是同一类型(没有int和double型)

相同的运算符 :+ -* / % ++ –= += -= *= /= %=

许多操作自动转换类型 :”2″*3 is 6

JS注释

//单行注释
/*多行注释*/

DOM对象

DOM对象
DOM其它对象

实例

<div id="mmain" class="foo bar">
        <p>See our <a href="sale.html" id="saleslink">sales</a> today!</p>
        <img id="icon" src="images/borat.jpg" alt="Borat"/>
    </div>
var mainDiv =document.getElementById("main")
var icon =document.getElementById("icon")
var theLink =document.getElementById("saleslink")

程序示例:乘法器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript example2</title>
    <script src="please2.js"type="text/javascript"></script>
</head>
<body>
    <h1>The Amazing Multiplier</h1>
    <div>
        <input id="num1" type="text" size="3"/>
        <input id="num2" type="text" size="3"/>
        <span id="answer"></span><br/>
        <button onclick="compute();">Compute!</button>
    </div>
</body>
</html>
///JavaScript 文件,please2.js
alert("Is the browser even loading my script?")

function compute(){
    var input1 =document.getElementById("num1")
    var input2 =document.getElementById("num2")
    var answer =document.getElementById("answer")
    var result =input1.value * input2.value;
    answer.innerHTML = result;
}
呈现效果

JavaScript基础语法

转义字符

名称转义字符
单引号\’
双引号\”
反斜线\\
换行\n
水平制表符\t
转义字符

字符串连接和加法

表达式结果
1+”2″“12”
1+3+”5″+7+9“4579”
1+(3+”5″)+(7+9)“13516”
字符串连接和加法
表达式结果
parselent(“42”)42
parselent(“12pt font”)12
parselent(” 4erver young!”)4
parselent(“”)NaN
parselent(“Sache Baron Cohen”)NaN
parseFloat(“2.56”)2.56
parseFloat(3.14159ppp09348)3.14159
parseFloat(“3.14159ppp09348”)3.14159
parseFloat(“00000000.00000”)0
函数:parelent和parseFloat
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="add.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<h1>The amazing adder</h1>
<div>
    <input id="num1" type="text" size="3"/> +
    <input id="num2" type="text" size="3"/> =
    <span id="answer"></span>
    <br/>
    <button onclick="compute();">Compute!</button>
</div>
</body>
</html>
///JS文件
function compute() {
    var input1 =document.getElementById("num1");
    var input2 =document.getElementById("num2")
    var answer =document.getElementById("answer")
    var result =parseFloat(input1.value) + parseFloat(input2.value);
    answer.innerHTML = result;
}
加法器

String属性和方法

///对象属性和方法的语法模板
object.property
object.method(parameters)
方法名功能描述
charAt(index)返回指定位置的字符,index从0开始
charCodeAt(index)返回指定位置的字符 ASCII 编码
string. fromCharCode(value)返回指定ASCII码对应的字符串
indexof(searchStr)
indexof(searchStr,fromIndex)
返回某个指定的字符串中首次出现的位置
split(delimeter)
split(delimeter,Howmany)
用于把一个字符串分割成字符串数组
substring(start)
substring(start,stop)
提取字符串中介于两个指定下标之间的字符
toLowerCase()用于把字符串转换为小写
toUpperCase()用于把字符串转换为大写
trim()返回取掉字符串两端空格后的字符串
string方法
///JavaScript文件please.js
var s = "Connie Client"
var fName =s.substring(0,s.indexOf(" ")); // "Connie"
var len =s.length;  //13
var s2 = 'Melvin Merchant';     //can use "" or ''
  • charAt 返回一个字母字符串(没有字符类型)
  • length是属性(不是方法)
  • 连接符+ : 1+1 is 2 ,but “1” +1 is “11”

要在数字和字符串之间转换

var count =10;
var s1 ="" +count;     //"10"
var s2 = count + " bannanas, ah ah!";  //“10 bananas,ah ah!”
var n1 = parseInt("41 is the answer")
var n2 =parseFloat("booyah");   //NaN

要访问字符串的字符,请使用[index] 或charAt:

var firstLetter =s[0];
var firstLetter =s.chatAt(0);
var lastLetter =s.charAt(s.length - 1);

for循环(和C原因基本类似)

///for循环模板
for(initialation;last;update) {
    statements;
}

Math对象

///数学属性和数学方法的语法模板
Math.property
Math.method(parameters)

数学常量

常量描述
Math.E自然对数的底数,即2.718281828459045
Math.LN22的自然对数,约为0.693
Math.PI圆周率,3.145926
数学常量

math函数

数学函数

数组与函数

有关数组的方法

函数参数和返回值

///带参函数语法模板
function name(parameterl,parameter2,..., parameterN) {
    statements ;
}
//带参函数
function covertName(firstName,lastName) {
    lastName =lastName.toUpperCase();
    var firstName =name.substring(0,spaceIndex);
    var input =document.getElementById("name");
    input.value =lastName + ","+ firstInitial +".";
}
//带返回值函数的语法模板
function name(parameter1,parameter2,..., parameterN) {
    statements ;
    return value;
}

输入对话框—–prompt

函数prompt(“message”)
prompt(“message”,”default value”)
描述在弹出框中显示用户提示信息
返回值用户输入字符串信息,或者用户选择曲线使返回控制
对话框
//带返回值函数的语法模板
function prom() {
    var input =document.getElementById("year")
    var year =prompt("请输入你的出生年份。")
    input.value =year;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="name.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<h1>Prompt</h1>
<p>请输入您的出生年份</p>
<div>
    <input id="year" type="text" size="24" />
    <button onclick="prom();">输入年份</button>
</div>
</body>
</html>
prompt

confirm

函数confirm(“message”)
描述确定用户的决定
返回值用户点击“确认”则值为真,点“取消”值为假
confirm
//带返回值函数的语法模板
function conf() {
    var input =document.getElementById("year")
    var year =prompt("please input ypur birth year.")
    if(confirm("Are you sure?")) {
        input.value =year;
    }
}
confirm

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CSS基础教学

2020-08-26

©2020 Foryouos All rights reserved.    |   豫ICP备20023651号    |   隐私政策            |   豫公网安备 41022202000044号