HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
JavaScript:直接写入 HTML 输出流
写在body里面
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
JavaScript:对事件的反应
通过对按钮的点击
alert()是一个自带的函数
<button type="button" οnclick="alert('欢迎!')">点我!</button>
JavaScript:改变 HTML 内容
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
查找元素的方法是在DOM(文档对象模型)定义的,是用于访问HTML的正式问w3c标准
您将在本教程的多个章节中学到有关 HTML DOM 的知识。
element.src.match("str") str只要在src中有这个字段就可以
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/statics/images/course/pic_bulboff.gif";
}
else
{
element.src="/statics/images/course/pic_bulbon.gif";
}
}
</script>
<img id="myimage" οnclick="changeImage()"
src="/statics/images/course/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
element.src="str" str:改变元素的路径,不是简单改变文字
改变样式函数:element.style.color="str"; str是新的颜色号
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript:验证输入
定义变量需要用var
IsNaN()检验是否是数字
if isNaN(x) {alert("不是数字")};
js 里面写函数的时候要先写上function
function myFunction(){ }
如需要在html中添加js代码,必须要加上script标签
浏览器会解释并且执行script里面的代码
脚本既可以写在body里面也可以写在head里面
外部的 JavaScript
我们也可以把脚本保存到外部文件里面
外部文件的文件扩展名是.js
如果需要使用外部文件,需要在script标签的src中
<script src="/statics/demosource/myscript.js"></script>
弹窗的话
window.alert(5+6);
js函数
函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块
调用带参数的函数
function myfunction(var1,var2){
代码
}
有时我们希望函数 将值返回给调用它的地方
function myfunction()
{
var x=5;
return x;
}
局部变量、全局变量、
变量的生存周期(局部变量会在函数运行之后被删除、全局变量会在页面关闭之后被删除)
向未声明的js变量分配值(将声明一个全局变量carname,即使它在函数内执行)
作用域
js事件
事件是可以被js侦测到的行为
注意点:在事件触发的时候js可以执行一些代码
HTML元素中可以添加事件属性 单引号和双引号都可以
<button οnclick='getElementById(“demo”).innerHTML=Date()'>the time is?</button>
修改id=“demo”元素的内容
也可以修改自身元素的内容“this.innerHTML=Date()”
js字符串
js字符用于存储和处理文本
字符串可以是插入到引号中的任何字符,可以使用单引号,或者双引号
可以使用索引位置来访问字符串中的每个字符
var character[7];//索引位置从0开始,可以在字符串中使用引号
也可以使用转义字符
字符串长度
var txt = "ADB";
var sin = txt.length;
字符串可以是对象
var x = "Jon";//x 是String类型
var y = new String(Jon);//y是Object类型
js运算符
算术运算符、赋值运算符 = 、字符串连接运算符加号 +
字符串和数字相加,返回字符串(实际上是把数字看成是字符串连接起来)
js比较和逻辑运算符
---------------------
js for循环
for(var i=0;i<cars.length;i++)
{
document.write(cars[i]+"<br>");
}
js类型转换
typedef操作符
例如:
typedef "Jon";//返回string
constructor 属性返回所有js变量的构造函数
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
其中indexof(string) 返回string字符串在父串中首次出现的位置(从0开始)
便于判断和截取字符串没有就返回-1;
String(x)//将变量x转换为字符串并返回
将日期转换为字符串(Date())
Date方法使用tostring() 也有同样的效果
将字符串转换为数字
Number(“3.14”);//返回3.14
Number(“ ”) //返回0
Number(“”)//返回0
Number(“98 88”)//返回NaN
//NaN不是因为为空,而是因为不能执行
一元运算符+
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字
变量不能转换,他仍然会是一个数字,但NaN(不是一个数字)
全局方法 Number() 可将布尔值转换为数字。
JavaScript 正则表达式
search()方法用于检索和模式匹配的子字符串的起始位置
replace()方法用于在字符串中用一些字符替换另一些字符,或者替换一个和正则表达式相匹配的子字符串
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
输出结果6
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool");
输出结果为Visit w3cschool!
js错误处理|Throw、try和catch
js抛出错误(throw)当错误发生时,js引擎通常会停止,并且生成一个错误的消息
js try和catch
try
{
//在这里运行代码//代码可能有错误
}
catch(err)
{
//在这里处理错误
}
throw 语句允许我们自己创建自定义错误
三者结合起来用可以控制程序流,并且生成自定义的错误
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
js调试
浏览器内置调试工具
内置的调试工具可以开启或者关闭,严重的错误会发给用户
有了调试工具就可以设置断点(代码停止执行的位置)
且可以在代码执行的时候检测变量
浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
json语法规则
数据为 键/值 对
数据用逗号分隔
大括号保存对象
方括号保存数组
json数据
"firstName":"John" // 键/值 对
JSON 对象
{"firstName":"John", "lastName":"Doe"}//json对象保存在大括号里面
json数组
json数组保存在中括号内
就像js中,数组可以包含对象
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
以上实例中employees是一个数组。包含了三个对象
每个对象是员工的记录(姓和名)
通常我们从服务器中读取JSon数据,并在网页中显示数据
首先
先创建js字符串
var txt = '{"employees":[{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"} ]}'
然后使用js内置函数JSON.parse()将字符串转换为js对象
var obj = JSON.parse(txt);
最后在你的页面中使用新的js对象
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
运行结果:
Anna Smith
javascript:void(0) 含义
最关键的是 void关键字,该操作符计算一个表达式的值,但是不返回值
来源:CSDN
作者:yky__xukai
链接:https://blog.csdn.net/yky__xukai/article/details/103848187