学习blus老师js(1)--基础

1.网页换肤：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link id="l1" rel="stylesheet" type="text/css" href="css1.css" />
<script>
function skin1()
{var oL=document.getElementById('l1');oL.href='css1.css';
}function skin2()
{var oL=document.getElementById('l1');oL.href='css2.css';
}
</script>
</head><body>
<input type="button" value="皮肤1" onclick="skin1()" />
<input type="button" value="皮肤2" onclick="skin2()" />
</body>
</html>

View Code

css1.css

@charset "utf-8";
/* CSS Document */body {background:black;}
input {width:200px; height:100px; background:yellow;}

View Code

css2.css

@charset "utf-8";
/* CSS Document */body {background:#CCC;}
input {width:100px; height:50px; background:red;}

View Code

任何标签都可以加ID，包括link

任何标签的任何属性，也都可以修改

HTML里怎么写，JS里就怎么写

但是有一个例外，html的class，js里面要写className，因为class在js里面是一个关键字；

除了class外，html里面和js里面属性都是统一。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; border:1px solid black;}
.box {background:red;}
</style>
<script>
function toRed()
{var oDiv=document.getElementById('div1');oDiv.className='box';
}
</script>
</head><body>
<input type="button" value="变红" onclick="toRed()" />
<div id="div1">
</div>
</body>
</html>

View Code

操作属性的方法：

第一种方法：使用xx.xx

oTxt.value = 'abc';

第二种方法：使用[]

oTxt['value'] = '123';

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function setText(name)
{var oTxt=document['getElementById']('txt1');//第一种操作属性的方法//oTxt.value='dsfasdfasdf';//第二种操作属性的方法
    oTxt[name]='dsfasdfasdf';
}
</script>
</head><body>
<input id="txt1" type="text" />
<input type="button" value="改变文字" onclick="setText('title')" />
</body>
</html>

View Code

4.变量类型

1) typeof运算符

js里面常见的6种类型：

number、string、boolean、undefined、object、function

一个变量应该只存放一种类型的数据

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var a=12;
//alert(typeof a);    //number

a='asdfasd';
//alert(typeof a);    //string

a=true;
//alert(typeof a);    //boolean

a=function ()
{alert('abca');
};
//alert(typeof a);    //function

a=document;
//alert(typeof a);    //objectvar b;
alert(typeof b);    //undefined//1.真的没定义
//2.虽然定义，没有给东西
</script>
</head><body>
</body>
</html>

View Code

2)数据类型转换：

显式类型转换(强制类型转换)

NaN Not a Number 非数字

var a = parseInt('abc');

alert(a) ; //NaN

alert(isNaN(a)) ; //true

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{var oTxt1=document.getElementById('txt1');var oTxt2=document.getElementById('txt2');var oBtn=document.getElementById('btn1');oBtn.onclick=function (){var n1=parseInt(oTxt1.value);var n2=parseInt(oTxt2.value);if(isNaN(n1)){alert('您输入的第一个数字有误');}else if(isNaN(n2)){alert('您输入的第二个数字有误');}else{alert(n1+n2);}};
};
</script>
</head><body>
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="求和" />
</body>
</html>

View Code

l隐式类型转换

==、===

var a=5;
var b='5';alert(a==b);    //true        先转换类型，然后比较alert(a===b);    //false        不转换类型，直接比

var a='12';
var b='5';alert(a+b);        //125  1.字符串连接        2.数字相加
alert(a-b);        //7  1.数字相减

5.什么是闭包

简单的理解：

子函数可以使用父函数中的局部变量

之前一直在使用闭包

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
//子函数可以使用父函数的局部变量function aaa()        //父函数
{var a=12;function bbb()    //子函数
    {alert(a);}bbb();
}aaa();
</script>
</head><body>
</body>
</html>

View Code

但是闭包还有一些高级的应用；

6.命名规范：

命名规范及必要性

l可读性——能看懂

l规范性——符合规则

匈牙利命名法

l类型前缀

l首字母大写

7.什么是真、什么是假：

真：true、非零数字、非空字符串、非空对象
假：false、数字零、空字符串、空对象、undefined

8.json

var json={a: 12, b: 5, c: 7};//循环json
for(var key in json)
{alert('第'+key+'个东西：'+json[key]);
}

------------------

转载于:https://www.cnblogs.com/tenWood/p/7668495.html

学习blus老师js(1)--基础相关推荐

JavaScript学习第二部-js的基础语法和语句
文章目录语法 JavaScript 字面量 JavaScript 变量 JavaScript 操作符 JavaScript 语句 JavaScript 关键字 JavaScript 注释 JavaS ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他
WebGL 可视化3D绘图框架:Three.js 零基础上手实战网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统 ...
视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript
零基础JS入门系列课程(2)之JS语法基础精讲螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术邓老师 ¥59.00 立即订阅扫码下载「CSDN程序员学院 ...
C 语言学习笔记(二)：编程基础
目录一.冯诺依曼模型二.程序语言发展历史三.进制 3.1 二进制 3.2 八进制 3.3 十六进制 3.4 进制转换:二进制.八进制.十六进制.十进制之间的转换 3.4.1 将二进制.八进制.十 ...
python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
Markdown 中的flow语法 flowchart.js 的基础教程
Markdown 中的Flow flowchart.js 的基础教程 JS Markdown 编辑器 https://stackedit.io/ 百度了下,看到网上关于 flow 的教程很少好像.写个 ...
强化学习笔记（一）基础篇
强化学习笔记(一)基础篇目录 1.强化学习相关概念 2.强化学习与监督学习和非监督学习的区别 3.强化学习分类 4.三对重要概念目录写在前面:本文系小编学习邹伟老师等人编著的<强化学习&g ...
JavaScript 的进阶学习（Node.js）_01
Node的学习 Node.js 是一个基于 Google 所开发的浏览器 Chrome V8 引擎的 JavaScript 运行环境. 属于服务端的 JavaScript . 2019.03.01 ...
菜鸟学习----前端vue.js学习01
菜鸟学习----前端vue.js学习01 项目使用vue.js脚手架,构建项目 1.vue.js构建登录框登录框架构使用element ui Tabs 标签页,构建基础样式.用户登录,二维码查询,编 ...

学习blus老师js(1)--基础

学习blus老师js(1)--基础相关推荐

最新文章

热门文章