静态Web开发 JavaScript

三章 Javascript

1节
javascript基本语法和注意事项

脚本,一条条的文字命令。执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行。(不需要编译)
常见的脚本:批处理脚本、T-SQL脚本、VBScript等。(.net生成的exe文件用记事本打开看不懂)
js有一种计算能力的作用,可以在页面添加一些功能
LiveScript+java一些特性--->js
工具:Editplus MyEclipse Visual Studio 2010
var声明变量
<script type="text/javascript">
var n=10;n="我是js";
</script>
js基本组成:
ECMAScript基本语法(浏览器都支持,有统一标准)
Dom(文档对象模型)
Bom(浏览器对象,一般功能浏览器支持,没有统一标准)控制浏览器可见区域以外的部分
注意:
大小写铭感
弱类型语言,声明用var
字符串用单引号(建议)
每句话后面加';'
js注释与c# java一样

alert("我的名字是:"+name);
alert(new Date().toLocaleTimeString());

2节
外部引用js文件

<script language= > //不推荐,依然在使用
<script>标签也可以放到html里或body,先执行head中的js
js标签可以有多个
alert('今天是个耗子日,</script>'); //当前js就结束了; 要想显示,用纯字符型拼接:</'+'script>'>

<script src="1.js" type="text/javascript"> //1.js 值写js内容,需要js标签
</script>

3节
js中的事件超链接显示时间

<input type="button" οnclick="alert(new Date().toLocaleString());" />
<a href="#" οnclick="...">百度</a> //‘#’ 默认跳转起始位置
<a href="javacript:void(0);" οnclick="..."></a> //void(0) 表示没有用的值,不去任何地方
<a href="javascript:alert('时间');"></a>

4节
数据类型

变量命名规则:字母、下划线、$开头,中间可以有数字
声明字符串时用单引号,主要是方便和html进行合成,避免转义符的麻烦
声明变量时,如果前面没有var,那么此时该变量为全局变量,可以会和将来外部引入的js局部变量冲突
数据类型:Boolean Number(数字) String Undefined(未定义) Null(空对象) Object(对象类型), underfined与其他计算结果不是我们想要的
//判断变量是哪种数据类型?
var n1=10;
alert(typeof n1); //Number
var n2=null;
alert(typeof n2);alert(String(n2)); //Object //Null
var n3;
alert(typeof n3); //Undefined
alert(typeof(n3));
//判断数据对象是不是某种数据类型 instanceof
var obj=new Object();
alert(obj instanceof Object);

//null(已知的)和undefined(未知的)
alert(Boolean(underfined)); //false
alert(Boolean(null)); //false
alert(underfined==null); //true 非严格判断
alert(underfined===null); //false 严格判断(类型相同,值相等)
//判断一个变量是否可以使用,判断不是null underfined
var n; //n=null
if(typeof(n)!='underfined' && n!=null){
alert("该变量可以使用");
}else {
alert("该变量不可以使用");
}

5节
变量的作用域和js转义

<script type="text/javascript">
var n=10;
function fun(){
var num=100;
for(var i=0;i<10;i++){ //可以吧i直接申明在最外面
...
}
alert(i);
}
fun(); //js中没有作用域这个问题
</script>
<script type="text/javascript">
n=null;//释放掉这个n
alert(n); //能打印n,n为全局变量
</script>

//js转义
alert('c:\\sss\\ffff\\aaa.txt');

6节
类型转换

<script type="text/javascript">
//1 转整数
var n='100'; //n='100fs' n='nn100'
ver n1=parseInt(n); //parseInt(n,8) -->8进制的n进行转换
alert(n1+100);
//2 转小树
var num=parseFloat('100.7');
//3 转数字
var num='100'; //num='100fs'
var n=Number(num);
alert(n+100);
//4 判断是不是整数
var n=100;
if(isNaN(n)){
alert('不能使用');
}else{
alert('可以使用');
}
</script>
//5
String(arg) 表示任意类型可以转字符串
Boolean(arg) 表示任意类型的值可以转Boolean

