javascript基础知识
undefind:表示不确定的类型，只是定义了一个变量，但具体什么类型并不知道，也就是var j; 只定义但并没有赋值
Javascript类型转换
转换为Number 通过parseInt进行转换
转换为String 任何数据类型+String类型=String 类型
转换为Boolean ture false 所有非0数字为true,反之为false.
Undefined,null转换为false
如：
if(undefined||null){
alert("haha");
}else{
//会走这里
alert("nohaha");
}
if(2){//会走这里
alert("haha");
}else{
alert("nohaha");
}
数据传递：
基本类型为：值传递
function addNum(i){
i = i + 5;
}
function test(){
var i = 0;
addNum(i);
alert(i);//打印出来的值为0
}
函数和事件通常是一种绑定关系，通过事件调用函数。如果绑定多个函数，中间用分号隔开
<marquee onmouseover="this.stop()" onmouseout="this.start()">跑马灯效果，欢迎大家学习！</marquee>
选择之后直接新打开一个页面：
function goToUrl(){
var s = document.getElementById("toUrl");
if(s.options[s.selectedIndex].value != -1){
//window.location.href="http://www." + s.options[s.selectedIndex].value + ".com";
window.open("http://www." + s.options[s.selectedIndex].value + ".com","_blank");
}
}
<select onchange="goToUrl();" id="toUrl">
<option value="-1">请选择要去的网站</option>
<option value="sina">新浪网</option>
<option value="baidu">百度</option>
</select>
***************************************************
这段代码是屏闭鼠标右键功能及复制功能
<body onmouseup="document.selection.empty();" oncontextmenu="return false;"
onmousemove="document.selection.empty(); onCopy="document.selection.empty();"
onselect="document.selection.empty();">
################################################################
动态添加事件：
<script type="text/javascript">
function mt1(){
alert("1");
}
function mt2(){
alert("2");
}
function mt3(){
alert("3");
}
function init(){
var btn1 = document.getElementById("button1");
if(window.ActiveXObject){
//这是IE浏览器,需要写全 onclick,也不需要false
btn1.attachEvent("onclick",mt1);
}else{//这是firefox浏览器
btn1.addEventListener("click",mt1,false);
}
//btn1.addEventListener("click",mt2,false);
//btn1.addEventListener("click",mt3,false);
}
</script>
</head>
<body onload="init();">
<input type="button" value="button1" id="button1"/>
</body>
########################################################################
全选
隐藏，显示层
折叠菜单效果
###################################################################
<script language="javascript">
function selectAll(){
var al = document.getElementById("all");
/*全选功能
if(al.checked == true){
var cbs = document.getElementsByName("cb");
for(var i = 0; i < cbs.length; i++){
cbs[i].checked = true;
}
}else{
var cbs = document.getElementsByName("cb");
for(var i = 0; i < cbs.length; i++){
cbs[i].checked = false;
}
}
*/
//全选功能
var cbs = document.getElementsByName("cb");
for(var i = 0; i < cbs.length; i++){
cbs[i].checked = al.checked;
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
全选
<input type="checkbox" name="checkbox2" value="checkbox" id="all" onclick="selectAll();"/>
</p>
<p>
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
<input type="checkbox" name="cb" value="checkbox" />
</p>
</form>
</body>
</html>####################################################################
隐藏，显示层
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:17px;
top:26px;
width:96px;
height:215px;
z-index:1;
background-color: #FF6600;
}
#Layer2 {
position:absolute;
left:806px;
top:16px;
width:104px;
height:225px;
z-index:2;
background-color: #FF6600;
}
#Layer3 {
position:absolute;
left:297px;
top:18px;
width:353px;
height:31px;
z-index:3;
}
-->
</style>
<script language="javascript">
function hiddenAll(){
var l1 = document.getElementById("Layer1");
var l2 = document.getElementById("Layer2");
l1.style.display = "none";
l2.style.display = "none";
}
function showAll(){
var l1 = document.getElementById("Layer1");
var l2 = document.getElementById("Layer2");
l1.style.display = "block";
l2.style.display = "block";
}
</script>
</head>
<body>
<div id="Layer1">
<p>test学院</p>
<p>Js教程</p>
<p>火热发布中！</p>
<p> </p>
<p> </p>
<p> </p>
<p> <span onclick="hiddenAll();" style="cursor:pointer">关闭</span></p>
</div>
<div id="Layer2">
<p>test学院</p>
<p>Js教程</p>
<p>火热发布中！</p>
<p> </p>
<p> </p>
<p> </p>
<p> <span onclick="hiddenAll();" style="cursor:pointer">关闭</span></p>
</div>
<div id="Layer3">
<div align="center"><span onclick="showAll()" style="cursor:pointer">显示广告</span></div>
</div>
</body>
</html>###############################################################
折叠菜单效果
<script language="javascript">
function showInfo(str){
//先隐藏所有
for(var i = 1; i <= 3; i++){
document.getElementById("tr"+i).style.display="none";
}
//显示指定对象
document.getElementById(str).style.display="block";
}
</script>
</head>
<body>
<table width="166" border="1">
<tr>
<td height="22" style="cursor:pointer;" onclick="showInfo('tr1')">Js教程</td>
</tr>
<tr id="tr1">
<td height="65" valign="top"><table width="100%" border="0">
<tr>
<td>第一讲</td>
</tr>
<tr>
<td>第二讲</td>
</tr>
<tr>
<td>第三讲</td>
</tr>
</table></td>
</tr>
<tr>
<td height="22" style="cursor:pointer;" onclick="showInfo('tr2')">css教程</td>
</tr>
<tr id="tr2" style="display:none;">
<td height="65" valign="top"><table width="100%" border="0">
<tr>
<td>第一讲</td>
</tr>
<tr>
<td>第二讲</td>
</tr>
<tr>
<td>第三讲</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23" style="cursor:pointer;" onclick="showInfo('tr3')">JavaEE教程</td>
</tr>
<tr id="tr3" style="display:none;">
<td height="65" valign="top"><table width="100%" border="0">
<tr>
<td>第一讲</td>
</tr>
<tr>
<td>第二讲</td>
</tr>
<tr>
<td>第三讲</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
#################################################################
js里的常用对象：字符串及日期;
function testMath(){
//round四舍五入
//var money = document.getElementById("money").value;;
//alert(Math.round(money));
//random产生随机数
//alert(Math.floor(Math.random()*30));
}
function testDate(){
var d = new Date();
//alert(d.getYear());//取得后两位年份
//alert(d.getFullYear());//得到完整年份
//alert(d.getMonth() + 1);//月份，0-11
//alert(d.getDate());
//alert(d.getDay());//星期几
//alert(d.getHours());//小时
//alert(d.getMinutes());//分钟
//alert(d.getSeconds());//秒
document.getElementById("money").value = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
setTimeout("testDate()",1000);
}
function testString(){
//var stringname= new String("字符串");
//var s = "字符串";
//var em = document.getElementById("money").value;//判断电子邮件合法性
//if(em.indexOf("@") == "-1"){
// alert("缺少@");
//}
//replace
//while(document.getElementById("money").value.indexOf("delete") != -1){
//d document.getElementById("money").value=document.getElementById("money").value.replace("delete","删除");
}
}##############################################################
正则表达式：
<script language="javascript">
function check(){
var pattern = /^[0-9]{5}[a-zA-Z]*$/;
var v = document.getElementById("userName").value;
var flag = pattern.test(v);
alert(flag);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="textfield" id="userName"/>
<input type="button" name="Submit" value="按钮" onclick="check();"/>
</form>
</body>
</html>##############################################################
javascript面向对象编程：
Javascript中类(对象)用function即函数来体现。
对象的定义与访问
定义属性，方法
1.使用prototype创建
2.使用this创建
3.JSON方式创建
4.其它方式创建：如动态创建
5.其它方式创建:在内置对象中添加属性或方法
####################################################################
使用prototype创建对象：
//定义一个对象
function test(){
//定义属性
test.prototype.username="baby";
//定义一个方法
test.prototype.sayHello=function(name){
alert(name + "Hello!");
}
//也是定义一个方法
test.prototype.sayHello2=sayHello_fun;
}
function sayHello_fun(){
alert("Hello!");
}
function testObject(){
//创建一个test对象
var _o = new test();
//调用test对象的属性
alert(_o.username);
//调用方法
_o.sayHello();
var _boy = new boy();
alert(_boy.age);
_boy.say("Bye!");
}
//使用this定义一个对象
function boy(){
//定义对象的属性
this.name="小新";
this.age=18;
//定义方法
this.say=function(s){
alert(s);
}
}
//JSON方式创建对象 键值对方式 建议使用这种方式
function testJson(){
//创建一个obj的对象
var obj = {name:"abc",age:18};
alert(obj.age);
}
function showObj(o){
alert(o.name);
//alert(o["name"]);
}
function strToObj(){
//定义一个字符串
var strObject = "{name:'bcd',age:22}";
showObj(eval("("+strObject+")"));
}
JSON方式创建的对象可以传递，可以与字符串之间进行转换，转换后以键值对存在，eval函数，将字符串转换为对象
function test1(){}
function runTest1(){
//创建一个对象，并动态的添加属性及方法
var o = new test1();
o.name="火狐";
o.age=33;
o.sayHello=function(){
alert("haha,Hello!");
}
//alert(o.name);
o.sayHello();
}
在内置对象中添加属性或方法
function testWindow(){
window.alert("nihao");
window.prototype.shuo=function(s){
alert(s);
}
shuo("你好！");
}
#####################################################
对象的继承
//定义一个 人 对象
function Person(){
//这是定义一个静态属性
Person.cityName="北京";
Person.prototype.name="张三";
Person.prototype.age=30;
Person.prototype.sayHello=function(){
alert("Hello!");
}
}
//定义一个学生对象
function Student(){
//定义一个属性
Student.prototype.schoolName="中国大学";
//定义私有属性
var gfName = "lingling";
}
function testExt(){
Student.prototype = new Person();//继承的关键！
var stu = new Student();
//alert(stu.name);
//stu.sayHello();
//alert(stu.schoolName);
////alert(stu.gfName);//结果为undefind 因为访问了private的属性
//重新赋值
//stu.name="李四";
//alert(stu.name);//结果为 李四
var p = new Person();
alert(p.cityName);//调用静态属性：不能通过实例对象调用，结果为undefind
alert(Person.cityName);//通过类方式直接调用静态属性 结果为:北京
}
##########################################################
备注：使用this及prototype定义都是公有的属性或者方法
直接使用var 定义，为私有属性或方法，只能在其内部访问，不能通过对象去调用
##########################################################
Javascript面向对象和所有面向对象编程语言一样，都是通过实例化的方式进行访问，两个对象间的非静态变量不会被干扰。
JSON中，属性可以是方法，甚至可以是一个子对象。
使用静态变量，需要实例化一下function，告诉浏览器它不是函数，而是对象
function test(){
//定义一个静态的属性
test.cityName = "北京";
test.prototype.name="张三";
test.prototype.age=19;
}
//json里可以定义方法，属性也可以是对象
var jobj =
{
name : "王五",
sex : "男",
age : 33,
sayHello : function(){alert("Hello!");},
subObj : {
subName : "小A"
}
};
var jsonArray = ["aaa","bbb"];
function run(){
window.o = function(s){
alert(s);
}
/*
var t = new test();
var t1 = new test();
t1.name = "李四";
alert(t.name);//张三
alert(t1.name);//李四
*/
//alert(jobj.name);
//jobj.sayHello();
//alert(jobj.subObj.subName);
//alert(jsonArray[0]);//访问数组
//jobj.name = "找六";
//alert(jobj.name);//结果为 找六
//jsonArray[0] = "111";
//alert(jsonArray[0]);//111
alert(test.cityName);//结果为undefind
new test();
alert(test.cityName);结果：北京
//var t = new test();
//var t1 = new test();
//alert(test.cityName);结果为：北京
//alert(t.cityName);//undefind javascript中，实例对象不能访问静态变量
o("hehehe");
}
#############################################################
方法重写 覆盖：
function test(){
test.cityName = "北京";
test.prototype.name="张三";
test.prototype.age=19;
test.prototype.sayHello=function(){
alert("Hello!");
}
}
function run(){
var t = new test();
//方法重写
t.sayHello = function(){
alert("您好！");
}
t.sayHello();
}
##################################################
重写window 对象的alert方法
<script language="javascript">
function test(){
test.cityName = "北京";
test.prototype.name="张三";
test.prototype.age=19;
test.prototype.sayHello=function(){
alert("Hello!");
}
}
function run(){
window.alert = function(s){
var o = document.getElementById("Layer1");
o.innerHTML = "<input name=a type=button value=关闭 onClick='hiddenWindow()'/>" + s;
o.style.display = "block";
}
//通过内置对象方式给对象添加新的方法 很有用
window.o = function(s){
alert(s);
}
//直接调用
o("hahahaha");
}
function hiddenWindow(){
var o = document.getElementById("Layer1");
o.style.display = "none";
}
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:221px;
top:136px;
width:290px;
height:151px;
display:none;
color:#FFFFFF;
z-index:1;
background-color: #0033CC;
}
-->
</style>
</head>
<body>
<div id="Layer1">
</div>
<input name="看结果" type="button" value="看结果" onclick="run();"/>
</body>
</html>
##################################################
分享到：
相关推荐
以下是对JavaScript基础知识的总结，主要关注在网页中使用的弹出对话框、函数调用以及带有参数的函数。 1) Alert Box `alert()` 函数用于显示一个包含警告信息的单行对话框，用户只能点击“确定”按钮关闭它。在...
1. JavaScript 的基础知识 在学习 JavaScript 之前，你需要了解 HTML 和 XHTML 的基础。JavaScript 被设计用来向 HTML 页面添加交互行为，通过在 HTML 中插入 JavaScript 代码，可以实现页面元素的动态操作和用户...
通过思维导图的方式，快速了解掌握JavaScript的基本内容
本文将基于“JavaScript语言基础知识点总结十张图”这一主题，深入探讨JavaScript的基础概念、语法特性以及核心知识点。 1. **变量与数据类型** JavaScript有七种数据类型：Undefined、Null、Boolean、Number、...
本思维导图涵盖HTML、CSS所需掌握的主要应用知识，及JavaScript基础语法，是本人2020年暑假学习笔记，总计...体系清晰，逻辑分明，适合已学习人群对基础知识的复习，初学者也可以以此为基础进行自己的知识体系创建。
以下是对JavaScript语言基础知识点的详细总结： 1. **变量与数据类型**： - 变量：JavaScript中的变量无需预定义，使用`var`、`let`或`const`声明。`let`和`const`是ES6引入的新特性，它们在块级作用域内有效。 -...
2.1 JavaScript 操作对象的简单介绍-- 属性和方法 . . . . . . . . 8 2.2 JavaScript 代码的加入 . . . . . . . . . . . . . . 10 2.2.1 加入JavaScript 代码的方式一 . . . . . . . . . . . . . . . . . . . . . . ...
JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言，能实现网页的交互功能。下面是该资源中的重要知识点总结： 一、 JavaScript 基本概念 * ...
Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言，主要用于客户端脚本编程。它可以在浏览器中执行，实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结，包括脚本...
这篇总结涵盖了JavaScript语言的基础知识，帮助初学者快速上手并深入理解这门强大的脚本语言。 首先，我们来看“JavaScript 数据类型”。JavaScript有七种数据类型：Undefined、Null、Boolean、Number、BigInt、...
JavaScript 是一种广泛应用于网页开发的编程语言，以下是 JavaScript 的基础知识点总结。 数据类型 在 JavaScript 中，数据类型包括字符串（string）、数值型（number）、布尔型（boolean）、null、undefined 和...
javascript基础知识思维导图，js入门必备，学好ES5才能去学ES6，请不要本末倒置。ES5是基础、ES6其实是ES5的技术补充，弥补ES5长久以来的一些痛点，增加语法糖。ES6思维导图，后续更新。
本文将深入探讨JavaScript的基础知识点，包括语法、变量、数据类型、控制结构、函数、对象、数组、DOM操作等方面。 1. **JavaScript 语法基础** - 注释：单行注释`//`和多行注释`/*...*/` - 行与语句：以分号`;`...
### JavaScript知识点总结《一》 ...以上是关于JavaScript的基础知识点总结，涵盖了初步认识JavaScript以及JavaScript的基本语法等内容。这些知识点对于初学者来说非常重要，有助于快速入门并进一步深入学习。
以上是对这位资深Web前端开发者总结的JavaScript基础知识的详解，理解并熟练掌握这些内容，对于提升JavaScript编程能力至关重要。通过不断实践和学习，开发者可以进一步探索JavaScript的高级特性和应用，例如前端...
本文将深入探讨JavaScript的基础知识点，通过思维导图的形式帮助学习者更好地理解和记忆。 1. 变量与数据类型： JavaScript支持变量的动态类型，这意味着你无需在声明时指定其类型。主要有七种基本数据类型：...
总结来说，JavaScript基础知识涵盖了数据类型、运算符、流程控制、函数以及与HTML的交互等方面，这些都是进行前端开发时不可或缺的知识点。理解并熟练运用这些概念，可以帮助开发者创建出丰富且互动性强的网页应用。
本文将围绕“JavaScript知识点总结（思维导图10张）”进行详细解析，涵盖从基础语法到高级特性，帮助你构建完整的JavaScript知识体系。 1. **JavaScript操作符与字符** (Javascript-operational-character.gif) - ...
这篇经典JavaScript知识总结涵盖了从基础语法到高级特性的多个方面，旨在帮助有一定基础的开发者巩固和扩展他们的JavaScript知识。 1. **创建脚本块**：在HTML文件中，使用`<script>`标签来插入JavaScript代码。...
以下是对JavaScript语言基础的详细总结，涵盖的主要知识点包括变量、数据类型、操作符、控制流、函数、对象、数组、闭包、原型链等。 1. 变量与数据类型： - 变量：在JavaScript中，使用`var`、`let`或`const`...