前端开发 - JavaScript - 上
1.js引入
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>js引入</title>
<style type="text/css">
.span1{ color: red;}
</style> <!--外链式-->
<!--<script src="./1.js"></script>--> </head>
<body>
<!-- dom == document object model 有属性 有方法 行内式引入 -->
<p class="" id="" onclick="clickhandler()">123</p>
<span>234</span>
</body> <!-- 内部式 引入 建议引入时候在body之后，因为要等待所有dom元素标签加载完成后再去执行相应得js操作-->
<script type="text/javascript"> // window.document.write()
// document.write('有一首歌叫123')
document.write('<span class="span1">233</span>'); // windows.console.log()
console.log('我很好');
console.error('错误ss'); console.dir(window);
console.clear(); var a = prompt('输入姓名');
console.log(a); function clickhandler(){
// 弹出警告框
/*
这是一个方式
一个很好得方法
*/
window.alert(1);
alert(1)
}
</script> </html> <!--
总结：
引入js 三种方式； 行内式 内部式 外链式
做项目时：css js 一般使用外链式引入； javascript得输出方式：
1.document.write('有一首歌叫123')
document.write('<span class="span1">233</span>');
window.document.write()
2.console.log('我很好');
console.error('错误');
console.clear();
windows.console.log()
3.alert(1);
window.alert(1);
4.innerHTML/innerText
...
5.var a = prompt('输入姓名');
console.log(a);
-->
2.变量的声明和定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量得声明和定义</title>
</head>
<body> </body> <script type="text/javascript">
// 变量得声明
//js 中代码得执行顺序 自上往下 //1.先声明在定义
var dog;
// alert(dog); //undefined 未定义 dog='小黄';
// alert(dog)
// alert(dog)
// alert(dog) //2.声明立刻定义
var dog2='小红';
// alert(dog2); var $='aa';
alert($); //建议使用驼峰标识 来命名
var myHousePrice = '$1234'; /*
变量命名规范：
1.严格区分大小写
2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。
关键字：var number等
除了关键字 top name 也尽量不使用。
3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
*/ </script> </html>
3.五种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本数据类型</title>
</head>
<body> <script type="text/javascript">
/*
js中有两种数据类型
1.基本数据类型
number string boolean null undefined
2.引用数据类型
对象
Array object 正则
函数
*/ //1.number 数字类型
var a = 123;
console.log(a);
console.log(typeof a); //2.string 字符串类型
var str = '123';
console.log(str);
console.log(typeof str); //3.boolean 布尔类型
var b1 = false; //true/false
console.log(b1);
console.log(typeof b1); //4.null
var c1 = null; //空对象
console.log(c1);
console.log(typeof c1); //5.undefined
var d1;
console.log(d1);
console.log(typeof d1); //特殊：分母为0；
// Infinity
// number
var e1 = 5/0;
console.log(e1);
console.log(typeof e1); </script>
</body>
</html>
4.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body> <script type="text/javascript"> //1.赋值运算符
// var money = prompt('请输入金额...');
// var saveMoney = money * (1+0.02);
// console.log(saveMoney); //2.算数运算
var a = 10;
var b = 3;
var sum = a + b;
var min = a - b;
var t1 = a * b;
var t2 = a / b;
var t3 = a % b; // 余数 console.log(sum,min,t1,t2,t3); // 13 7 30 3.3333333333333335 1 //3.复合运算符
var c = 7, d = 8;
// d = c + d;
d += c;
console.log(c,d); // 7 15 // 自增 自减
var e1 = d++; //先赋值后+++
var e2 = ++d; //先++后赋值
console.log(e1,e2); var f1 = d--;
var f2 = --d;
console.log(f1,f2); //4.比较运算符 > < >= <= == === !=
console.log(5>6); //false
console.log(4==4); //true
console.log(4==5); //false
// 隐式转换 浏览器会将数值转成字符串； === 类型和值都比较
console.log('5'==5); // true
console.log('5'===5); // false console.log(4!=3) // true //5.逻辑运算符 &&（and） ||(or)
console.log('xxx:',false && false)
// console.log(true && true)
console.log(true || false) // true </script>
</body>
</html>
5.字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串处理</title>
</head>
<body>
<script type="text/javascript"> //字符串运算
var firstName = 'alice';
var lastNmae = 'B'; var fullName = firstName + " " + lastNmae;
console.log(fullName); // 字符串拼接 //字符串拼接
var str1 = '飞行员';
var str2 = '航空公司';
var str = '该法院受理的'+str1+'离职纠纷案件中，'+str2+'要求离职飞行';
console.log(str); // 对字符串 + 是拼接 其他得运算可以 - * /
var a1='1';
var a2='2';
console.log(a1+a2); // 12 拼接 不是数值
console.log(typeof(a1+a2)); // string
console.log(parseInt(a1)+parseInt(a2)); // 3 console.log(a1*a2); // 2
console.log(typeof (a1*a2)); //number var b1 = 'one';
var b2 = 'two';
console.log(b1*b2); // NaN == not a number
console.log(typeof (b1*b2)) // number </script>
</body>
</html>
6.数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型转换</title>
</head>
<body>
<script type="text/javascript">
//1.将数字类型转换成字符串类型 隐式转换 String() num.toString()
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 123 隐式转换 将数字转换成 string 进行拼接
console.log(n3); // 123123
console.log(typeof n3) // string //强制类型转换 String() toString()
console.log(':',typeof n1)
var str1 = String(n1)
console.log(str1);
console.log(typeof str1) var num = 234;
console.log(num.toString()) //2.将 字符串 类型转换成 数字 类型 Number() parseInt() parseFloat()
var stringNum = '789.123as';
var num2 = Number(stringNum);
console.log(num2)
console.log(typeof num2); // parseInt() 解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum));
console.log(typeof parseInt(stringNum)); console.log(parseFloat(stringNum))
console.log(typeof parseFloat(stringNum)) //number // 在js中所有得数据类型 都会被转换为boolean类型
// 0 NaN null undefined 为false 其他得为true
var b1 = '123';
var b2 = -123;
var b3 = Infinity; //无穷大 var b4 = 0;
var b5 = NaN;
var b6; //undefined
var b7 = null; console.log(':',Boolean(b1)) //true
console.log(Boolean(b2)) // true
console.log(Boolean(b3)) // true
console.log(Boolean(b4)) // false
console.log(Boolean(b5)) // false
console.log(Boolean(b6)) // false
console.log(Boolean(b7)) // false </script>
</body>
</html>
7.if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if</title>
</head>
<body>
<script type="text/javascript"> //if 语句
var ji = 10;
if(ji>=20){
console.log('大吉大利')
}else{
console.log('下次努力')
} if(true){ }else if(true){ }else if(true){ }else{ } // alert(222)
// 浏览器解析代码得顺序 是 从上往下 执行 // 考试系统录入
var math = 90;
var english = 85;
var sum = 485; //1.模拟 总分 > 400 并且(&&两个条件都成立才成立)数学 > 89 被清华录入
if(sum>400 && math>90){
console.log('录入成功')
}else{
alert('高考失利')
} //2.模拟 总分>400或者（|| 只要有一个成立就成立）英语>85 就被复旦录入
if(sum>500 || english>85){
alert('录入')
}else{
alert('失利')
} if(sum>500 || (math+english)>170){
alert(22)
} </script>
</body>
</html>
8.switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch</title>
</head>
<body>
<script type="text/javascript"> //switch
var gameScore = 'good'; // case 表示一个条件 满足条件走进去 遇到break 跳出
switch(gameScore){
case 'good':
console.log('good 玩得很好');
break; // 一定要加 break 否则会打印 better 下得内容
case 'better':
console.log('better 很好');
break;
case 'best':
console.log('best');
break;
default:
console.log('很遗憾');
// break; // 不需要些 走到最后了
}
// alert(11) </script>
</body>
</html>
9.while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while</title>
</head>
<body>
<script type="text/javascript"> // while 循环
//1.初始化循环变量 2.判断循环条件 3.更新循环变量
var i = 1;
while(i<=9){
// console.log(i);
i+=1;
} //练习
// 1-100 之间 是3得倍数 输出出来
var j = 1;
while(j<=100){
if(j%3===0){
console.log(j)
}
j++;
} </script>
</body>
</html>
10.do while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do_while</title>
</head>
<body>
<script type="text/javascript"> // do while
//1.初始化循环变量 2.判断循环条件 3.更新循环变量
// 不管有没有满足while，do里面得代码都会执行一次
var i = 3;
do{
console.log(i);
i++;
}while(i<5); </script>
</body>
</html>
11.for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for</title>
</head>
<body>
<script type="text/javascript"> //for 循环
//1.初始化 2.循环条件 3.更新循环变量
// for(var i = 1; i < 10; i++){
// console.log(i);
// } //1-100 偶数
// for(var i=1;i<=100;i++){
// if(i%2===0){
// //偶数
// console.log(i)
// }
// } //1.练习
//1-100之间所有数得和
// var sum = 0;
// for(var i=1;i<=100;i++){
// sum += i;
// }
// console.log(sum) //2.练习
/*
******
******
******
*/
// 双重for 循环
// for(var i=1;i<=3;i++){ // 行
// for(var j=1;j<=6;j++){ //列
// document.write('*')
// }
// document.write('<br>')
// } //作业： 在浏览器中输出直角三角形 6行 等边三角形 使用python 和js 语言输出
/* *
* *
* * *
* * * *
* * * * *
* * * * * * */ for(var i=1;i<=6;i++){
for(var j=1;j<=i;j++){
document.write('*')
}
document.write('<br>')
}
document.write('<br><br>'); /*
* 2*1-1
*** 2*2-1
***** 2*3-1
******* 2*4-1
********* 2*5-1
*********** 2*6-1 */
/*
* 2*1-1
*** 2*2-1
***** 2*3-1
******* 2*4-1
********* 2*5-1
*********** 2*6-1
*********
*******
*****
***
*
*/ //等边三角形
for(var m=1;m<=6;m++){
for(var n1=m;n1<6;n1++){
document.write(' ')
}
for(var n2=1;n2<=2*m-1;n2++){
document.write('*')
}
document.write('<br>')
} document.write('<br>'); //菱形
for(var a=1;a<=11;a++){
if(a<=6) {
for (var a1 = a; a1 < 6; a1++) {
document.write(' ')
}
}else{
for(var a2=7;a2<=a; a2++){
document.write(' ')
}
}
if(a<=6){
for(var a3=1;a3<=2*a-1;a3++){
document.write('*')
}
}else{
for(var a4=a*2-1;a4<22;a4++){
document.write('*')
}
} document.write('<br>')
} </script>
</body>
</html>
前端开发 - JavaScript - 上的更多相关文章
- 第十一章 前端开发-JavaScript
第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- 前端开发 JavaScript 规范文档
一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...
- 前端开发 - JavaScript - 总结
一.JavaScript的特征 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言.它运行在客户端从而减轻服务 ...
- 前端开发JavaScript入门——JavaScript介绍&基本数据类型
JavaScript 诞生于1995年,它的出现主要是用于处理网页中的 前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...
- 前端开发 - JQuery - 上
一.js的缺点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Web前端开发JavaScript基础
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
随机推荐
- jinja2问题集锦
用jinja2写模板的时候遇到了一些问题,记录一下 抽出base.html作为模板 之前的小项目写得都很不规范,模板都是能用就行,基本上只用到if语句,for语句和变量.导航栏都是复制粘贴,没有把共同 ...
- FreeRTOS 中断优先级配置（重要）
以下转载自安富莱电子: http://forum.armfly.com/forum.php NVIC 的全称是 Nested vectored interrupt controller,即嵌套向量中断 ...
- cocos2dx3.2升级Android5的坑
虽然已经转到服务端,但是对客户端的事情,偶尔还看看.公司的游戏用的是cocos2dx 3.2的版本, 然而在Android 5 上却无法运行. 先是没有触摸事件. 在stackoverflow上看到, ...
- ubuntu boot空间不足的解决方法
ubuntu boot空间不足的解决方法 2013年12月11日 11:11:39 yypony 阅读数:17000 标签: ubuntu内存boot内核更多 个人分类: linux_usageubu ...
- SSH无密码验证配置
一. 准备工作 首先要确保你的linux系统中已经安装了ssh,对于ubuntu系统一般默认只安装了ssh client,所以还需要我们手动安装ssh server: sudo apt-get ins ...
- SQL UNIQUE Constraint
SQL UNIQUE Constraint The UNIQUE constraint uniquely identifies each record in a database table. The ...
- [转]Linux动态库的种种要点
linux下使用动态库,基本用起来还是很容易.但如果我们的程序中大量使用动态库来实现各种框架/插件,那么就会遇到一些坑,掌握这些坑才有利于程序更稳健地运行. 本篇先谈谈动态库符号方面的问题. 测试代码 ...
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- 使用ADO GetChunk/AppendChunk 数据库存取二进制文件图象
在设计数据库的过程中,我们会经常要存储一些图形.长文本.多媒体(视频.音频文件)等各种各样的程序文件,如果我们在数据库中仅存储这些文件的路径信息,尽管这可以大大地减小数据库的大小,但是由于文件存在磁盘 ...
- 数据仓库与BI面试常见题目
一. 数据库 1. Oracle数据库,视图与表的区别?普通视图与物化视图的区别?物化视图的作用?materialized view 答:a:视图是虚拟表,提高了表的安全性,视图没有实际物理空间,而表 ...