7节
js中的方法
//1
function show1(){
alert(...);
}
show1();
//2
function showName(name){
alert('我的名字:'+name);
}
showName('小子')
//3 呆参数呆返回值
function addNum(num){
return 100+num;
}
var sum=addNum(100);
alert(sum);
//自定义的函数名不要和js内置、dom内置的方法重名,比如selectAll、focus等函数名不要用

js中没有方法的重载 arguments对象:可以获得方法有多少个参数和传的方法的值
function addNumber(){
//alert(arguments.length);
var ret=0;
for(var i=0;i<arguments.length;i++){
ret += arguments[i];
}
return ret;
}
//一个方法没有明确的返回值,得到的结果就是undefined
var sum=addNumber(1,2,3,4,5);
alert(sum);

8节
js中的匿名方法
//1
var ff=function(){
alert('帅');
}
ff();
//2
οnlοad=function(){
document.getElementById('btn').οnclick=function(){
alert('学好电脑');
}
}
<input type="button" id="btn" />
//3
(function(n1,n2){alert(n1+n2);})(1,2);

9节
字符串常用方法

length charAt() indexOf() split() substr()/substring() toUpperCase()/toLowerCase()

var msg="我好开心!创奇拿明月湖"
alert(msg.length);
alert(msg.charAt(2));
//2
var i = msg.indexOf('光',0);
alert(i);
//3
var names='东邪|西毒|南帝|北丐';
var strs=names.split('|');
//alert(strs);
for(var i=0;i<strs.length;i++){
alert(strs[i]);
}
//4
var msg='我靠,美死了';
//var s = msg.substr(1,3); //截取子字符串(从索引1到索引3)
var s=msg.substring(1,3) (从索引1到索引2)
alert(s);
//5
toUpperCase(); toLowerCase();

10节
js中的数组

js中的Array对象就是一个数组,是一个动态数组:可以存数字、Boolean等等类型,可以看成是一个像C#中的数组、ArrayList、Hashtable等的超强综合体
var aa=new Array();
aa[0]=1;
aa[1]=false;
aa[2]='zhangsan';
//2
var arr=[1,2,false,'zs']; //数组
for(){
alert(arr[i]);
}
for(var key in arr){ //key 索引
alert(key+'=='+arr[key]);
}
//3
var arr={"东邪":"123","西毒":"345"}; //键值对
for(var key in arr){ //key 键值对中
alert(key+'=='+arr[key]);
}

11节
js中的扩展方法及调试

通过类对象的prototype设置扩展方法
//1
var msg="qwweer@126.com";
String.prototype.isEmail=function(){
return this.indexOf('@')!=-1?true:false;
};
alert(msg.isEmail());
//2 调试--->google--->设置断点---F11单步运行----Console中的调出所有方法
var sum=0;
for(var i=0;i<10;i++){
sum+=i;
}
alert(sum);

//2 调试--->google--->设置断点---F11单步运行----Console中的调出所有方法

【详情-->请查看:】

 1 <script type="text/javascript">
 2         //最简单的方法是console.log(),可以用来取代alert()或document.write()。
 3         console.log("Hello World");
 4         //console对象还有4种显示信息的方法,分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。
 5         console.info("这是info");
 6         console.debug("这是debug");
 7         console.warn("这是warn");
 8         console.error("这是error");
 9         //3 占位符
10         //console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。
11         console.log("%d年%d月%d日", 2011, 3, 26);
12         console.log("圆周率是%f", 3.1415926);
13         var dog = {};
14         dog.name = "大毛";
15         dog.color = "黄色";
16         console.log("%o", dog);
17         //4 分组显示
18         //如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。
19         console.group("第一组信息");
20         console.log("第一组第一条");
21         console.log("第一组第二条");
22         console.groupEnd();
23         console.group("第二组信息");
24         console.log("第二组第一条");
25         console.log("第二组第二条");
26         console.groupEnd();
27         //5 console.dir()
28         //console.dir()可以显示一个对象所有的属性和方法。比如,现在为第二节的dog对象,添加一个bark()方法。
29         dog.bark = function () { alert("汪汪汪"); };
30         console.dir(dog);
31     </script>

JS中Console的方法

