初始 js 与基本用法

嘴强程序员

已于 2022-03-04 20:37:29 修改

阅读量692

点赞数

文章标签： javascript 前端 css3

于 2022-03-04 20:33:32 首次发布

本文链接：https://blog.csdn.net/qq_62898618/article/details/123284005

版权

1.JS能做什么？我们重点学习什么？
2.JS的组成（ECMAScript、DOM、BOM）
3.JS的运行原理（见图）
4.JS的使用（内嵌、外部、缩写）
5.JS核心语法（变量、数据类型typeof()、输入输出、运算符号、控制语句、注释、语法约定）

Java与Javascript比较：
Java代码需要编译才能执行，而JS代码不需要编译就能执行；
Java是基于服务端的语言，JS是基于客户端的语言。
（什么叫基于服务端和基于客户端？简单理解，就是需要在服务端执行的或需要在客户端执行的。）

1.内置JS代码

<script type="text/javascript">

</script>

2.document.write("");

//输出一个字符串
document.write("hello world"); //显示一行字符串
document.write(1234); //显示一行数字
document.write(sname); //显示变量的值

============
js区分大小写
js语句结尾尽量写分号
大部分语法与java相同
js中注释与java相同
// /* /**
============

3.声明变量

3.1 var 变量名=值;
3.2 变量名=值;
注意：变量的数据类型由存入的数据来决定

var i=100; //i是数值型number
var a='aabb'; //a是字符串型string
var b="aabb"; //b是字符串型string

注意：在js中不明显区分单双引号。

换行：document.write("你好！<br/>"); //让“你好！”变红色：
document.write("<font color=red>你好！</font><br/>")

4. 运算符
只做运算，不做取整

//弹窗样式
alert(10/3); //3.33333335

alert(parseInt(10/3)); //取整数部分：3

5，if 语句 switch 语句的使用

var sb = 10;
       if(sb % 2 === 0){
           console.log("偶数");
       }else{
           console.log("奇数");
       }

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

var str = 1;
       switch(str){
           case 1:
               console.log("吃肉");
               break;
           case 2:
               console.log("吃饭");
               break;
           default:
               console.log("吃鬼");
               break;
       }

6.for 循环与do...while ,while 循环的使用

1.while循环

需求：输出1-100
var num = 1;
while(num<=100){
document.write(num+"<br/>");
num++;
}

2.do.... while

var num = 1;
do{
document.write(num+"<br>");
num++;
}while(num<=100);

3.for循环

for循环
for(var i = 1;i<=100;i++){
document.write(i+"<br>");
}

4.数组的输出

//数组的基本能使用
       var names = ["张三","里斯","wangwu"];
       for(var i = 0;i<names.length;i++){
          document.write(names[i]+"<br>");
       }

1.弹窗的应用

此类代码必须在

alert(10/3);   //3.33333335

var a=confirm("你确定要分手吗") ;
document.write(a); 确定 返回true 取消返回 false

var a=prompt("请你输入你要的类容");
document.write(a);//返回输入类容

 console.log("日志很好");

后面两个差不多用法

console.info();//普通信息输出
console.dir();//对象的层级

// js 一门弱类型语言统一使用var关键字

自定义弹窗---模态框设置输入框默认类容
// var name = prompt("请输入你的姓名","张三");
// alert(name);

元素与层级

</head>
<body>
	<div id="oDiv">
		123
		<div>
			456
		</div>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
		</ul>
		<p>hehe</p>
	</div>


	<script type="text/javascript">
		var oDiv = document.getElementById("oDiv");
        //查看元素
		console.dir(oDiv);
        //查看层级
		console.log(oDiv);
	</script>

元素

层级

2.根据id 获取标签

document.getElementById("标签的id名");

使用id获取标签制作简易加法赋值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		// 实现简易计算器


	</script>
</head>
<body>
	第一个数字： <input id="num1" type="text">
	<br>
	第二个数字: <input id="num2" type="text">
	<br>
	结果: <input id="num3" type="text">
	<br>
	<button onclick="add();">加法运算</button>

	<script type="text/javascript">

		function add(){
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			var sum = parseInt(num1)+parseInt(num2);
			// alert(sum);
			var num3 = document.getElementById("num3");
           //直接用标签对象调用value 给与赋值
			num3.value = sum;
		}

	</script>
</body>
</html>

嘴强程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初始 js 与基本用法

1.JS能做什么？我们重点学习什么？2.JS的组成（ECMAScript、DOM、BOM）3.JS的运行原理（见图）4.JS的使用（内嵌、外部、缩写）5.JS核心语法（变量、数据类型typeof()、输入输出、运算符号、控制语句、注释、语法约定）Java与Javascript比较： Java代码需要编译才能执行，而JS代码不需要编译就能执行； Java是基于服务端的语言，JS是基于客户端的语言。（什么叫基于服务端和基于客户端？简单理解，就是需要在服务端执行的或需要在客...
复制链接

扫一扫