posted on 2015-07-29 15:51 AdolphYang 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/adolphyang/p/4686142.html

静态Web开发 JavaScript相关推荐

  1. 静态Web开发 JQuery

    静态Web开发 JQuery 伍章 JQuery 1节 介绍JQuery和顶级对象 <<锋利的JQuery>> JQuery官网: http://jquery.com (下载j ...

  2. 视频教程-移动端Web开发-JavaScript

    移动端Web开发 TriAquae开源运维软件创始人,混迹IT运维领域多年,曾就职于松下.国政通.飞信.中金.NOKIA等公司,维护过少至几十台,多至数万台设备的IT系统,致力于提高企业运维自动化水平 ...

  3. WEB开发 JavaScript

    WEB开发 JavaScript 1,JavaScript简介 web前端有三层: HTML:从语义的角度,描述页面的结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角 ...

  4. python web开发 JavaScript基础

    文章目录 1. script 标签 2. 字面量.变量 3. 数据类型 4. 运算符 5. if 条件 6. switch分支 7. for循环 8. while循环 9. break, contin ...

  5. 如鹏网 静态Web开发 第三章:Javascript

    本章主干知识点: 1.定义js的三种方式:写到html标签中:写到html的script标签中:写到单独的js文件中: 2.JavaScript中类型的转换 3.function.匿名function ...

  6. 2020年 Web 开发的最佳编程语言

    现在最需要的技能之一是编写编程代码的专业知识.以计算机为基础的智能,ML和区块链看起来是本世纪压倒一切的潜在竞争者.Web计划和改进是最重要的吸引人的领域,也是许多新的爆破模式的建立. 最热门的开发语 ...

  7. 了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发)...

    了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编   赵静 译 ISBN 978-7-121-21769-2 2 ...

  8. Spring Boot与Web开发简介||SpringBoot对静态资源的映射规则

    Web开发 1.简介 使用SpringBoot: 1).创建SpringBoot应用,选中我们需要的模块: 2).SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定少量配置就可以运 ...

  9. Web开发:HTML5、CSS、JavaScript必备教程

    2019独角兽企业重金招聘Python工程师标准>>> Web开发:HTML5.CSS.JavaScript必备教程 想开启Web开发的智慧之门吗?想DIY炫酷的网页特效设计吗?想通 ...

最新文章

  1. 工作随笔-日常工作-小说站 PC版
  2. linux 配置jupyter远程访问
  3. azure_面向初学者的Azure Data Explorer
  4. svn merger的时候 报远程主机强迫_SVN与Git比较(二)版本库与工作区
  5. for的部分使用方法
  6. pythonsys用法_Python 使用sys模块
  7. C++的商品管理系统
  8. Android app客户端性能测试工具Emmagee 浅析
  9. 问卷星投票如何刷投票?【请勿非法使用】
  10. 科技公司官网小程序-总体介绍
  11. 【ESD专题】1.ESD基础及IEC61000-4-2标准
  12. Blinky.c(171): warning: #1-D: last line of file ends without a newline
  13. 二叉搜索树(城市数据库)
  14. 生死大PK:软路由是否会威胁到硬路由
  15. Entity and Evidence Guided Relation Extraction for DocRED
  16. P4231 三步必杀
  17. 期货交易应该如何界定交易中的时间周期?
  18. 阿里云视频点播服务的开通和使用
  19. linux下删除以 - 开头的文件
  20. 不使用strcpy()函数实现字符串复制功能

热门文章

  1. 同学聚会后我主动埋单,回家后竟被同学们拉黑了,怎么办?
  2. 纸巾,理由最充分的涨价
  3. 经常用everything对硬盘有伤害吗?
  4. It was in 2006, and as a desktop computer
  5. C语言SetConsoleCursorPosition()函数来定位光标位置
  6. Ubuntu“无法解析或打开软件包的列表或是状态文件”的解决办法。
  7. 【计算机网络】关于IP数据报 首部检验和的反码问题(二进制反码)
  8. 虚拟机上搭git服务器,搭建gitlab服务器
  9. 梯度锐化拉普拉斯锐化比较_锐化斧头
  10. 使用T-SQL管理数据中的Unicode字符